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

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/