Apply CSS via ECMASCript/JavaScript

[w0lf42]

Is it possible to have ECMAScript/JavaScript apply a defined style (defined in an external css file [i.e. global.css]) to a class? If so, how?

Thanks.

[_Aerospace_Eng_]

So you mean adding css to the css file that already exists? Or you mean just using javascript to apply CSS? Well the general rule of thumb is css properties that are two words become one word with the 2nd word captalized.


document.getElementById('theid').style.backgroundColor='#000099';



Does that help?

[w0lf42]

I was actually curious if it's possible to apply an already definded style sheet to a class/id with Javascript.

I think this is close (or perhaps correct):
tohide.className='hidden';

I think the answer to this is:
function setClassName(objId, className) {
document.getElementById(objId).className = className;
}

[w0lf42]

And as a follow-up question, I am curious how one can apply css to a class.

this seems to work for IDs:
document.getElementById(moduleName).style.display = 'none';

I've tried a few failed attempts to target classes:
document.moduleChildrenChild[i].className.style.display = 'none';
for( i = 0; i < moduleChildren.length; i++ ) {
if ( moduleChildren[i].className == "tabs") {
var moduleChildrenChild = moduleChildren[i].childNodes;
for( i = 0; i < moduleChildrenChild.length; i++ ) {
if ( moduleChildrenChild[i].className == activeTab) {
// apply active class to activated tab
} else {
// apply passive class all non-activated tabs
document.moduleChildrenChild[i].className.style.display = 'none';
}
}
}
}

[Jon Hanlon]

css uses 3 different types of selectors:

HTML elements. eg. H1 { color : red }
Class Names eg. .loud { color : lime; font-weight: bold }
Ids eg. #banner { color : silver; font-size: 14pt }

You can also nest selectors:

H1 .loud { color: yellow } /* applies to H1 elements with class "loud" */

So, by definition, css is always applied to a class.

In Internet Explorer, stylesheets are accessible through the styleSheets collection, and each css element is represented by a rule.

document.styleSheets[1].rules[3].style.border = "red thick solid"

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_stylesheet.asp

In IE you can add a rule dynamically to a stylesheet:

http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/addrule.asp

[RysChwith]

If you're trying to use scripting to access the stylesheets directly, I've come across a couple of functions that have proven useful:function changecss( theClass, element, value ) {
//documentation for this script at http://www.shawnolson.net/a/503/
var cssRules;

if( document.all ) {
cssRules = 'rules';
} else if( document.getElementById ) {
cssRules = 'cssRules';
}

for( var S = 0; S < document.styleSheets.length; S++ ) {
for( var R = 0; R < document.styleSheets[ S ][ cssRules ].length; R++ ) {
if( document.styleSheets[ S ][ cssRules ][ R ].selectorText == theClass ) {
document.styleSheets[ S ][ cssRules ][ R ].style[ element ] = value;
}
}
}
}and this pair:function appendStyleRule( ruleSet ) {
//URL: http://www.faqts.com/knowledge_base/view.phtml/aid/11843
if( document.styleSheets ) {
if( document.styleSheets.length == 0 ) {
appendStyleElement();
}
if( document.styleSheets.length > 0 ) {
if( document.styleSheets[ 0 ].insertRule ) {
document.styleSheets[ document.styleSheets.length -1 ].insertRule(
ruleSet, document.styleSheets[ document.styleSheets.length - 1 ].cssRules.length );
} else if( document.styleSheets[ 0 ].addRule ) {
var ruleSetPattern = /(.*)({([^}]*)})/;
var match = ruleSetPattern.exec( ruleSet );
if( match ) {
var selector = match[ 1 ];
var declarations = match[ 3 ];
document.styleSheets[ document.styleSheets.length -1 ].addRule( selector, declarations );
}
}
}
}
}

function appendStyleElement() {
//URL: http://www.faqts.com/knowledge_base/view.phtml/aid/11843
if( document.createElement ) {
var styleElement = document.createElement( "style" );
if( styleElement ) {
styleElement.type = "text/css";
var headElement = document.getElementsByTagName( "head" )[ 0 ];
headElement.appendChild( styleElement );
}
}
}The first one is used to alter a CSS property defined in a stylesheet, and the next two are used to create new style rules in the stylesheet. They should all work with external as well as embedded stylesheets.

Rys