根据开发人员使用 CSS 指定的内容，是不是可以使用 jQuery 以百分比或像素为单位获取元素的宽度？

Posted 2023-03-06

【中文标题】根据开发人员使用 CSS 指定的内容，是不是可以使用 jQuery 以百分比或像素为单位获取元素的宽度？

【英文标题】：Is it possible to use jQuery to get the width of an element in percent or pixels, based on what the developer specified with CSS?根据开发人员使用 CSS 指定的内容，是否可以使用 jQuery 以百分比或像素为单位获取元素的宽度？

【发布时间】：2011-04-29 17:26:47

【问题描述】：

我正在编写一个 jQuery 插件，我需要做的是确定用户指定的元素的宽度。问题是 .width() 或 .css('width') 将始终报告精确的像素，即使开发人员已经分配了它，例如宽度：90% 与 CSS。

有什么方法可以让 jQuery 以 px 或 % 为单位输出元素的宽度，具体取决于开发人员使用 CSS 给出的内容？

【问题讨论】：

这个问题似乎是在问两个正交的问题；请考虑修改。这两个问题是：1）“我怎样才能得到一个元素的宽度，以%为单位？” （来自标题）和 2）“如何获取样式表中指定的 CSS 值？” （从身体）。

【参考方案1】：

我想说最好的方法是自己计算：

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width();
var percent = 100*width/parentWidth;

【讨论】：

谢谢，这当然可以，但我想让脚本自动确定开发人员是否指定了百分比或像素，我认为这无法做到，所以我将其添加为他们可以传递给插件的选项。

@joren - 请修改您的问题标题。它与您的实际问题的含义相矛盾。

@joren：我看到你修改了你的问题标题。您还有其他问题吗？

不是真的，我最终还是决定在我的插件中添加设置 div 的百分比作为选项，这似乎是经过讨论后最好的做法。谢谢！

@user1386213 没有。 .width() 总是返回一个绝对值（# 像素）。

【参考方案2】：

我认为您可以直接使用样式表（'style'）对象访问。即便如此，YMMV 还是通过浏览器。例如elm.style.width.

编辑彼得的评论:: 我不希望“获得 %”。根据问题：

我需要做的是确定用户指定的元素的宽度... [有没有办法] 以 px 或 % 为单位输出元素的宽度，具体取决于开发人员提供的内容CSS？

因此，我提供了一种替代方法来检索“原始”CSS 值。这似乎适用于FF3.6。 YMMV 其他地方（netadictos 的答案可能更便携/通用，我不知道）。同样，它不希望“获得 %”。

【讨论】：

如何返回百分比？

我明白了。我的标题是：Getting jQuery .width() to output percentage instead of px?。问题正文与标题相矛盾。目前还不清楚 OP 想要什么。

据此：***.com/a/10432934/1825772 仅适用于直接应用于元素的 css。

【参考方案3】：

此 *** 问题中记录了执行此操作的方法。

How do you read CSS rule values with javascript?

您唯一需要知道的是哪个样式表是类或遍历所有样式表。以下函数为您提供了该类的所有特征，很容易做一个正则表达式来提取您要查找的特征。

function getStyle(className) 
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) 

        if(classes[x].selectorText==className) 
                (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
        
    

getStyle('.test');

【讨论】：

如果原始样式不是百分比或未定义，如何返回百分比？

问题是：“有没有办法让jQuery根据开发人员用CSS给出的元素以px或%为单位输出元素的宽度？”，也就是说用户是要求输出 css 中的内容。

我明白了。我的标题是：Getting jQuery .width() to output percentage instead of px?。问题正文与标题相矛盾。目前还不清楚 OP 想要什么。

【参考方案4】：

出于我的目的，我推断出 MДΓΓ БДLL 的答案。

请记住，我只使用整数百分比。

    var getPercent = function(elem)
        var elemName = elem.attr("id");
        var width = elem.width();
        var parentWidth = elem.offsetParent().width();
        var percent = Math.round(100*width/parentWidth);
        console.log(elemName+"'s width = "+percent+"%");
    

    getPercent($('#folders'));
    getPercent($('#media'));
    getPercent($('#player'));

【参考方案5】：

如果您希望将原始元素百分比重新分配给新百分比，最好在 CSS 中定义该值并以某种方式（类、id 等）修改元素标识符以反映新的 CSS 定义.如果新的百分比变量需要可变，这并不总是适用。

.myClass
    width:50%;


.myNewClass
    width:35%;

通过此（或其他）方法添加删除：

$('.myClass').removeClass('myClass').addClass('myNewClass');

【讨论】：

toggleClass() 怎么样？

【参考方案6】：

这绝对是可能的！

你必须先 hide() 父元素。这将阻止 JavaScript 计算子元素的像素。

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

见我的example。

【讨论】：

这真的很奇怪。该元素可能会闪烁，它并不真正依赖这些函数的实际用途。如果这种行为发生变化怎么办？

@German - 要防止元素闪烁，请参阅***.com/questions/744319#19873734上的单行示例

【参考方案7】：

只是为了让它更jqueryish

添加这个

$.fn.percWidth = function()
  return this.outerWidth() / this.parent().outerWidth() * 100;

然后使用

$(selector).percWidth()

这将返回不带 % 符号的百分比值，因此您可以在计算中使用它

【参考方案8】：

我最近也遇到了这个问题，我真的不想做“额外”的工作，即获取父级的宽度并计算百分比。

经过几次快速尝试，这就是我得到的结果：

    $($($(table).find('tr')[0]).find('td')).each(function (i, e) 
        var proptW = $(e).prop("style").width;
        console.log(proptW);
    );

所以，我认为这是使用 jQuery 根据开发人员在 css 中指定的内容获取元素宽度值的最接近的方法。

如您所见，我有一个表格，我需要检索每列的宽度。

我们无法直接用jQuery方法获取开发者指定值（DSV），但结合JavaScript内置方法后，距离获取DSV仅一步之遥。

由于DSV在Style中，而Style是元素的一个属性，所以我们可以使用jQuery方法：prop()来获取。该方法返回样式对象（比如 sty），这样我们就可以直接调用 sty.width 来获取 DSV。

这不是获取它的纯 jQuery 方式，但它足够简单并且适合我。

【参考方案9】：

如果它使用样式标签设置，你可以简单地使用 .prop() 例如$('.selector').prop('style').width.replace('%', '')