如何使用Javascript获取inheritance的CSS值？

我正在尝试使用Javascript获取inheritance的CSS属性的值。 我一直无法找到全面的答案。

示例CSS：

div { width: 80%; } 

示例标记：

 
 Some text  

使用javascript（jQuery或native），我需要得到元素的宽度 – 不是像素，而是字符串“80％”。

 $('#mydiv').css('width'); // returns in px $('#mydiv')[0].style.width // empty string getComputedStyle($('#mydiv')[0]).width // returns in px 

我需要将值作为字符串的原因是因为我需要将样式复制到另一个元素。 如果它被声明为百分比，则另一个值必须是百分比。 如果它在px中声明，则另一个值需要在px中。

真正的诀窍是这个属性可以被inheritance，而不是在元素上显式声明（如我的例子中所示）。

有没有人有任何想法？

Answer 1

没有办法得到我害怕的百分比值。 你可以尝试这样的事情：

 var widthpx = getComputedStyle($('#mydiv')[0]).width; var parentWidth = $('#mydiv').parent().css('width') var width = ( 100 * parseFloat(widthpx) / parseFloat(parentWidth) ) + '%'; 

Answer 2

您正在搜索的是这篇quirksmode.org文章 。 它提出了这个function

 function getStyle(el, styleProp) { var x = document.getElementById(el); if (x.currentStyle) var y = x.currentStyle[styleProp]; else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); return y; } 

不过，你应该仔细阅读那篇文章。 它们的styleProp名称并不是真正的跨浏览器，您将看到不同的浏览器如何处理它。 Opera似乎对报告正确的值有最好的支持。

Answer 3

获取元素的offSetWidth和offsetParent的offsetWidth，并计算两个整数的百分比。

Answer 4

这会将事件处理程序绑定到click事件的元素，并警告元素的相对宽度与其父元素相比较。

 ​$('#mydiv').on('click', function () { //element width divided by parent width times 100 to make a percentage alert(Math.round($(this).width() / $(this).parent().width() * 100) + '%'); });​​​​​​​​​​ 

这是一个演示： http ： //jsfiddle.net/X67p5/