Comment modifier les propriétés CSS dans js-js tutoriel-php.cn

Comment modifier les propriétés CSS dans js

青灯夜游

Libérer： 2023-01-05 16:09:27

original

9636 Les gens l'ont consulté

js修改css属性的方法：1、修改style样式，语法“样式表的指定内容.style.属性="值"”；2、修改特定元素节点的style内容，语法“元素对象.style.cssText="样式值"”；3、使用setAttribute()函数。

Comment modifier les propriétés CSS dans js

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

原生JS修改CSS属性有以下三种方法

修改style样式
通过document.styleSheets[n] // n表示期望修改的样式表序号，从0开始计数来获取到期望修改的样式表，通过cssRules[0]获取到该样式表的css内容，通过style修改特定样式。（此方法比较麻烦，需要清楚指定样式在样式表的顺序）
修改特定元素节点的style内容
cssText可以一次性修改多个css属性
style.attrName 修改单个属性 attrName的值
通过setAttribute 修改style属性值

HTML代码

<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>

Copier après la connexion

CSS代码

.test {
   font-size: 30px;
   color: blue;
   background-color: blueviolet
}

Copier après la connexion

JS代码

    var testNode = document.getElementsByClassName("test")[0];
    var cssTextBtn = document.getElementsByClassName("cssText")[0];
    var attributeBtn = document.getElementsByClassName("setAttribute")[0];
    var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
    
    // 1. 修改style样式: 
    stylesheetBtn.addEventListener(&#39;click&#39;, function(e) {
        var stylesheet = document.styleSheets[0];
        stylesheet.cssRules[0].style.backgroundColor = "green";
    }, false);
    
    // 2. 修改特定元素节点的style内容
    cssTextBtn.addEventListener(&#39;click&#39;, function(e) {
        testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
        testNode.style.border = "1px solid black"
    }, true);
    
    // 3. 通过setAttribute 修改style属性值
    attributeBtn.addEventListener(&#39;click&#39;, function(e) {
        testNode.setAttribute(&#39;style&#39;, &#39;width: 400px; background-color: yellow; height: 300px;&#39;)
    }, false)

Copier après la connexion

【推荐学习：javascript高级教程】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!