js如何改变css样式

js改变css样式的方法：1、使用cssText方法；2、使用【setProperty()】方法；3、使用css属性对应的style属性。

js如何改变css样式

本教程操作环境：windows7系统、css3版，DELL G3电脑。

js改变css样式的方法：

第一种：用cssText

div.style.cssText=&#39;width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;&#39;;

第二种：用setProperty()

 div.style.setProperty(&#39;width&#39;,&#39;700px&#39;);
 div.style.setProperty(&#39;height&#39;,&#39;300px&#39;);
 div.style.setProperty(&#39;line-height&#39;,&#39;300px&#39;);
 div.style.setProperty(&#39;background&#39;,&#39;#f00&#39;);
 div.style.setProperty(&#39;color&#39;,&#39;#fff&#39;);
 div.style.setProperty(&#39;border&#39;,&#39;1px solid blue&#39;);
 div.style.setProperty(&#39;text-align&#39;,&#39;center&#39;);

第三种：使用css属性对应的style属性

 div.style.width = "800px";
 div.style.height = "250px"; 
 div.style.lineHeight = "250px"; 
 div.style.background = "#000";
 div.style.color = "#fff";
 div.style.border = "1px solid #111";
 div.style.textAlign = "center";

<body>
        <div id="div">这是一个盒子</div>
        <script type="text/javascript">
            var div = document.getElementById("div");
            
            //第一种:用cssText
            div.style.cssText=&#39;width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;&#39;;
            
            //第二种：用setProperty()
            div.style.setProperty(&#39;width&#39;,&#39;700px&#39;);
            div.style.setProperty(&#39;height&#39;,&#39;300px&#39;);
            div.style.setProperty(&#39;line-height&#39;,&#39;300px&#39;);
            div.style.setProperty(&#39;background&#39;,&#39;#f00&#39;);
            div.style.setProperty(&#39;color&#39;,&#39;#fff&#39;);
            div.style.setProperty(&#39;border&#39;,&#39;1px solid blue&#39;);
            div.style.setProperty(&#39;text-align&#39;,&#39;center&#39;);
            
            //第三种：使用css属性对应的style属性
            div.style.width = "800px";
            div.style.height = "250px"; 
            div.style.lineHeight = "250px"; 
            div.style.background = "#000";
            div.style.color = "#fff";
            div.style.border = "1px solid #111";
            div.style.textAlign = "center";
        </script>
    </body>

相关教程推荐：CSS视频教程

以上就是js如何改变css样式的详细内容，更多请关注https://www.sxiaw.com/其它相关文章！