How do I get and set an attribute of a CSS class
in [CSS]
|
Prev: Getting a DIV to cover the whole HTML page, not just the browser screen?
Next: Getting a DIV to cover the whole HTML page, not just the browser screen?
From: Jonathan N. Little on 17 Apr 2008 10:19 Jeff wrote: > Jonathan N. Little wrote: >> Steve wrote: >>> >>> Jonathan N. Little wrote: >>>> Steve wrote: >>>>> Anyone have an example of getting and setting an attribute of a CSS >>>>> class defined at the top of an HTML page? >>>> Do you mean via JavaScript? Or do you mean inserting a STYLE element >>>> within the HEAD? >>> >>> Setting it up in the HEAD and then using javascript to alter it >>> dynamically. > > The question is still nebulous. > > Jonathans "solution" will not change all elements of a particular class. > If the OP wishes to do that he should look into addRule and insertRule, > I don't remember which is IE and and which is everyone else. Those work > with any selector, not just class names. I think the OP is unsure of > what he wants. > Firstly my example was just that, and example, not to be a solution of any kind. OP question is very vague, tried to understand the "real" question. Secondly, addRule or insertRule... yeah that would change whole rules but don't expect and IE support! IE doesn't really support setAttribute so many times you have to set directly via object object.style.property="foo" for IE. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="content-language" content="en-us"> <title>No IE!</title> <style type="text/css"> </style> <script type="text/javascript"> function day2night(){ var ss=document.styleSheets[0]; ss.insertRule('html { color: #fff; }',0); ss.insertRule('body { background-color: #000; }',1); } </script> </head> <body> <h1>No IE!</h1> <p>This is a test so click turn off the <a href="#" onclick="day2night()">lights!</a></p> </body> </html> An alternative is to walk the DOM and build collection of elements with className=="foo" and and set to a pre-defined class "bar" or thten again set individual properties via the object. PITA -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: Jeff on 17 Apr 2008 12:34
Jonathan N. Little wrote: Hello Jonathan, > Jeff wrote: >> Jonathan N. Little wrote: >>> Steve wrote: >>>> >>>> Jonathan N. Little wrote: >>>>> Steve wrote: >>>>>> Anyone have an example of getting and setting an attribute of a CSS >>>>>> class defined at the top of an HTML page? >>>>> Do you mean via JavaScript? Or do you mean inserting a STYLE element >>>>> within the HEAD? >>>> >>>> Setting it up in the HEAD and then using javascript to alter it >>>> dynamically. >> >> The question is still nebulous. >> >> Jonathans "solution" will not change all elements of a particular >> class. If the OP wishes to do that he should look into addRule and >> insertRule, I don't remember which is IE and and which is everyone >> else. Those work with any selector, not just class names. I think the >> OP is unsure of what he wants. >> > > Firstly my example was just that, and example, not to be a solution of > any kind. OP question is very vague, tried to understand the "real" > question. Oh, I didn't mean to take anything away from your example. I just wanted to add on. I like your example. > > Secondly, addRule or insertRule... yeah that would change whole rules > but don't expect and IE support! IE doesn't really support setAttribute Hmmm, I haven't tried that. > so many times you have to set directly via object > object.style.property="foo" for IE. > > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" > "http://www.w3.org/TR/html4/strict.dtd"> > <html> > <head> > <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> > <meta http-equiv="content-language" content="en-us"> > <title>No IE!</title> > > <style type="text/css"> > </style> > > <script type="text/javascript"> > function day2night(){ > var ss=document.styleSheets[0]; > ss.insertRule('html { color: #fff; }',0); > ss.insertRule('body { background-color: #000; }',1); > } > </script> I use this, which includes IE and multiple selectors for IE. function addRule(selector,css_text){ var SS=document.styleSheets[document.styleSheets.length-1]; if (SS.addRule){ var selectors=selector.split(','); for(var i=0;i<selectors.length;i++){ SS.addRule(selectors[i],css_text)} }else{ SS.insertRule(selector+' {'+css_text+' }',SS.cssRules.length); } } Haven't tested in IE7, but works in IE6, FF, and I think Opera and Safari... There's no explicit test for insertRule, but it could be added if you wanted to avoid an error in some mystery browser, but then you'd also add a test for document.styleSheets and why bother bloating the code. I'm not a wordy guy! You've seen my color styler? I posted it here a while back. > > </head> > <body> > <h1>No IE!</h1> > <p>This is a test so click turn off the <a href="#" > onclick="day2night()">lights!</a></p> > </body> > </html> > > An alternative is to walk the DOM and build collection of elements with > className=="foo" and and set to a pre-defined class "bar" or thten again > set individual properties via the object. PITA Yeah, but necessary. Besides, it's more fun to style descendants. Jeff > > |