使用Javascript如何获得DOM节点的伪CSS样式？

问题描述：

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

你想要得到的个人风格这个元素，而它有'：hover'附到它？即你是否想枚举在'yourElement：hover {...}'中定义的每个样式。 – techfoobar

我希望能够使用javascript获取所有：hover样式。 – Phil

答

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; 
}

，并获得CSS，如字体大小

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

答

你可以使用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); 
}

它有帮助，但我只能将鼠标悬停在元素上时才能获取元素悬停样式。即使没有悬停，我也希望能够获得它的悬停风格 – Phil

这很棘手，涉及到很多工作。总之，它涉及枚举导入到页面中的所有样式表，过滤出所选元素的hover定义，然后获取定义的样式并将其解析为值。到目前为止，我会说一个过度杀伤力。 – techfoobar

使用Javascript如何获得DOM节点的伪CSS样式？

相关推荐