1、样式的种类

行内式：直接写在DOM元素的style属性中。
嵌入式：写在html页面中的<style></style>中的样式。
外链式：由link标签引入的css文件中的样式。
优先级：行内 > 嵌入 > 外链

2、元素.style.属性名

行内式才有效，对嵌入式和外链式无效。在真实项目中，由于无法实现html和css分离，所以这种方式不常用。

通过”元素.style.属性名“的方式并没有获取到left和top的值，需要将left和top写成行内式才行。

再来看一个测试例子：

可以看到height值和backgroundColor值没有被获取到，所以我们得到以下结论：
style只能获取行内样式的值，无法获取嵌入式样式和外部样式的值。

2、window.getComputedStyle()

使用window.getComputedStyle()这个方法获取所有经过浏览器计算过的样式，只要当前的元素标签可以在页面中呈现出来，那么它的所有样式都是经过浏览器计算过的/渲染过的），哪怕有些样式没有写，我们也可以获取到。

window.getComputedStyle(当前要操作的元素对象,当前元素的伪类[一般情况下没有伪元素时写null])

3、currentStyle

在IE6~8下不兼容，因为window下没有getComputedStyle这个属性。
在IE6~8下可以使用currentStyle来获取所有经过浏览器计算过的样式

4、兼容写法

5、获取元素样式值的方法

86 js获取元素样式值相关推荐

js获取元素样式-行内样式、内部样式、外部样式
js获取元素样式一.行内样式具体实现二.获取所有样式具体实现一.行内样式具体实现在js获取到dom元素之后,使用其style属性即可获取到其所有的行内样式 <div id=&quo ...
js获取classname值_利用js获取元素class值的两种方法
我们有时为了达到某种效果,需要以元素的class值为条件做判断. 我们如何利用JavaScript获取元素class的值?我们先看下面代码: x=document.getElementsByTagNa ...
JavaScript或js获取元素的值
一般可以用原生js及jQuery获取html元素的值. <div id="test">数值</div> 原生js写法: 1 alert(document.g ...
javascript获取元素样式值
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
原生JS获取元素属性值
方法一第一步我们要获取到元素(比如用ID),不可以是类数组(比如用class),类数组除了有一些数组的基本特征不可以使用其他方法,你会报错的第二步目标元素必须设置position为absolu ...
Vue.js 获取元素高度的方法【记录】
Vue.js获取下面div的height: <div ref="element"></div> 1.获取高度值:(内容高+padding+边框) let h ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
JS助记 ----- 盒子模型与获取元素样式
盒子模型简单介绍 content-box 默认的盒子模型,width 和 height 设置的是 content 的大小,有border和padding的情况下再额外增加盒子的宽高,整个盒子的可视区大 ...
JavaScript获取元素样式
元素:style:样式名=样式值读取方式:元素.style.样式名 1.通过style属性设置喝读取的都是内联样式案例:(在此和之前一样,创建HTML就省略不写了,一如既往的给出示例) 2.HT ...

86 js获取元素样式值

文章目录