07-操作元素样式

<div class="box"></div>

• 1. 设置元素样式

  • 第一种方式--绑定类名 (className)

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
  
    <script>
        let oDiv = document.querySelector("div");
        oDiv.className = "box";
    </script>
  

  • 第二种方式--不用绑定类名, 直接通过JS来修改 (style.样式)

    • 注意点: 过去 CSS 中通过 - 连接的样式, 在 JS 中都是驼峰命名
    • 注意点: 通过 JS 添加的样式都是行内样式, 会覆盖掉同名的 CSS 样式

    let oDiv = document.querySelector("div");
    oDiv.style.width = "300px";
    oDiv.style.height = "300px";
    oDiv.style.backgroundColor = "blue";
  

• 2. 获取元素样式

  • 第一种方式--(style)

    • 注意点: 通过 style 属性只能获取到 行内样式 的属性值, 获取不到 CSS 设置的属性值

    let oDiv = document.querySelector("div");
    oDiv.style.width = "300px";
    // 注意点: 通过style属性只能获取到行内样式的属性值, 获取不到CSS设置的属性值
    console.log(oDiv.style.width);
  

  • 第二种方式 -- (getComputedStyle)

    • 注意点: 如果想获取到 CSS 设置的属性值, 必须通过 getComputedStyle 方法来获取
    • getComputedStyle 方法接收一个参数, 这个参数就是要获取的元素对象
    • getComputedStyle 方法返回一个对象, 这个对象中就保存了 CSS 设置的样式和属性值

    let oDiv = document.querySelector("div");
    let style = window.getComputedStyle(oDiv);
    console.log(style.width);  // 200px