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

How to change css style using js

青灯夜游
Release: 2023-01-06 11:14:42
Original
26383 people have browsed it

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";
Copy after login

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

Example:

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

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

For example:

div1.setAttribute("class","div2")
Copy after login

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");
Copy after login

html code:

<link href="css/css1.css" rel="stylesheet" id="cssLink" />
<div id="divBtn1" onclick="changeCss1()">1</div>
<div id="divBtn2" onclick="changeCss2()">2</div>
<div id="divBtn3" onclick="changeCss3()">3</div>
<div id="divBtn4" onclick="changeCss4()">4</div>
Copy after login

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}
Copy after login

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}
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template