[JavaScript知识库] javascript中style与getComputedStyle()与currentStyle()的异同。

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> javascript中style与getComputedStyle()与currentStyle()的异同。 -> 正文阅读

[JavaScript知识库]javascript中style与getComputedStyle()与currentStyle()的异同。

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

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

外部样式就是我们通过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判断要简单一些
}

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-10-24 14:50:47 更:2021-10-24 14:52:20

360图书馆购物三丰科技阅读网日历万年历 2024年5日历

-2024/5/13 15:05:36-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码