在jQuery中获取CSS规则的百分比值

Question

假设规则如下:

.largeField {
    width: 65%;
}

有没有办法以某种方式获得'65%',而不是像素值？

谢谢.

编辑:不幸的是,在我的情况下使用DOM方法是不可靠的,因为我有一个导入其他样式表的样式表,因此cssRules参数以null或未定义的值结束.

但是,这种方法适用于大多数简单的情况(一个样式表,文档头标记内的多个单独的样式表声明).

Answer 1

最简单的方法

$('.largeField')[0].style.width

// >>> "65%"

Answer 2

这绝对是可能的!

您必须先隐藏()父元素.这将阻止JavaScript计算子元素的像素.

$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);

看看我的例子.

现在......我想知道我是不是第一个发现这个黑客:)

更新:

一衬垫

element.clone().appendTo('body').wrap('<div style="display: none"></div>').css('width');

它会在</body>标记之前留下一个隐藏元素,您可能想要这样做.remove().

查看单线的示例.

我愿意接受更好的想法!

Answer 3

我担心没有内置的方式.你可以这样做:

var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

Answer 4

您可以访问该document.styleSheets对象:

<style type="text/css">
    .largeField {
        width: 65%;
    }
</style>
<script type="text/javascript">
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i=0; i < rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == ".largefield") {
            alert(rule.style.getPropertyValue("width"));
        }
    }
</script>

Answer 5

迟到,但对于较新的用户,如果css样式包含百分比,请尝试此操作:

$element.prop('style')['width'];

Answer 6

一个基于Adams的jQuery插件回答:

(function ($) {

    $.fn.getWidthInPercent = function () {
        var width = parseFloat($(this).css('width'))/parseFloat($(this).parent().css('width'));
        return Math.round(100*width)+'%';
    };

})(jQuery);

$('body').html($('.largeField').getWidthInPercent());?????

将返回'65%'.如果您喜欢if(width =='65%'),则只返回四舍五入的数字以更好地工作.如果您直接使用Adams回答,那就没有用(我得到的东西就像64.93288590604027).:)

Answer 7

基于 timofey 出色且令人惊讶的解决方案，这里是一个纯 Javascript 实现：

function cssDimensions(element) {
  var cn = element.cloneNode();
  var div = document.createElement('div');
  div.appendChild(cn);
  div.style.display = 'none';
  document.body.appendChild(div);
  var cs = window.getComputedStyle
    ? getComputedStyle(cn, null)
    : cn.currentStyle;
  var ret = { width: cs.width, height: cs.height };
  document.body.removeChild(div);
  return ret;
}

希望它对某人有帮助。