前端开发之html属性style对象获取和设置行内样式

最新推荐文章于 2024-07-25 07:53:24 发布

孤寒_imbzz

最新推荐文章于 2024-07-25 07:53:24 发布

阅读量3.9k

点赞数 4

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

本文链接：https://blog.csdn.net/imbzz/article/details/125980593

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.html属性style属性设置

style是一个对象，只能获取行内样式(写在一行中)，不能获取内嵌的样式(写在head的style中)和外链的样式(写在css文件中)

相当于在html中设置css: 只适用于简短的属性设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border: 6px solid red;
        }
    </style>
</head>
<body>

    <div class="box1" style="width: 200px;height: 100px;background-color: pink;"></div>

    <script>
        var box1 = document.getElementsByTagName("div")[0];

        console.log(box1.style.backgroundColor);
        console.log(box1.style.border);  //没有打印结果，因为这个属性不是行内样式
        console.log(typeof box1.style);  //因为是对象，所以打印结果是Object
        console.log(box1.style);         //打印结果是对象
    </script>
</body>
</html>

通过 js 读取元素的样式

语法：（方式一）

    元素.style.样式名

备注：我们通过style属性读取的样式都是行内样式。

语法：（方式二）

    元素.style["属性"];  //格式

    box.style["width"];  //举例

方式二最大的优点是：可以给属性传递参数。

# 通过 js 设置元素的样式

语法：

    元素.style.样式名 = 样式值;

举例：

    box1.style.width = "300px";
    box1.style.backgroundColor = "red"; // 驼峰命名法

备注：我们通过style属性设置的样式都是行内样式，而行内样式有较高的优先级。但是如果在样式中的其他地方写了!important，则此时!important会有更高的优先级。

style属性需要注意以下几点：

（1）样式少的时候使用。

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

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

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

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

（6）box.style.cssText = “字符串形式的样式”。

cssText这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例：

    <script>
        var box1 = document.getElementsByTagName("div")[0];

        //通过cssText一次性设置行内样式
        box1.style.cssText = "width: 300px;height: 300px;background-color: green;";

        console.log(box1.style.cssText);   //这一行更加可以理解,style是对象

    </script>

打印结果：