This question already has answers here:
Putting Javascript into CSS
(3 answers)
Closed 7 years ago.
Well basically I have a website with styles contained within various css files, now I'd like to add a certain js, but only in one style. So I would like to be able to add it in my css file, is such thing possible?
No, this is not possible, and nor should it be. Separate your application logic from your styling.
For when the two need to interact, you can detect certain styles with JavaScript and load various other JavaScript files from there.
No, this isn't possible. However, look into jQuery selectors to attach JavaScript functionality to certain CSS class names:
http://api.jquery.com/category/selectors/
For example, you could declare an element with a certain class name like this:
<div class="class-name"></div>
And then include some JavaScript in your document which does something to the element based on its class name, like this:
$('.class-name').click(function() {
alert('You clicked .class-name');
});
Here's a jsFiddle example of the above: http://jsfiddle.net/YAZpE/
Related
This question already has answers here:
Limit scope of external css to only a specific element?
(6 answers)
Closed 2 years ago.
when using jQuery load() to inject an HTML page into a DIV, the HTML could bring CSS files in its head, importing them in the DOM.
The problem is that these injected CSS rules are then applied globally, which is not always the case I need.
Is there a way to avoid this behavior and limit the imported HTML pages CSS only within the hosting DIV?
Just get the content:
$("#myDiv").load("page.html #contentContainer")
or
$("#myDiv").load("page.html body")
This question already has answers here:
How to create a <style> tag with Javascript?
(18 answers)
Closed 8 years ago.
With my question I suspect a lot of people may get confused between dynamic styling (what you can achieve by jQuery's .css() function and dynamic CSS rules. The first is where it only changes the styles of existing elements matching the selector. But what I am after is adjusting the rule so any new elements matching the selector will also use that (dynamic) rule.
As an example let's take a set of DIVs with class "pane".
I can change the background color of existing panes using $(".pane").css({"background-color": "#00f"});
But if I then add a new pane $("body").append("<div class='pane'></div>"); it won't use this new style because it isn't a rule.
I don't understand why adding/changing CSS rules isn't the default behaviour? Was this ever discussed by a W3C working group to anyone's knowledge?
Does anyone know if it is possible to add or change CSS rules dynamically client side (ie without communicating with the server)?
You can append the css in style tag to page head using:
$("<style>").prop("type","text/css").html(".pane{background-color: #00f;}").appendTo("head");
or
$("head").append($("<style>").prop("type","text/css").html(".pane{background-color: #00f;}"))
This question already has answers here:
Removing or replacing a stylesheet (a <link>) with JavaScript/jQuery
(9 answers)
Closed 7 years ago.
So quick question, I just bought a template of a website that I really like, only for the about us page. I use a Volusion website, so we have a main CSS for the main template, and I want to be able to just have one page, the about us page, use this new css. If I put it in the body for the about-us page, it is obviously over ridden by the sites main css.
If it put it in the header with the rest of the css, it then throws off CSS all over the website, when I only wanted it reference to the about-us page.
Without having to go back, and rewrite every piece of CSS to make it unique only to the about-us page, so there is nothing conflicting, is there any quick method of having a unique set of CSS for just one page with a special jQuery call, or href. I don't want to use a ton of !important either.
Wrap the About us in a id wrapper like this
<div id="about-us-wrapper" >
{...}
</div>
Then in the imported the CSS file, append
#about-us-wrapper .xxx
in front of each line.
This question already has answers here:
how to alias class name in css or sass
(6 answers)
Closed 9 years ago.
Is it possible to generate css class alias?
Details:
I'm using bootstrap.css framework and I've got some html that I cannot change. This html has some container with class "awesomnes-container" and some items inside with like "awesomnes-item".
Lets say I want container to bevahe exacly like .row class and item like .col-lg-12
I know its pretty simple to add needed classes with javascript but I find it not 100% stable solution and in case of failture the consequences would be huge.
I also dont want to modify oryginal bootstrap file as It would be nightmare for updates. I'm using some 'overlay' css file loaded after bootstrap.
Bootstrap's CSS is written in LESS form by default, so it would be better to include an extra .less file and use its extend function to map your HTML's classes to the Bootstrap classes you want them to implement.
In this case, you'd be looking at:
.awesomnes-container {
&:extend(.row);
}
.awesomnes-item{
&:extend(.col-lg-12);
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to access css properties in javascript when applied via external CSS file?
How do i get a computed style?
I'm trying to set up something simple to show/hide a <div> when something else is clicked. I was setting the display property in a CSS class applied to the dynamic <div>. I found that the div.style.display property is not set to the initial class value the first time I check it. I'm guessing that things are working correctly and that since I did not specifically apply the style to the tag in HTML, that it is not set when my JS executes. Would it be common practice to set display explicitly on the tag in this case so I have a value to query?
It would be common practice to set the elements to display:none in your CSS file that way you don't see the elements while your JavaScript is loading on the page. But you could apply the style="display:none;" inline if you want.