获取CSS样式表内样式的JavaScript函数

在网页开发中，有时我们需要通过JavaScript来获取元素的当前样式，不同的浏览器提供了不同的方法来实现这一功能，以下是在不同浏览器中使用的方法：

IE浏览器（使用currentStyle）

IE浏览器提供了一个名为currentStyle的属性，可以用来获取元素的当前样式，以下是一个示例函数，用于获取指定元素的样式：

function getCurrentStyle(element, property) {
    if (window.getComputedStyle) {
        // 非IE浏览器
        return window.getComputedStyle(element, null).getPropertyValue(property);
    } else if (element.currentStyle) {
        // IE浏览器
        return element.currentStyle[property];
    }
    return null;
}

使用方法：

var element = document.getElementById("myElement");
var backgroundColor = getCurrentStyle(element, "background-color");
console.log("背景颜色：", backgroundColor);

Firefox和其他现代浏览器（使用defaultView）

Firefox和其他现代浏览器支持window.getComputedStyle()方法，可以用来获取元素的当前样式，以下是一个示例函数，用于获取指定元素的样式：

function getCurrentStyle(element, property) {
    if (window.getComputedStyle) {
        // 非IE浏览器
        return window.getComputedStyle(element, null).getPropertyValue(property);
    } else if (element.currentStyle) {
        // IE浏览器
        return element.currentStyle[property];
    }
    return null;
}

使用方法：

var element = document.getElementById("myElement");
var backgroundColor = getCurrentStyle(element, "background-color");
console.log("背景颜色：", backgroundColor);

相关问题与解答

问题1：如何在不支持window.getComputedStyle的浏览器中获取元素的样式？

答：在不支持window.getComputedStyle的浏览器中，可以使用element.style属性来获取元素的内联样式，但请注意，这种方法只能获取元素的内联样式，而不能获取外部样式表或浏览器默认样式表中定义的样式，如果需要获取完整的样式信息，建议使用jQuery库中的$.css()方法，它可以兼容各种浏览器并返回完整的样式信息。

问题2：如何判断浏览器是否支持window.getComputedStyle？

答：可以通过检查window.getComputedStyle是否存在来判断浏览器是否支持该方法，如果存在，则说明浏览器支持window.getComputedStyle；否则，可能需要使用其他方法来获取元素的样式，在IE浏览器中，可以使用element.currentStyle属性来获取元素的样式。

小伙伴们，上文介绍了“获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)-”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。