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

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

会泽ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

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

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

下面的讲解用这个例子：

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

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

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

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

2. 使用getAttribute方法

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

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

 
 
 
 

  
  
  
  
var elem = 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如何获取一个元素的样式信息
网页路径：http://www.csdahua.cn/qtweb/news29/61879.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网