关于JavaScript如何获取一个元素的所有样式值,并设置一个元素的样式值。所有相关的知识点,看这两篇文章就够了。请记住,这非常简单。来来来...想要获取一个元素的一个或多个CSS样式设置,这应该是每个搞前端的人都遇到过的事情。如果平时用JavaScript实现一些动画效果什么的。你肯定会知道一个问题:元素内联样式和动态设置的样式很容易获取,但是默认样式表和用户代理默认设置设置的样式比较难获取。其实说代码难不难,说起来容易,确实有些地方需要特别清楚。今天就在这里给大家简单的聊一聊,把需要注意的地方都拉出来。下面的解释就是用这个例子:上面的例子很简单,看过这篇文章的人都能看懂。ID值为elem的DOM元素具有内联样式和样式表设置的默认样式。让我们从关注获取内联和动态设置样式开始。获取内联和动态设置样式有两种方式:1、直接访问元素的style属性;有些结论可能没有经过很多人的验证,所以比较模糊。比如上面提到的两个方法是否可以获取到样式表设置的字体大小/背景色等样式varelem=document.getElementById('elem')console.log(elem.style.fontSize)//无输出console.log(elem.getAttribute('style'))//输出:height:30px;width:150px;two.方式一需要注意直接访问样式对象的方式必须使用特殊的语法。不带连字符的属性值,比如width,可以直接访问。带连字符的elem.style.width属性值需要使用驼峰表示法。例如background-colorelem.style.backgroundColor3.方法2注意事项使用该方法访问样式对象,但必须从字符串中解析。使用setAttribute设置样式时,之前的动态样式和内联样式会被重置。这也很好理解。因为它设定了风格。当然,在使用getAttribute访问style属性时,IE7也会返回一个对象,而不是带有CSS值的字符串。下面简单总结一下上面提到的动态样式和内联样式的两种获取方式以及需要注意的几点。在下一篇文章中,我将介绍如何使用跨浏览器的方法同时获取内联样式、动态设置样式、用户代理和样式表设置的样式。这也是一种常用的方法。还有他们各自收购的优先级。【责任编辑:庞桂玉电话:(010)68476606】
