javascript – 检索百分比CSS值(在Firefox中)

我在firefox上检索确切的css属性值(在’％’中)时遇到问题.

假设我们有这个非常简单的标记：

<div id="box">box</div>

这个css：

#box{
    width:200px;
    height:200px;
    left:10%;
    position:absolute;
    background:red;
}

我想用js检索左边的位置(‘％’)

使用mootools非常容易(演示 – > http://jsfiddle.net/steweb/AWdzB/)：

var left = $('box').getStyle('left');

或jQuery(演示 – > http://jsfiddle.net/steweb/RaVyU/)：

var left = $('#box').css('left');

或者通过普通的js(演示 – > http://jsfiddle.net/steweb/tUAKA/)：

function getStyle(el,styleProp){ //from ppk's quirksmode
    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;
}

var left = getStyle('box','left');

但是如果你在firefox(8.0.1)上尝试它,你会发现结果不正确(应该是10％,但它是91px).问题是：这个较新版本的Firefox有没有错误？有谁知道这是一个已知的错误？难道我做错了什么？

谢谢 ：)

更新：我也尝试过较旧的firefox版本,并且它不正确(它总是返回px值)..为了完整性,它在IE上正常工作

解决方法:

这是documented：

The used value of any CSS property is the final value of that property after all calculations have been performed. Used values can be retrieved by calling window.getComputedStyle. Dimensions (e.g. width, line-height) are all in pixels… etc

似乎无法访问给定元素的“指定”css值,除非您确切知道应用哪个css规则并使用document.stylesheets或类似接口解析此规则.

标签：mootools,javascript,jquery,css
来源： https://codeday.me/bug/20190927/1824374.html