如何使用Javascript获取CSS宽度值？

我想计算一个元素的宽度，以便当我使用JavaScript来包装它的父元素时，我可以设置父级的宽度以匹配子级的宽度。显然$('#element').css('width');是不是我想要的，因为它似乎只返回像素计算的值。有什么方法可以返回实际的CSS值，无论是300px还是20%或auto，而不是计算的值？如何使用Javascript获取CSS宽度值？

下面是它的设置方式，但我想知道#child的CSS值，而不是计算值。

$(document).ready(function(){ 
    $('#child').wrap('<div id="parent"></div>'); 
    $('#parent').each(function(){ 
     var childWidth = $(this).children('#child').css('width'); 
     $(this).css('width', childWidth) 
    }); 
});

来源

2010-11-05 Michael Martin-Smucker

今天有一个非常密切相关的问题：http://stackoverflow.com/questions/4105355阅读@ bobince的一些背景的答案 – 2010-11-05 20:38:17

你想获得元素的'style'属性的宽度属性，或还有CSS类中定义的设置？ – 2010-11-05 20:39:03

我不相信你能做到这一点。您将获得的最佳值是offsetWidth或clientWidth，它们返回计算值，并且不计算边距，填充和边框。

来源

2010-11-05 20:38:56

您需要阅读样式表本身。

请参见：How can I read out the CSS text via Javascript as defined in the stylesheet?

来源

2010-11-05 20:41:23

所有人，但IE支持window.getComputedStyle(element)，您可以使用像这样：

getComputedStyle($('#child')).width; // returns actual width of #child

不帮你IE，虽然。

来源

2010-11-05 20:49:07 Robusto

小便。我这样做的全部原因是，我可以在父元素“if lte IE 8”上模糊CSS3 box-shadow外观（请参阅：http://martinsmucker.com/demo/ie_shadow2.html ）。： - /这是一个非常有用的东西要知道，但是，谢谢！ – 2010-11-05 20:53:03

如何使用Javascript获取CSS宽度值？

回答

相关问题