JS控制CSS样式的方法

　　群里的兄弟问的效果

　　网上搜到的不错的控制css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>JS控制样式</title> 
<style type="text/css"> 
/*这个不要去啊。。*/ 
* { 
    font-size:12px; 
} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A(function%20()%20%7B%20%0D%0A%20%20%20%20if%20(window.CSSStyleSheet)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20wc%20%3D%20window.CSSStyleSheet.prototype%3B%20%0D%0A%20%20%20%20%20%20%20%20wc.addRule%20%3D%20function%20(a%2C%20b)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20wc%20%3D%20this%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20wc.insertRule(a%20%2B%20%22%7B%22%20%2B%20b%20%2B%20%22%7D%22%2C%20wc.cssRules.length)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20wc.removeRule%20%3D%20function%20(a)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20wc%20%3D%20this%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20wc.deleteRule(a)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20wc.__defineGetter__(%22rules%22%2C%20new%20Function(%22return%20this.cssRules%22))%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D)()%3B%20%0D%0A%0D%0Avar%20addRule%20%3D%20function%20(a%2C%20b)%20%7B%20%0D%0A%20%20%20%20var%20wc%20%3D%20document.styleSheets%5B0%5D%2C%20i%3B%20%0D%0A%20%20%20%20for%20(i%20%3D%200%20%3B%20i%20%3C%20wc.rules.length%20%3B%20i%20%2B%2B)%20if%20(wc.rules%5Bi%5D.selectorText%20%3D%3D%20a)%20wc.removeRule(i)%3B%20%0D%0A%20%20%20%20wc.addRule(a%2C%20b)%3B%20%0D%0A%7D%3B%20%0D%0Avar%20add%20%3D%20function%20()%20%7B%20%0D%0A%20%20%20%20var%20wc%20%3D%20document.getElementById(%22wc%22).value%3B%20%0D%0A%20%20%20%20if%20(%2F(%5B%5E%5C%7B%5D%2B)%5Cs*(%5C%7B%5B%5E%7D%5D%2B%5C%7D)%2F.test(wc))%20%7B%20%0D%0A%20%20%20%20%20%20%20%20addRule(RegExp.%241%2C%20RegExp.%242)%3B%20%0D%0A%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20alert(%22%E6%A0%B7%E5%BC%8F%E9%94%99%E8%AF%AF%22)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%3B%20%0D%0A%3C%2Fscript%3E"> 
<span class="font">我是字</span><hr /> 
<button onclick="add()">控制</button> 
<textarea style="width:500px;height:500px;" id="wc"> 
.font { 
    font-size:18px; 
    font-weight:bold; 
    line-height:20px; 
    color:#FF0000; 
} 
</textarea> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程