未加星标

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

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

关于javascript如何获取一个元素的所有样式值,及设置一个元素的样式值,所有相关知识点,看这两篇够了。记住了,都很简单的。来来来...

想要获取一个元素的一个或者多个CSS样式设置,这应该是搞前端的都碰到过的一件事。如果你平时用JavaScript实现过一些动画效果什么的。肯定就会知道一个问题:元素内联样式和动态设置的样式容易获取,但默认样式表设置的及用户代理默认设置的样式获取比较费劲。

其实现代码说难不难,说容易吧,这其中还真有一些需要特别清楚的地方,今天,我这里给大家简单聊聊,将需要注意的地方全部捋出来。

下面的讲解用这个例子:


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

上面这个例子很简单,看这篇文章的人没有看不懂的,一个ID值为elem的DOM元素具有内联样式和样式表设置的默认样式。下面开始讲重点

获取内联和动态设置的样式

获取内联和动态设置的样式方式有两种

1. 直接访问元素的style属性

2. 使用getAttribute方法

一. 证明二者都无法获得样式表设置的样式

有些结论可能好多人没有证实过,模模糊糊。比如,上面提到的这两种方式是否可以获取样式表设置的样式,如font-size/background-color等。

varelem=document.getElementById('elem') console.log(elem.style.fontSize) //无输出 console.log(elem.getAttribute('style')) //输出:height:30px;width:150px; 二. 方式一需要注意的地方

直接访问style对象的方式必须使用一种特殊的语法。

不带连字符的属性值,如width,可以直接访问。

elem.style.width

带连字符的属性值,需要使用骆驼表示法。如background-color

elem.style.backgroundColor 三. 方式二需要注意的地方

使用方法来访问style对象,然而你必须从字符串中解析出来。

使用setAttribute设置样式时,之前动态样式和内联样式都会被重置。这一点也很好理解。因为它设置的是style。

当然,使用getAttribute来访问style属性的时候,IE7也会返回一个对象,而不是带有CSS值的一个字符串。

来简单总结一下

上面说了两种获取动态样式和内联样式的方式及一些需要注意的地方。下一篇我来讲一下如何使用一种跨浏览器方式同时获取内联样式,动态设置样式,用户代理以及样式表设置的样式。也是常用的一种方式。还有各自获取的优先级。

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

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

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


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