53 

.test {
  border: 1px solid;
  cursor: pointer;
  height: 10px;
  position: relative;
  width: 100%;
}
<div id="test1" class="test"></div>

我已经展示了我的 HTMLid和它的 CSS。现在，当我在做的时候$('#test').width()，我得到了100. 我想要它width的像素（不是%）。

谁能告诉如何以像素为单位获得其宽度？

4

11 回答 11

39

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

您可以看到，jQuery 返回宽度 = 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());
于 2013-08-09T11:00:38.777 回答
24

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

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

于 2013-06-25T19:22:28.737 回答
5

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

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

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

于 2014-08-25T12:58:01.413 回答
3

根据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");

在下面的代码片段中试试吧！

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>

于 2016-12-19T09:54:40.013 回答
3

另一个没有 jquery 的解决方案是使用clientWidthHTMLElements 上可用的属性

document.getElementById('test1').clientWidth
于 2016-12-20T19:56:01.870 回答
2

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

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

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

于 2016-12-17T15:14:53.490 回答
2

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

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

但这是一个起点。

//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());
});
于 2016-12-20T17:50:12.137 回答
2

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

jQuery 代码的屏幕截图

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

好吧，我为此目的使用 Firefox。

您还可以查看有关此主题的jquery 文档。

于 2016-12-21T13:33:27.627 回答
2

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

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 宽度。

谢谢。

于 2016-12-23T05:37:11.037 回答
0

这可能是早期 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，而cssHook又会调用getWidthOrHeight()。getWidthOrHeight() 可以获取以 % 为单位的宽度，然后按原样返回。width 函数不检查返回的内容并将其传递给 parseFloat，这导致 100% 变为仅 100。

于 2019-05-01T08:05:05.100 回答
-1

我认为这应该可行，但如果由于某种原因它继续给你 % 宽度，你可以做的是获取宽度，然后将它除以窗口宽度

var widthInPx = $(widnow).width()/$('yourElement').width
于 2013-06-25T19:30:07.213 回答