Question

<style>
.mainclass{
width:900px;
color:red;
}
</style>
<div class="mainclass">
this is test text
</div>

在JavaScript中是否有任何方法/可能实际上可以读取所有应用于元素的css属性？比如说el.style.color / width实际上应该返回设置/应用于此元素的样式。

我想这样做，以便可以迭代dom元素以找出应用于元素的宽度，并将其转换为％以制作响应式UI。

Answer 1

如果你可以使用jQuery，$（...）。css（）可以解决你的问题。

var color = $('#yourid').css("color");

如果你不想要jQuery，你可以在元素上使用getComputedStyle。有关跨浏览器的解决方案，请参阅http://www.javascriptkit.com/dhtmltutors/dhtmlcascade4.shtml。

Answer 2

尝试这个漂亮的小框架：

http://jquery.com/

它有这样做的功能：

http://api.jquery.com/width/

示例：

$(function () {
    $("div").each(function (index, el) {
        var $el = $(el);
        if ($el.width() > 300) {
            $el.css({width: "10%"});
        }
    });
});

http://jsfiddle.net/JvqAM/

使用JS读取应用于元素的CSS属性

2 个答案: