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

.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 (不是% )。

任何人都可以告诉如何获得像素的宽度?

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

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

其中一个选项也可以,那个父元素是不可见的。 这里是例子: 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()); 

有多个div有百分比宽度可以有一个问题:

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

在这种情况下,它为内部div的宽度返回100。 我解决了外部div的宽度。

基于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> 

这可能是一个共同的事件。 根据api.jqery.com上的官方文档,它指出

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

为了确认你获得了像素的宽度,你可以把这个值等同于jQuery的.css(width)方法。 它以像素为单位返回宽度,因此可以确认返回高度是以像素为单位的。

只是一个想法…不讨厌 。 我知道这并不包括每一个可能性,但像这样的东西可以检查每个项目父母的期望的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()); }); 

另一个没有jQuery的解决scheme是使用HTMLElements上可用的属性clientWidth

 document.getElementById('test1').clientWidth 

我不知道这个事实,但$("#id/.class").width()给我的情况下的像素值。

jQuery代码的屏幕截图

在上面的屏幕截图中,您可以在不同的浏览器屏幕大小下以像素单位查找不同的$("#id/.class").width()

那么我使用Firefox来达到这个目的。

你也可以检查关于这个主题的jQuery文档 。

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

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

OUTPUT

Perentage像素:609px

输出将完全基于div的宽度。

谢谢。

我认为这应该工作,但如果由于某种原因,它不断给你的%宽度,你可以做的是获得的宽度,然后除以窗口宽度

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