JavaScript样式

《JavaScript样式》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、样式修改元素外观方式修改元素外观主要有下面3种方法：修改ID，修改className,修改元素的style属性修改ID？会造成多么混乱的结果可想而知！修改className确实是非常好的方法，我们甚至可以利用CSS层叠，通过修改body的className来修改整个页面的风格！前提是我们必须写特定的CSS！//CSS代码body.redStyle{border:2pxsolidred;}body.redStyle*{color:red;}body.blueStyle{border:2pxsolidblue;}body.blueStyle*{co

2、lor:blue;}//JS代码document.body.className="redStyle";//切换为“红粉佳人”风格document.body.className="blueStyle";//切换为“蓝调情怀”风格但修改className也并非那么容易，不要忘了className可以有多个的！所以不管添加，测试还是移除元素的className，都要小心，下面的函数可以造福人类！functionhasClassName(obj,cn){return(newRegExp("\b"+cn+"\b")).test(obj.classNa

3、me);}functionaddClassName(obj,cn){returnobj.className+=""+cn;//第一次添加时，会多出一个前置空格//但不用担心，浏览会自动将其清除掉}functiondelClassName(obj,cn){returnobj.className=obj.className.replace(newRegExp("\b"+cn+"\b"),"");//同样，多个className之间的多个空格也会被视为一个}元素的style属性?见下面Style属性可以在元素的style属性上应用CSS规则，并且

4、style属性上的规则优先级要高于样式表中的规则，因此，通过修改元素的style属性来修改元素的外观可能是最方便并且是最有效的方法了。同其它HTML属性不同的是，元素的style属性是一个对象，CSS的属性名和属性值分别映射到了style对象的属性名和属性值，如定义对象的style="color:red;"，在JavaScript中访问时就可以这样访问：obj.style.color。但style属性也有一些需要注意的地方，比如CSS属性名中包含一些不能用作变量名的非法字符时，在JavaScript中访问时，会自动转换成驼峰命名式。varoDi

5、v=document.getElementById("oDiv");alert(oDiv.style.fontSize);//自动驼峰命名//如果要直接获取style属性中的所有CSS文本，则可以使用style对象的cssText属性alert(oDiv.style.cssText);//对于CSS简写方式，各个浏览器返回结果出现分歧alert(oDiv.style.border);//需要分别获取值alert(oDiv.style.borderLeftColor);//但会很麻烦//对于颜色，火狐总返回RGB表现形式,但设置时可以使用十六进制

6、形式alert(oDiv.style.backgroundColor);//火狐会返回rgb(x,y,z)但是元素的style属性仅仅提供了内联样式所定义的CSS规则，而不能反映CSS样式表中的规则//CSS#oDiv{color:blue;}//HTMLDiv