JS非行间样式获取函数的实例代码

本文介绍了JavaScript中如何获取HTML元素的非行间样式，即那些通过CSS规则定义的样式，而不是元素的内联style属性定义的样式。在JavaScript中，通过元素的style属性获取的是元素内联样式，无法直接获取到通过CSS规则定义的样式。为了解决这一问题，我们可以使用IE浏览器中的currentStyle属性和非IE浏览器中的getComputedStyle()方法来获取非行间样式。 解释了行间样式和非行间样式的区别。行间样式是直接在HTML元素的style属性中定义的样式，比如`<div style="width:200px;"></div>`；而非行间样式是通过CSS规则定义的样式，例如在`<style>`标签中或者外部样式表中定义的样式，如`div { width: 200px; }`。 接着，通过一个实例来说明问题所在：当尝试通过点击事件改变一个方块的宽度时，使用了内联样式修改，却没有任何显示效果。经过测试，发现问题在于style只能获取到行间样式，而无法获取到通过CSS定义的样式。 为了解决这个问题，文章提供了两种方法。一种是针对IE浏览器使用的currentStyle属性，它可以直接获取元素的所有当前应用的样式。另一种是使用getComputedStyle()方法，该方法是W3C标准中规定的方法，适用于非IE浏览器，能够返回所有最终计算后应用到元素上的样式。 文章提供了一个封装好的函数getComputedStyle(obj, attr)，该函数可以根据传入的元素和属性，返回相应的计算后样式。如果对象有currentStyle属性（即IE浏览器），则直接从currentStyle中读取；否则，使用getComputedStyle()方法获取样式值。此外，还指出了宽度的获取可以使用两种语法，一种是标准的`.width`属性，另一种是通过数组方式`['width']`。 本文详细讲解了JavaScript中获取非行间样式的两种方法以及如何封装成一个通用的函数，以便在不同浏览器中使用。这对于前端开发者来说非常有用，特别是在需要动态读取或改变页面上元素的样式时。需要注意的是，由于当前支持getComputedStyle()方法的浏览器可能不支持Array访问方式，所以需要根据浏览器情况适当选择访问方式。通过本文提供的方法和示例代码，开发者可以更加灵活地处理页面元素的样式问题，并能在多种浏览器环境下兼容运行。