如何使用Javascript获取继承的CSS值

How can I get the inherited CSS value using Javascript?

本文关键字：CSS 继承 获取 何使用 Javascript      更新时间：2023-09-26

我正在尝试使用Javascript获取继承的CSS属性的值。我一直没能找到一个全面的答案。

示例CSS:

div {
    width: 80%;
}

示例标记：

<div id="mydiv"> Some text </div>

使用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表示。

真正的诀窍是，这个属性可以被继承，而不是在元素上显式声明（就像我的例子一样）。

有人有什么想法吗？

您正在搜索的是这篇quicksmode.org文章。它提出了的功能

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似乎对报告正确的价值观提供了最好的支持。

恐怕无法获得百分比值。你可以试试这样的东西：

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

获取元素的offSetWidth及其offsetParent的offSetWidth，并根据这两个整数计算百分比。

这将事件处理程序绑定到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/

相关文章：