Question

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

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

我已经显示了我的HTML id及其CSS。现在，当我正在$('#test').width()时，我正在100。我想要width像素（不在%）。

有人能说出如何以像素为单位获得宽度吗？

Answer 1

其中一个选项也是，父元素不可见。以下是示例：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());

Answer 2

根据jQuery宽度文档http://api.jquery.com/width/，

.width()得到“...的当前计算宽度”，因此来自$('#heatMapBar').width()的返回值为像素，而不是百分比。我建议使用开发人员工具来检查宽度，可能是在#heatMapBar的当前上下文中，它的宽度是100px。

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

Answer 3

多个div具有百分比宽度可能存在问题：

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

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

Answer 4

根据 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>

Answer 5

这可能是共同发生的。根据{{3}}的官方文件，它说明了

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

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

Answer 6

只是一个想法......不讨厌。我知道它并不能涵盖所有可能性，但像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());
});

Answer 7

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

document.getElementById('test1').clientWidth

Answer 8

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

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

我为此目的使用Firefox。

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

Answer 9

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

<强> 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');

<强>输出

Perentage to Pixel：609px

输出完全基于div宽度。

感谢。

Answer 10

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

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

通过调试，我发现jQuery externalWidth（类似于innerHeight，innerWidth，height，width，outerHeight和outerWidth）函数将调用宽度cssHook，而后者又将调用getWidthOrHeight（）。 getWidthOrHeight（）可以获取以％为单位的宽度，然后按原样返回。 width函数不检查返回的内容，而是将其通过parseFloat传递，这导致100％变为100。

Answer 11

我认为这应该有用，但如果由于某种原因它继续给你％宽度，你可以做的是得到宽度，然后除以窗口宽度

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

指定的宽度百分比，但想要以像素为单位

11 个答案: