Hi guys:
I got some elements whose style is dynamically modified by a JS. However, I hope one of which would not be modified.
How could I specify its style, which is static, not to be overriden anyway. Thanks.
+2
A:
You can't.
The best you could do would be to override the javascript methods that do the modifying.
Jason Kester
2010-03-17 03:09:59
+4
A:
this cannot be done. JavaScript executes after the CSS has been loaded & applied. you'll have to change your IDs & classes and/or your JavaScript code so that it does not target the elements you don't want changed.
GSto
2010-03-17 03:10:14
A:
If you use jQuery the below will work:
#MyContainer, .MyOtherContainer
{
font-size: 10px !important;/*stop js from changing*/
}
$("#MyContainer").css("font-size", 100000);//will be ignored
row1
2010-03-17 03:14:40
`!important` only makes sure that the style is applied, but it doesn't stop the JavaScript call from changing the existing style.
Randell
2010-03-17 03:24:09
I should of been clear and mentioned that my example uses jQuery, jQuery respects !important defined in the css.
row1
2010-03-17 03:48:21
@deceze : is it so wrong to do that ? please explain or should i start new thread /question ? i'm new here ;)
justjoe
2010-03-17 04:09:55
Did you even test this?
Justin Johnson
2010-03-17 04:38:41
I tested it in Firefox 3.6 + Firebug + jQuery 1.4.2 and the font size does not change if !important is specified in a css rule.
row1
2010-03-17 05:09:36
@deceze : thanks i feel welcome here ;D
justjoe
2010-03-17 05:10:09
I have to apologize, it does seem to work when setting new styles via CSS declarations (not even jQuery dependent). It won't prevent direct manipulation of attributes though. Again, apologies and wrong comments removed.
deceze
2010-03-17 05:47:14
After some more research, this is what I came up with: Applying CSS styles via jQuery/Javascript generates an inline style. `!important` declarations anywhere *should* trump inline styles, except when they don't. Different browsers seem to do it differently, and it even seems to depend upon other weight factors of the selectors used. Directly manipulating attributes via Javascript (not CSS attributes) will override any CSS styles. Bottom line: this method may work in some cases, but is not guaranteed to.
deceze
2010-03-17 06:13:49
@deceze, thank you for specifying the caveats.
row1
2010-03-17 06:30:21
+2
A:
The short answer is you can't. CSS is applied as it is encountered by the browser. Since the call to the JavaScript is the latest call that changes that particular style, it will be applied to the element.
What you can to is to run another JavaScript that changes the style of that specific element after the first script. Since there is something unique about that element, you can probably refer to it by its ID, class, or name.
Randell
2010-03-17 03:21:59
A:
Perhaps you could put the elements into an iframe, where the src attribute refers to a different path or domain. The javascript in the container page then couldn't modify the element, because of same origin rule which doesn't allow modification of data from different origins.
BeWarned
2010-03-17 03:38:35
+2
A:
As you have seen, you can't do this in CSS; however, you can instruct your JavaScript to not update an element's style, but it requires some manual attention. Consider the following:
HTML
<ul id="some-list">
<li>A</li>
<li>B</li>
<li class="no-style-update">C</li>
<li>D</li>
</ul>
JavaScript (vanilla)
var nodes = document.getElementById("some-list").getElementsByTagName("LI");
for ( var i=0, l=nodes.length; i<l; ++i ) {
// If style updates are allowed
if ( !nodes[i].className.match(/\bno-style-update\b/i) ) {
// Update the element's style
}
}
Justin Johnson
2010-03-17 04:46:05