javascript - 即使元素在CSS中也设置了值，也获取内联样式值？

Question

如果您有以下元素：

<span style="width:100px"></span>

而CSS是：

span {width:50px!important;}

有没有办法获得内联样式的值并忽略 css 值？

谢谢

Answer 1

利用element.style.width

样本：

$(function(){
    alert($("span")[0].style.width);
});

Answer 2

要查找应用的样式：

var span = document.querySelector('span[style]'),
    actualWidth = window.getComputedStyle(span, null).width;

请注意，这将获得获胜的样式，在这种情况下，它将是带有!important修饰符的样式。如果您必须尝试检索内联样式，无论是否应用它，您都可以简单地使用style元素节点的对象：

inlineWidth = span.style.width;

JS 小提琴演示。

请记住，width要应用于span元素，它必须是display: blockor display: inline-block。