Question

我正在尝试使用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中。

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

有没有人有任何想法？

Answer 1

您要搜索的是this quirksmode.org article。它提出了函数

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 2

我无法获得百分比价值。你可以尝试这样的事情：

var widthpx = getComputedStyle($('#mydiv')[0]).width;
var parentWidth = $('#mydiv').parent().css('width')

var width = ( 100 * parseFloat(widthpx) / parseFloat(parentWidth) ) + '%';

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/

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

4 个答案: