一衬垫

Question

假设规则如下：

.largeField {
    width: 65%;
}

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

感谢。

编辑：不幸的是，在我的情况下使用DOM方法是不可靠的，因为我有一个导入其他样式表的样式表，因此 cssRules 参数最终都是 null 或 undefined 值。

然而，这种方法适用于大多数简单的情况（一个样式表，文档的 head 标记内的多个单独的样式表声明）。

Answer 1

最简单的方式

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

// >>> "65%"

Answer 2

这绝对是可能的！

您必须首先隐藏（）父元素。这将阻止JavaScript计算子元素的像素。

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

查看我的example。

现在......我想知道我是不是第一个发现这个黑客的人：）

<强>更新

一衬垫

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

它会在</body>标记之前留下隐藏元素，您可能需要.remove()。

查看example of one-liner。

我愿意接受更好的想法！

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;
}

希望它对某人有帮助。

Answer 8

我在Getting values of global stylesheet in jQuery中遇到了类似问题，最终我想出了same solution as above。

只是想交换两个问题，以便其他人可以从后来的发现中受益。

Answer 9

您可以使用jQuery来访问需要访问的样式：

文件负责人直接
在一个包含中，然后将服务器端脚本置于头部

然后应该可以（尽管不一定容易）编写一个js函数来解析文档头中样式标记内的所有内容并返回所需的值。

Answer 10

您可以使用css（width）函数返回元素的当前宽度。

即。

var myWidth = $("#myElement").css("width");

另见： http://api.jquery.com/width/ http://api.jquery.com/css/

Answer 11

jQuery中没有任何内容，即使在javascript中也没有任何直接的内容。以timofey的回答并运行它，我创建了这个函数，可以获得你想要的任何属性：

// gets the style property as rendered via any means (style sheets, inline, etc) but does *not* compute values
// domNode - the node to get properties for 
// properties - Can be a single property to fetch or an array of properties to fetch
function getFinalStyle(domNode, properties) {
    if(!(properties instanceof Array)) properties = [properties]

    var parent = domNode.parentNode
    if(parent) {
        var originalDisplay = parent.style.display
        parent.style.display = 'none'
    }
    var computedStyles = getComputedStyle(domNode)

    var result = {}
    properties.forEach(function(prop) {
        result[prop] = computedStyles[prop]
    })

    if(parent) {
        parent.style.display = originalDisplay
    }

    return result
}

Answer 12

使用交叉乘法从像素转换为百分比 。

公式设置：

1）。（element_width_pixels / parent_width_pixels）=（element_width_percentage / 100）

2。）element_width_percentage = （100 * element_width_pixels）/ parent_width_pixels

实际代码：

<script>

   var $width_percentage = (100 * $("#child").width()) / $("#parent").width();

</script>

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

12 个答案:

一衬垫