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

Question

嗨，我有一个元素（dom 节点），它有一个伪 CSS 悬停 CSS 样式。我想使用 Javascript 来获得这种 CSS 样式，我在 Chrome 网络浏览器中。

Answer 1

您可以使用获取元素的计算样式（当前应用的样式）window.getComputedStyle(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);
}

Answer 2

  function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

并获得像 font-size 这样的 css

getStyle(document.getElementById("container"), "font-size");