以百分比分配宽度，但希望以像素为单位答案

【问题标题】：Assigned width in percentage but want to get it in pixels以百分比分配宽度，但希望以像素为单位
【发布时间】：2013-06-22 17:51:54
【问题描述】：

.test {
  border: 1px solid;
  cursor: pointer;
  height: 10px;
  position: relative;
  width: 100%;
}

&lt;div id="test1" class="test"&gt;&lt;/div&gt;

我已经展示了我的 HTML id 及其 CSS。现在当我在做$('#test').width() 时，我得到100。我想要以像素为单位的width（而不是%）。

谁能告诉我如何得到它的像素宽度？

【问题讨论】：

相关GitHub问题github.com/jquery/jquery/issues/3455
@kukkuz 是的，我在以下答案之一中使用了小提琴。就我而言，我没有设置display:none，但确实有一个复杂的页面。我正在尝试重新创建一个简单的小提琴，但到目前为止还无法做到。
@MuhammadRehanSaeed，当你打电话给element.getBoundingClientRect().width 甚至只是element.clientWidth 时，你有什么结果？
编辑了答案，使其包含足够的细节。我认为即使在隐藏的父母或任何类型的祖先之下，它也可以轻松解决您的问题。
@MuhammadRehanSaeed element.clientWidth 返回 0（如果我记得我在 Hoznik 的示例中运行它，在问题代码上它返回 100）

标签： jquery html css

【解决方案1】：

.width() 根据 jQuery 宽度文档：http://api.jquery.com/width/ 获取所使用元素的“...当前计算的宽度”，因此来自 $('#heatMapBar').width() 的返回值以像素为单位，而不是百分比。我建议使用开发者工具检查宽度，可能在#heatMapBar的当前上下文中，它的宽度是100px。

如果您看这里：http://jsfiddle.net/NkQXa/1/，您会看到 #test 设置为 width:50%;，但它会提醒实际像素宽度。

【讨论】：

但我可以看到它的宽度实际上接近700像素
真的！这是由于时间。几秒钟后我检查了相同的宽度，然后它显示了正确的宽度。所以可能是我打电话的时候不合适。谢谢
这不适用于响应式设计。返回百分比。
.width() 给了我39.4 ...但它应该是大约400 .... ....然后我检查了.css('width')，它返回了"39.4%" ..... . ... ... ... 请参阅下面@honzik 的回答来解释原因
@Denzz @tibc-dev @dsdsdsdsd @DJDaveMark 等待 DOM 准备好 $(function() { ... }) 不起作用，但使用 setTimeout 稍等片刻然后重试即可。你们有没有找到更好的解决方案？

【解决方案2】：

我认为这应该可以，但是如果由于某种原因它一直给你百分比宽度，你可以做的是获取宽度，然后将它除以窗口宽度

var widthInPx = $(widnow).width()/$('yourElement').width

【讨论】：

Jeevan，我认为您的计算不正确。应该是... code var widthInPx = $(window).width()/(100/$('yourElement').width()); code
@john T，不完全是。 cos width() 给出'100'，即百分比，并且 100/100=1，所以你最终得到的是窗口宽度。但是，是的，Jeevans 的回答也存在同样的问题。
@GavinSimpson：1 * (window).width() 将等于窗口的宽度。这不就是 100% 的意思吗？
我不这么认为@jonathan Wood，因为 window.width() 返回 100，即百分比，因为它以百分比给出，所以 1 * (window).width() 是一样的为 1 * 100，这不是以像素为单位的宽度。

【解决方案3】：

其中一个选项也可以是，父元素不可见。这是示例：http://jsfiddle.net/nDMM3/

你可以看到，jQuery 返回 width = 100（比如 100%）

.test {
    border: 1px solid;
    cursor: pointer;
    height: 10px;
    position: relative;
    width: 100%;
    display:none;
}

#test2{
   width:100%;
}

<div id="test1" class="test">
   <div id="test2">
      Hello
   </div>    
 </div>   

 alert($('#test2').width());

【讨论】：

不会有人想出一个聪明的方法来解决这个问题吧？
@mituw16 +1 除了使用setTimeout 并稍后再试一次之外，还有一个解决方案。

【解决方案4】：

多个具有百分比宽度的 div 可能会出现问题：

<div style="width: 50%">
<div id="getMyWidth" style="width: 100%"></div>
</div>

在这种情况下，它为我返回 100 作为内部 div 的宽度。我通过获取外部 div 的宽度来解决它。

【讨论】：

这种情况在 Bootstrap 网格布局中经常发生，因为您并没有真正设置宽度，而是设置了 class="span12" 或其他任何东西。我同意，最简单的方法就是获取最外层父 div 的宽度。

【解决方案5】：

这可能是巧合。根据api.jqery.com 上的官方文档，它指出

获取匹配元素集中第一个元素的当前计算宽度。

要确认您获得的是像素宽度，您可以将此值等同于 jQuery 的 .css(width) 方法。它以像素为单位返回宽度，因此，您可以确认返回的高度以像素为单位。

【讨论】：

【解决方案6】：

根据 Honzik 的 的回答，这是一个小的解决方法，以防需要指定其宽度的元素位于隐藏的父元素内。

function getWidth(elemID) {
    // get parent element unique id (must have)
    var parentId = $("#"+elemID).parent().prop("id"); 
    // remove the child element based on the specified element id
    $("#"+elemID).remove();
    // append a new child element but on body where most probably is not set to "display:none"
    $("body").append('<div id="'+elemID+'">Hello</div>');
    // get the width of the newly appended child element and store it to a variable
    var width = $("#test2").width();
    // remove child element from body
    $("#"+elemID).remove();
    // re-append child element to its former position under former parent element (having CSS attribute "display:none")
    $(parentId).append('<div id="'+elemID+'">Hello</div>');
    // display stored element width 
    alert(width);
}
// usage to get the element's width
getWidth("test2");

在下面的 sn-p 中试试吧！

function getWidth(elemID) {
        var parentId = $("#"+elemID).parent().prop("id"); // your parent element should have a unique id specified
        $("#"+elemID).remove();
        $("body").append('<div id="'+elemID+'">Hello</div>');
        var width = $("#test2").width();
        $("#"+elemID).remove();
        $(parentId).append('<div id="'+elemID+'">Hello</div>');
        alert(width);
    }
getWidth("test2");

.test {
    border: 1px solid;
    cursor: pointer;
    height: 10px;
    position: relative;
    width: 100%;
    display:none;
}

#test2{
   width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1" class="test">
   <div id="test2">
      Hello
   </div>    
 </div>

【讨论】：

【解决方案7】：

只是一个想法......不要讨厌。我知道它并没有涵盖所有可能发生的情况，但是像 this 这样的东西可以检查每个项目的父项是否有所需的 css 规则（显示：无；在这种情况下）。我从here 得到这个想法。

唯一的问题是当网站变得更复杂时......它变得很慢。

但这是一个起点。

//showing as 100%
alert($('#test2').width());
//use window.load to ensure .width() isnt doing anything funny
$(window).load(function(){
//checks to see if any of its parents have display:none; we can have multiple checks here if required
    if ($( "#test2" ).parents().css('display') == 'none') {
//iterate through each parent of the selected item  
        $( "#test2" ).parents().each(function () {
//only change the display value if the element has a display:none;
            if ($(this).css('display') == 'none') {
                $(this).css('display', 'block');
                alert($('#test2').width());//or whatever we want to do with this number
//reset values here       
                $(this).css('display', 'none');
           }
        });
    }
//showing as 100%
    alert($('#test2').width());
});

【讨论】：

【解决方案8】：

不使用 jquery 的另一种解决方案是使用 HTMLElements 上可用的属性 clientWidth

document.getElementById('test1').clientWidth

【讨论】：

【解决方案9】：

我不确定这个事实，但 $("#id/.class").width() 在我的例子中给出了像素的值。

在上面的屏幕截图中，您可以在不同的浏览器屏幕尺寸下找到不同的$("#id/.class").width() 值，以像素为单位。

我正在为此使用 Firefox。

你也可以查看jquery documentation这个话题。

【讨论】：

【解决方案10】：

请检查下面附加的代码，我希望这是获取从百分比到像素的宽度的最简单方法。

HTML

<div id="test1" class="test">
 <p id="widthPx"> Perentage to Pixel : </p>
</div>

CSS

 .test {
  border: 1px solid;
  cursor: pointer;
  height: 100%;
  position: relative;
  width: 100%;
  padding: 10px;
}

JS

var widPx = $('#test1').width();
$('#widthPx').append(Math.round(widPx) + 'px');

输出

像素百分比：609px

输出将完全基于 div 宽度。

谢谢。

【讨论】：

【解决方案11】：

这可能是早期 jQuery 版本中的一个错误，直到这个 Github PR：https://github.com/jquery/jquery/pull/3741

虽然现在是 2019 年，但我不得不使用 jQuery 1.12.4 并注意到隐藏（被父级隐藏）元素的宽度计算始终为 100。

通过调试，发现jQuery的outerWidth（innerHeight、innerWidth、height、width、outerHeight和outerWidth类似）函数会调用width cssHook，进而调用getWidthOrHeight()。 getWidthOrHeight() 可以获取以 % 为单位的宽度，然后按原样返回。 width 函数不检查返回的内容并将其传递给 parseFloat，这导致 100% 变为仅 100。

【讨论】：