Question

我有一个div，其中包含一些max-width值的文本，需要display:block。如何使用jQuery获取实际的width？

<style type="text/css">div{display:block; max-width:600px}</style>
<div>hello world</div>

目前，当值应该低得多时，这会返回600。

var ww = $('div').width(); // innerWidth() returns same value

Answer 1

尝试使用此代码。

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

$("div").textWidth()

此函数将div的内容传递给时间跨度，因为此元素是内联元素。它没有宽度或高度，因此它们内部的文本具有实际宽度。

Answer 2

默认情况下，div元素会扩展到其容器的高度，但您可以尝试将显示属性设置为inline-block。

$(function() {

  $("#showWidthBtn").click(function() {
    alert($("div").width());
  });
  
});

div { background: #eee; max-width: 500px; display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Hello World!</div>
<button id="showWidthBtn">Show Width</button>

Answer 3

正如其他人所指出的那样，父容器的宽度是其子容器的上限。此代码段显示红色父div中的子蓝色div。虽然蓝色子项的最大宽度设置为1500，但jquery为$('.blue').width()捕获的实际宽度显示为1500以下。

＆＃13;

$('#output').append($('.blue').width());

＆＃13;

.blue { /* child */
  max-width: 1500px;
  height: 100%;
  background-color: blue;
}
.red { /* parent */
  background-color: red;
  height: 70px;
  padding: 7px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red">
  <div class="blue"></div>
</div>
<p id="output">The blue width is bound by its red parent. Blue's width is now: </p>

＆＃13;

Answer 4

你几乎就在那里。 outerWidth()执行此操作：http://api.jquery.com/outerwidth/

设置max-width时如何获得div的实际宽度？

4 个答案: