JS DOM之操作CSS属性

世界尽头与你

已于 2024-01-29 15:18:17 修改

阅读量2.4k

点赞数 4

分类专栏：前端文章标签： css javascript html

于 2022-10-06 19:19:21 首次发布

本文链接：https://blog.csdn.net/Gherbirthday0916/article/details/127184798

版权

前端专栏收录该内容

26 篇文章 10 订阅

订阅专栏

JS DOM之操作CSS属性

1.获取CSS属性值
2.设置CSS属性值
- style对象
- cssText属性

1.获取CSS属性值

在JavaScript中，我们可以使用getComputedStyle()方法来获取一个CSS属性的取值

语法：

getComputedStyle(obj).attr

bj表示DOM对象，也就是通过getElementById()、getElementsByTagName()等方法获取的元素节点

attr表示CSS属性名。需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。如font-size应该写成fontSize,border-bottom-width应该写成borderBottomWidth

案例：点击获取背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
    <script>
        window.onload = function () {
            const oBtn = document.getElementById("btn");
            const oBox = document.getElementById("box");
            oBtn.onclick = function () {
                alert(getComputedStyle(oBox).backgroundColor);
            };
        }
    </script>
</head>
<body>
<input id="btn" type="button" value="获取颜色"/>
<div id="box"></div>
</body>
</html>

点击获取颜色后弹出当前div的背景颜色信息，成功获取了CSS的属性信息：

在这里插入图片描述

2.设置CSS属性值

在JavaScript中，想要设置一个CSS属性的值，有两种方式可以实现。style对象；cssText属性。

style对象

使用style对象来设置一个CSS属性的值，其实就是在元素的style属性中添加样式，这种方式设置的是“行内样式”

语法：

obj.style.attr="值";

obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型

例如，我们想实现一个div点击变色的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
    <script>
        window.onload = function () {
            const oBtn = document.getElementById("btn");
            const oBox = document.getElementById("box");
            oBtn.onclick = function () {
                oBox.style.backgroundColor = "lightskyblue";
            };
        }
    </script>
</head>
<body>
<input id="btn" type="button" value="设置"/>
<div id="box"></div>
</body>
</html>

如果想要为上面的div元素同时添加多个样式，CSS实现代码如下：

width:50px;height:50px;background-color:lightskyblue;

如果用style来实现，就得一个个写：

oDiv.style.width="50px";
oDiv.style.depth="50px";
oDiv.style.backgroundColor="lightskyblue";

一个个写十分烦琐。那么，有没有一种相对高效的实现方式呢？当然有，那就是cssText属性

cssText属性

在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性

注意，cssText属性的属性名不再使用骆驼峰型的写法，而是使用平常的CSS写法

语法：obj表示DOM对象，cssText的值是一个字符串

obj.style.cssText="值";

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
    <script>
        window.onload = function () {
            const oBtn = document.getElementById("btn");
            const oBox = document.getElementById("box");
            oBtn.onclick = function () {
                //获取文本框的值（也就是输入的内容）
                oBox.style.cssText = document.getElementById("txt").value;
            };
        }
    </script>
</head>
<body>
<label for="txt"></label><input id="txt" type="text"/>
<input id="btn" type="button" value="设置"/>
<div id="box"></div>
</body>
</html>

设置CSS的样式：

在这里插入图片描述

在实际开发的时候，如果要为一个元素同时设置多个CSS属性，我们很少使用cssText来实现，而更倾向于使用操作HTML属性的方式给元素加上一个class属性值，从而整体地给元素添加上样式，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        .oldBox {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }

        .newBox {
            width: 50px;
            height: 50px;
            background-color: lightskyblue;
        }
    </style>
    <script>
        window.onload = function () {
            const oBtn = document.getElementById("btn");
            const oBox = document.getElementById("box");
            oBtn.onclick = function () {
                oBox.className = "newBox";
            };
        }
    </script>
</head>
<body>
<input id="btn" type="button" value="切换"/>
<div id="box" class="oldBox"></div>
</body>
</html>