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

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

.width()根据jQuery宽度文档获取所使用元素的"...当前计算宽度":http://api.jquery.com/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>

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