按百分比分配的宽度，但想要以像素为单位
.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()给我的情况下的像素值。
在上面的屏幕截图中，您可以在不同的浏览器屏幕大小下以像素为单位查找不同的$("#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
