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.
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")
I have a site that's maintained by a 3rd party. They will allow us to load our custom js file in the header so that we can manipulate the DOM as each page loads. I know how to swap out classes, etc. but I was curious if I can sniff for a HEX value and swap it out for another instead of adding classes here and there to do the same thing.
I don't want to this to one element (e.g. getElementByID or tag) I want it to swap out ALL instances of this variable. So if the CSS is:
fred { color: #e3e3e3; } (and other classes are also using #e3e3e3)
I want to be able to search for all instances of #e3e3e3 and change them to #d9d9d9. or something like that.
Thanks
If you are explicitly trying to modify the CSS instead of just adding either inline styles to an element or by adding your own style tag to the document with more specific CSS, you could technically do what you are asking, as answered by this other SO question.
I would recommend instead of that you either inline your CSS if you are targeting only a few DOM elements, or create a more specific CSS rule targeting the classes you want to change.
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;}"))
I have a class with css styles already defined. I am now trying to load that page as IFRAME in other site. I want to change the css property of that particular class from the loaded site. Is it possible with jquery. I tried from my end its not getting . can anyone help me...
You cannot change style of elements in iframe due to same-origin policy.
you can also use attr attribute to change value of specific attribute of Html.
$("img").attr("width","500");
Or
$("#tagid").attr("width","500");
or
$(".tagclass").attr("width","500");
But in one page you can't change property of child page which is loaded in IFRAME.
You can add or remove class using jquery as following way
$(".classname").addClass('new-classname');
$(".classname").removeClass('remove-classname');
$(".classname").css("propertyname","setvalue");
example
$(".classname").css("height","50px");
for iframe use like
$("iframe").contents().find(".classname").css("propertyname","setvalue");
reference css
contains-selector
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/