[转载]javascript动态改变样式的5种方法 | WEB前端开发-关注常见的WEB前端开发问题、最新的WEB前端开发技术(webApp开发、移动网站开发)、最好的WEB前端开发工具和最全的WEB前端开发w3cschool手册.现在页面的交互性越来越强,我们在实际中总要动态的改变某些样式,今天我为大家介绍javascript动态改变样式的5种方法。
第一种方法,className:
function fun1(){ var test=document.getElementById("test"); test.className+=" red"; }
第二种方法,.css():
function fun2(){ $("#test").css("background","red"); }
第三种方法,.attr():
function fun3(){ $("#test").attr("style","background:red"); }
第四种方法,cssText:(注意事项:用cssText批量修改样式)
function fun4(){ var test=document.getElementById("test"); test.style.cssText="background:red"; }
第五种方法,style:
function fun5(){ var test=document.getElementById("test"); test.style.background="red"; }
不同的方法适应不同的应用场景,大家根据需要采用最合适的方法.
完整代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> .test{ width:100px; height:100px; background:#000} .red{ background:red} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript"> //第一种方法 function fun1(){ var test=document.getElementById("test"); test.className+=" red"; } //第二种方法 function fun2(){ $("#test").css("background","red"); } //第三种方法 function fun3(){ $("#test").attr("style","background:red"); } //第四种方法 function fun4(){ var test=document.getElementById("test"); test.style.cssText="background:red"; } //第五种方法 function fun5(){ var test=document.getElementById("test"); test.style.background="red"; } window.onload=fun5; </script> </head> <body> <div id="test"></div> </body> </html>