JavaScript获取非行间样式：currentStyle与getComputedStyle技巧

在JavaScript编程中，获取网页元素的非行间样式是一个常见的需求。行间样式指的是直接在HTML元素上定义的style属性中的样式，而非行间样式则来自外部CSS文件或嵌入在HTML文档内的`<style>`标签中。当我们需要动态获取这些不在元素style属性内的样式时，通常有两种方法： 1. **行间样式获取（仅适用于IE9及更低版本）**： - 使用`element.style.property`的方式，如在示例代码中，`var odiv = document.getElementById('div1');` 和 `alert(odiv.style.width);`。然而，这种方式只适用于Internet Explorer浏览器，并且只能获取行间样式，对于`#div1`，由于其没有行间宽度设置，所以会返回`undefined`。 2. **跨浏览器兼容性获取（适用于所有现代浏览器）**： - 对于非IE浏览器（包括Firefox），使用`window.getComputedStyle()`方法更为推荐。这个方法返回一个`CSSStyleDeclaration`对象，包含了指定元素的样式信息。示例代码中的兼容性处理如下： ``` alert(getComputedStyle(odiv, false).width); ``` - 第二个参数`false`用于表示`document.defaultView`（通常是`window`），避免IE的特定行为。在现代浏览器中，可以省略这个参数。 3. **条件判断兼容性写法**： - 为了确保代码能在不同浏览器环境下正常工作，通常会使用条件判断来检查当前浏览器是否支持`currentStyle`属性。如果支持，如IE系列，就使用`element.currentStyle.property`；如果不支持（如FF），则使用`window.getComputedStyle()`。示例代码中的兼容性检测部分如下： ``` if (odiv.currentStyle) { alert(odiv.currentStyle.width); } else { // FF或其他不支持currentStyle的浏览器 alert(getComputedStyle(odiv, false).width); } ``` 总结：获取非行间样式的关键在于使用`getComputedStyle()`函数，这是一个强大的工具，可以提供跨浏览器的样式获取。同时，为了保持代码的健壮性，我们需要进行浏览器兼容性检查，以便在不同环境中正确地处理样式获取。这对于前端开发者来说，是理解和掌握复杂Web应用的基础技能之一。