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

-1

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

有什么方法/可能在JavaScript中，我实际上可以读取所有应用于元素的CSS属性？比如说el.style.color/width实际上应该返回设置/应用到这个元素的样式。使用JS读取应用于元素的CSS属性

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

来源

2013-02-01 Anil Namde

这有什么错使它响应* *不依赖于JavaScript的？ – cimmanon

@cimmanon用于响应式网页设计，我们将基于px的布局转换为基于％的版式。现在有这么多新的元素，只有很好的方式，我能想到让在代码中设置的CSS宽度是与DOM的JavaScript迭代...这是它的全部目的.. –

可能是我会用丑陋的方式来检查每个元素，现在发现宽度... :( –

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

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

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

来源

2013-02-01 13:38:09 Luca

试试这个可爱的小框架：

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/

来源

2013-02-01 13:31:24

而不是仅仅链接到jQuery的文档，我建议你举个例子。 – Cerbrus

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

回答

相关问题