Using code to change multiple properties of style is inefficient. The simple way is defining style sheets and using selectors to match elements. The style sheets will change multiple properties of style. A markup's class attribute is used to classify elements and often as the basis of applied style sheets. Modifying the className property is a common way to change an element's style.
The class attribute can contain multiple class names. The troublesome thing is that, if there're multiple class names, they should be separated by space. Checking if there's a class name contained in the class attribute needs parsing a space separated string. Adding or removing a class name needs appending a string to this string or removing a sub string from it.
The following example demonstrates three functions about how to check, add, remove, or toggle class names.
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.released {
border-width: 1px;
border-color: red;
border-style: dashed;
}
.pressed {
border-width: 5px;
border-color: black;
border-style: solid;
}
</style>
<script type="text/javascript">
window.onload = function() {
function hasClass(element, clz) {
var clzs = element.className;
if(!clzs) { // no class attribute
return false;
}
if(clzs === clz) {
return true;
}
return clzs.search('\\b' + clz + '\\b') !== -1;
}
function addClass(element, clz) {
if(!hasClass(element, clz)) {
if(element.className) {
clz = ' ' + clz;
}
element.className += clz;
}
}
function removeClass(element, clz) {
element.className = element.className.replace(
new RegExp('\\b' + clz + '\\b\\s*', 'g'), '');
}
function toggleClass(element, clz1, clz2) {
if(hasClass(element, clz1)) {
removeClass(element, clz1);
addClass(element, clz2);
}
else if(hasClass(element, clz2)) {
removeClass(element, clz2);
addClass(element, clz1);
}
}
document.getElementById('logo').onclick = function() {
toggleClass(this, 'released', 'pressed');
};
};
</script>
</head>
<body>
<img id="logo" class='released'
src="../images/caterpillar_small.jpg">
</body>
</html>