Home  >  Article  >  Web Front-end  >  How to change css style using js

How to change css style using js

青灯夜游
青灯夜游Original
2021-05-20 17:27:1426334browse

Method: 1. Use "Object.style.Attribute name="value""; 2. Use "Object.style.cssText="Attribute name:Value""; 3. Use "Object.setAttribute( "class","class name")"; 4. Use the setAttribute() function to change the css file.

How to change css style using js

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Javascript methods to modify css style (four types)

The first one: use object.style.property name="value" to Modify the class name of the style sheet.

For example:

div1.style.width="100px";

Second: Use Object.style.cssText="Attribute name: value" to modify the embedded css.

Example:

div1.style.cssText="width:100px;height:100px;background: palevioletred;";

Third method: Use object.setAttribute("class","class name") to modify the class name of the style sheet.

For example:

div1.setAttribute("class","div2")

Fourth method: Use the setAttribute() function to change the external css file, thereby changing the css of the element.

For example:

div1.setAttribute("href","css2.css");

html code:

1d92bf69482700fca057d30f08918a96
c8f1bd2f7739fc4bad8f55bac472bd1f116b28748ea4df4d9c2150843fecfba68
6fd9c25e533a9d166641cb87d2448bc6216b28748ea4df4d9c2150843fecfba68
4dd653285949af25c14b463618444190316b28748ea4df4d9c2150843fecfba68
dd2751f7d31c01d83ceca356d9e60c77416b28748ea4df4d9c2150843fecfba68

css1.css file

@charset "utf-8";
#divBtn1,#divBtn2,#divBtn3,#divBtn4{
    width:100px;
    height:100px;
    margin-bottom: 10px;
}
#divBtn1{background:yellowgreen;}
#divBtn2{background:paleturquoise;}
#divBtn3{border:1px solid #ccc}
#divBtn4{background:blue;}
.div3{width:100px;height:100px;background:blueviolet}

css2.css file

@charset "utf-8";
#divBtn4{background: greenyellow;}
#divBtn1,#divBtn2,#divBtn3,#divBtn4{
    width:200px;
    height:200px;
    border:1px solid #ccc;
    margin-bottom: 10px;
}
#divBtn1{background:yellowgreen;}
#divBtn2{background:paleturquoise;}
.div3{width:100px;height:100px;background:blueviolet}

js code:

<script>
            /*
             *javascript动态修改css效果的方法(四种) 
             * 第一种:div1.style.width=&quot;100px&quot;;
             * 第二种:div2.style.cssText="width:100px;height:100px;background: palevioletred;";
             * 第三种:div1.setAttribute(&quot;class&quot;,&quot;div2&quot;)和div3.className="div3";//效果一样
             * 第四种:使用更改外联的css文件,从而改变元素的css
             * obj.setAttribute("href","css/css2.css");
             * */
            function changeCss1(){
                var div1=document.getElementById("divBtn1");
                div1.style.width=&quot;100px&quot;;
                div1.style.height="100px";
                div1.style.background="red";
            }
            function changeCss2(){
                var div2=document.getElementById("divBtn2");
                div2.style.cssText="width:100px;height:100px;background: palevioletred;";                //cssText会覆盖之前的设置  无兼容性问题  写法和css样式表相同
            }
            function changeCss3(){
                var div3=document.getElementById("divBtn3");                //div3.className="div3";//效果一样
                div3.setAttribute("class","div3");
            }
            function changeCss4(){
                var obj=document.getElementById("cssLink");
                obj.setAttribute("href","css/css2.css");
            }
        </script>

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to change css style using js. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn