「后篇」JavaScript如何获取一个元素的样式信息

开发 前端
上一篇讲了两种获取样式的方式。这两种方法都没法获取用户代理或者样式表设置的样式值。今天我来讲一种跨浏览器的方式来获取所有的与DOM相关的样式值。

上一篇讲了两种获取样式的方式。

1. 通过直接访问style对象

2. 通过方法getAttribute

这两种方法都没法获取用户代理或者样式表设置的样式值。今天我来讲一种跨浏览器的方式来获取所有的与DOM相关的样式值。

一. 跨浏览器方法

 

currentStyle对象是一个特定于IE的对象。它包含了一个元素的所有支持的和可用的CSS属性的一个集合。它期待骆驼表示 格式的一个值 。

比如:fontFamily而不是font-family

所以,这里,如果是支持这个对象的浏览器调用的话,就使用CSSPROP。

从代码中,可以看出,其它浏览器,使用的是window.getComputedStyle方法。该方法也可以通过document.defalutView.getComputedStyle来访问。这个方法接受两个参数,元素和一个伪元素,后者通常为空(或者一个空字符串"")。

二. 获取属性的优先级

竟然是能获取所有与DOM相关的样式属性,那必然有一个优先级的问题。

  1. <style> 
  2.  #elem{font-size:23px;} 
  3. </style> 
  4. <input id ="elem" style="font-size:18px;"/> 
  5. elem.style.fontSize = '12px'
  6. console.log(getStyle(elem, "fontSize""font-size")) 
  7. // 输出12px 

当在几处同时设置一个属性时,getStyle方法获取永远是那个起使用的,这一点要高度关注。

getStyle取值的优先级是:

1. 动态设置的

2. 内联设置的

3. 样式表设置的

4. 浏览器默认设置的 

责任编辑:庞桂玉 来源: 今日头条
相关推荐

2018-11-08 16:18:07

JavaScript前端

2009-06-09 21:50:55

Javascript函数getStyle

2015-03-10 11:21:44

JavaScript组JavaScript

2020-09-02 07:22:17

JavaScript插件框架

2011-05-25 14:34:26

javascript

2024-04-11 08:30:05

JavaScript数组函数

2015-06-25 09:32:55

JavaScript程序员

2015-06-25 09:53:13

JavaScript程序员

2015-06-25 19:23:03

JavaScript程序员

2024-03-18 09:50:18

Selenium元素Python

2017-03-15 08:43:29

JavaScript模板引擎

2017-03-20 17:59:19

JavaScript模板引擎

2010-09-13 16:46:29

JavaScriptHTML DOM节点

2018-09-18 10:11:21

前端vue.jsjavascript

2014-02-14 09:37:01

JavascriptDOM

2017-05-02 11:30:44

JavaScript数组惰性求值库

2021-08-26 07:43:44

vectorerase错误

2022-03-07 09:14:04

Selenium鼠标元素

2023-03-01 10:19:23

2015-05-25 15:06:28

JavaScript函数式编程
点赞
收藏

51CTO技术栈公众号