DOM操作-04-style属性的获取和修改

本文链接：https://blog.csdn.net/qq_41874591/article/details/116054523

文章目录

语法：
第二种语法：
style.cssText
小例子：
获取当前显示的属性值（不管什么样式的css）

语法：

获取：元素节点.style.属性名 eg:elementById.style.margin
修改：元素节点.style.属性名=“属性值” eg：elementById.style.backgroundColor=“green”;
注意：获取不了内嵌式属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .content{
            margin: 10px 10px;
        }
    </style>
</head>
<body>

<div id="div1" class="content" style="color: red;width: 500px;height: 300px;background-color: red">

</div>
<script type="text/javascript">
    let elementById = document.getElementById("div1");
    //正常输出属性值：red
    console.log(elementById.style.color);
    
    //input:<empty string> 因为style无法获取内嵌式中的实行
    console.log(elementById.style.margin);
    
    //针对行内式修改
    elementById.style.backgroundColor="green";
    //不是修改，而是添加；
    elementById.style.margin="100px 100px";
</script>

在这里插入图片描述

第二种语法：

感觉输入还比较方便：

# 注意事项： ## 优先级问题行内式优先级大于嵌入式，若嵌入式类上加有!important，则嵌入式优先级更高 ## style属性注意（1）样式少的时候使用。

（2）style是对象。我们在上方已经打印出来，typeof的结果是Object。

（3）值是字符串，没有设置值是“”。

（4）命名规则，驼峰命名。

（5）只能获取行内样式，和内嵌和外链无关。

style.cssText

批量修改行内样式的属性，但是会完全替代原有的属性和值。其实就是行内样式里面的值当做字符串来对待，修改了，就完全替代了。

<body>
<div id="div1" class="content" style="color: red;width: 500px;height: 300px;background-color: red"></div>
<script type="text/javascript">
    let elementById = document.getElementById("div1");
    console.log(typeof elementById.style.cssText);//output:string
    console.log(elementById.style.cssText);//output:color: red; width: 500px; height: 300px; background-color: red;
    elementById.style.cssText="color:black";
    console.log(elementById.style.cssText);//output:color: black; width: 900px; height: 600px; background-color: green;
</script>
</body>

小例子：

1.鼠标进入区域大小和透明度发生改变

<div id="div1" class="content" style="width: 500px;height: 300px;background-color: red;opacity:1"></div>
<script type="text/javascript">
    let elementById = document.getElementById("div1");
    elementById.onmouseover=function () {
        elementById.style.width="800px";
        elementById.style["height"]="800px";
        elementById.style["backgroundColor"]="blue";
        elementById.style["opacity"]="0.3";
    }
    elementById.onmouseout=function (){
        elementById.style.cssText="width: 500px;height: 300px;background-color: red;opacity:1";
    }
</script>
</body>

2.文本框高亮显示

<body>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<script type="text/javascript">
    let elementsByTagName = document.getElementsByTagName("input");
    
    for (let i = 0; i < elementsByTagName.length; i++) {
        elementsByTagName[i].onfocus=function () {
            elementsByTagName[i].style.border = "2px solid red";
            elementsByTagName[i].style.backgroundColor = "#ccc";
        }    
        elementsByTagName[i].onblur=function () {
            elementsByTagName[i].style.border = "";
            elementsByTagName[i].style.backgroundColor = "";
        }
    }
</script>
</body>

在这里插入图片描述

3.隔行变色，鼠标进入高亮，鼠标离开恢复

<body>
<table>
    <tr>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
    </tr>
    <tr>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
    </tr>
    <tr>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
    </tr>
    <tr>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
    </tr>
    <tr>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
        <td>丁香花</td>
    </tr>
</table>

<script type="text/javascript">

    let elementsByTagName = document.getElementsByTagName("tr");
    
    for (let i = 0; i < elementsByTagName.length; i++) {
      if(i%2==0){
          elementsByTagName[i].style["backgroundColor"]="blue";
      }else {
          elementsByTagName[i].style["backgroundColor"]="red";
      }

      let temp="";
      elementsByTagName[i].onmouseover=function () {
          temp=elementsByTagName[i].style["backgroundColor"];
          elementsByTagName[i].style["backgroundColor"]="white";
      }
      elementsByTagName[i].onmouseout=function () {
          elementsByTagName[i].style["backgroundColor"]=temp;
      }
    }
</script>
</body>

在这里插入图片描述

获取当前显示的属性值（不管什么样式的css）

getComputedStyle（）

    <style type="text/css">
        .content {
            width: 500px;
            height: 600px;
            background-color: #03a9f4;
            opacity: 0.2;
        }
    </style>
</head>
<body>
<div  id="content" class="content"></div>
<script>
    var content = document.getElementById("content");
    
    console.log(window.getComputedStyle(content, null).width);//output:500px

    console.log(getStyle(content, "width"));
    console.log(getStyle(content, "height"));
    console.log(getStyle(content, "opacity"));
    console.log(getStyle(content, "background-color"));

    /*
     * 兼容方法，获取元素当前正在显示的样式。
     * 参数：
     *      obj     要获取样式的元素
     *.     name    要获取的样式名
    */
    function getStyle(ele, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele, null)[attr];
        }
        return ele.currentStyle[attr];
    }

</script>