jquery - 使用Javascript如何获取dom节点的伪CSS样式？

Question

嗨，我有一个元素(dom 节点)，它有一个伪 CSS 悬停 CSS 样式。我想使用 Javascript 来获取此 CSS 样式，在 Chrome 网络浏览器中。

Answer 1

您可以使用window.getCompulatedStyle(element)获取元素的计算样式(当前应用的样式)

对于您的情况，您可以在元素悬停时调用上述代码，并稍后使用保存的样式对象来实现您的目的。

引用:https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

演示:http://jsfiddle.net/ur297/

代码:

var hoverStyles = false;
$('.foo').hover(function() {
    hoverStyles = window.getComputedStyle(this);
    printStyles(hoverStyles );
}, function() {});

function printStyles(_styles) {
    console.log('Color: ' + _styles.color);
    console.log('Background Color: ' + _styles.backgroundColor);
}