Question

我正在使用此控件并尝试获取offsetWidth，clientWidth和scrollWidth ..

<span class="label-block" style="height: 19px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
<label for="ctl00_Form_PlaceHolder_chkIsAnnualSelfInsuranceRenewalCertificaterequired" id="tid" style="background-color:Transparent;">
Annual Self Insurance Renewal Certificate Required
</label>
 </span>

我的代码..

var a=$("#tid").offsetWidth;
var b=$("#tid").clientWidth;
var c=$("#tid").scrollWidth;

alert("offset Width =" +a);
alert("client Width =" +b);
alert("scroll Width =" +c);

警告消息显示为“未定义” 我在Chrome和IE11上都尝试过两种结果。

Answer 1

您的$("#tid")返回一个jQuery对象（包含DOM-label-element），但三个width是DOM元素本身的属性。所以你必须得到元素本身：

var tid = $("#tid").get(0); // or:
var tid = $("#tid")[0]; // or with native javascript:
var tid = document.getElementById("tid");

现在你将元素本身存储在var tid中（它比写三次$（“＃tid”）更好）并且可以这样做：

var a = tid.offsetWidth;
var b = tid.clientWidth;
var c = tid.scrollWidth;

根据评论：当元素为display: inline;

时，这些jQuery方法也适用于Chrome

var $tid = $("#tid"); // for jQuery-methods we need the jQuery-object

var e = $tid.outerWidth(); // corresponds to offsetWidth
var f = $tid.innerWidth(); // corresponds to clientWidth

由于jQuery与element.scrollWidth没有直接的等价物，而且inline-elements没有为scrollWidth提供可靠的值，因此最好将它们设置为display: inline-block;。

offsetWidth，scrollWidth，ClientWidth属性不适用于Html元素

1 个答案: