The primary use of this is to hide/show/toggle elements when called from other routined - none of this litters the HTML - these would all be called from Javascript.
For instance I set rows in a table with a particular class. I then use DOM to find all elements by class, append an onMouseClick event to them and in the onMouseClickI call a function that will expand the row and drill down on data that can be dynamically loaded as well.
This snippet reminded me of a function I've used before that does exactly the same thing. It's a bit more flexible though, allowing you to limit the class to a particular element, I don't know who wrote it, but I'll post it up and hopefully we'll weed the original author out of the works.
// setStyleByClass: given an element type and a class selector, // style property and value, apply the style. // args: // t - type of tag to check for (e.g., SPAN) // c - class name // p - CSS property // v - value var ie = (document.all) ? true : false;
function setStyleByClass(t,c,p,v){
var elements; if(t == '*'){ // '*' not supported by IE/Win 5.5 and below
elements = (ie) ? document.all : document.getElementsByTagName('*'); }else{
elements = document.getElementsByTagName(t); } for(var i = 0; i < elements.length; i++){ var node = elements.item(i); for(var j = 0; j < node.attributes.length; j++){ if(node.attributes.item(j).nodeName == 'class'){ if(node.attributes.item(j).nodeValue == c){ eval('node.style.' + p + " = '" + v + "'"); } } } } }
Just wondering, since classes seem to be a little more static and well-defined than IDs... what's the benefit of using this, rather than just adding on CSS specifications to the class? After all, classes were designed for CSS in the first place. :P
It's useful when you want to change a style when an element is clicked or something similar. For example I know a friend who uses it that when an element is clicked it toggle's another element's visibility (visible/hidden).
But yes, it is better to define all your styles in the CSS stylesheet rather then litter your HTML with them
For instance I set rows in a table with a particular class. I then use DOM to find all elements by class, append an onMouseClick event to them and in the onMouseClickI call a function that will expand the row and drill down on data that can be dynamically loaded as well.
Like stated above, there are some uses...
// setStyleByClass: given an element type and a class selector,
// style property and value, apply the style.
// args:
// t - type of tag to check for (e.g., SPAN)
// c - class name
// p - CSS property
// v - value
var ie = (document.all) ? true : false;
function setStyleByClass(t,c,p,v){
var elements;
if(t == '*') {
// '*' not supported by IE/Win 5.5 and below
elements = (ie) ? document.all : document.getElementsByTagName('*');
} else {
elements = document.getElementsByTagName(t);
}
for(var i = 0; i < elements.length; i++){
var node = elements.item(i);
for(var j = 0; j < node.attributes.length; j++) {
if(node.attributes.item(j).nodeName == 'class') {
if(node.attributes.item(j).nodeValue == c) {
eval('node.style.' + p + " = '" + v + "'");
}
}
}
}
}
<style> .korisu-test { background-color: pink; } </style> <div class="korisu-test">testing some layout stuff here</div> <style> .korisu-test { border: 3px dotted blue; } </style>and it's evaluated here (!important added to override site's style):But yes, it is better to define all your styles in the CSS stylesheet rather then litter your HTML with them