未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

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

1. 通过直接访问style对象

2. 通过方法getAttribute

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

一. 跨浏览器方法
「后篇」JavaScript如何获取一个元素的样式信息

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

比如:fontFamily而不是font-family

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

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

二. 获取属性的优先级

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

<style> #elem{font-size:23px;} </style> <inputid="elem"style="font-size:18px;"/> elem.style.fontSize='12px'; console.log(getStyle(elem,"fontSize","font-size")) //输出12px

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

getStyle取值的优先级是:

1. 动态设置的

2. 内联设置的

3. 样式表设置的

4. 浏览器默认设置的

【责任编辑:庞桂玉 TEL:(010)68476606】

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:「后篇」JavaScript如何获取一个元素的样式信息
本站链接:https://www.codesec.net/view/611544.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(65)