javascript中style与getComputedStyle()与currentStyle()的异同。

最新推荐文章于 2023-07-12 10:46:23 发布

HEGEHUB

最新推荐文章于 2023-07-12 10:46:23 发布

阅读量261

点赞数

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

本文链接：https://blog.csdn.net/cloudyless/article/details/120923460

版权

前端Javascript 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

首先讨论这个问题我们先来看看样式的三种形式：内联样式，内部样式，外部样式

三种样式的优先级：内联样式>内部样式>外部样式

外部样式就是我们通过link标签将外部样式表引入的样式，而，而我们的

内联样式：就是直接在我们的html标签中通过style属性，里面以键值对的形式书写的样式。

    <div class="box1" style="color: red;">
        你好
    </div>

内部样式：就是我们在head标签里面新建一个style标签，然后在style标签里面书写的样式就是内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box1">
        你好
    </div>
</body>
</html>

外联样式：就是我们通过link标签将外部样式表引入的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./code-css/css的简介以及三种样式/样式.css">
</head>
<body>
    <div class="box1">
        你好
    </div>
</body>
</html>

1.style属性

用法：对象.style.属性

示例：box1.style.width,box1.style.color,

这里注意如果是属性里面有-的，那么我们将-去掉，然后=后面的字母大写就好了

示例：box1.style.backgroundColor，box1.style.lineHeight

我们通过obj.style.属性这样的方式是只能获取到其内联样式的，也就是说获取不到内部样式里面书写和外部样式表里面书写的样式的。没有内联样式我们就读不了，而且我们通过这种方式设置的时候也是设置到我们的内联样式上去的，所以我们一般通过这种方式设置的样式可以直接生效，除非你自己在样式的后面设置了！important，如果在某一个样式的后面设置了这个！important，那么其具有最高优先级，比我们的内联样式的优先级还要高。

2.currentStyle属性

用法：跟style类似，对象.currentStyle.属性

区别：与style的区别就在与，我们的style读取的是内联样式的属性值，而我们的currentStyle是读取的当前元素正在显示的属性值，不一定是内联样式，正在显示的是什么样式，读取的就是什么样式。但是有一点就是，如果当前元素的某个属性没有设置某个属性值，那么其获取其默认值，是auto就读auto，不会具体到某一个数字。

缺点：只有IE支持，其他的浏览器都不支持。

3.getComputedStyle()方法

用法：与前面两个都不一样，注意到我们这里是一个方法，而且是window的方法，我们可以直接使用。

区别：与style的区别就在与，我们的style读取的是内联样式的属性值，而我们的currentStyle是读取的当前元素正在显示的属性值，不一定是内联样式，正在显示的是什么样式，读取的就是什么样式。与currentStyle的区别就是，如果当前元素的某个属性没有设置某个属性值，那么其获取的是其真实值，而不是默认值，就算是auto的话也会具体到某一个数字。

缺点：IE8及以下浏览器不支持，IE8以上浏览器和其他浏览器都支持。

总上所述：我们可以自己造一个函数getStyle（），获取样式支持所有的浏览器。

function getStyle(obj,name){
//第一个参数为obj为要获取属性的对象
//第二个参数为name为要获取的属性名字
return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]
//这种方式的代码比if判断要简单一些
}

HEGEHUB

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript中style与getComputedStyle()与currentStyle()的异同。

首先讨论这个问题我们先来看看样式的三种形式：内联样式，内部样式，外部样式三种样式的优先级：内联样式>内部样式>外部样式外部样式就是我们通过link标签将外部样式表引入的样式，而，而我们的内联样式：就是直接在我们的html标签中通过style属性，里面以键值对的形式书写的样式。 <div class="box1" style="color: red;"> 你好 </div>内部样式：就是我们在head标签里面新建一个sty
复制链接

扫一扫