作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有这个控件并试图获取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 中都尝试过,结果都是一样的。
最佳答案
您的 $("#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;
.
关于javascript - offsetWidth、scrollWidth、ClientWidth 属性不适用于 Html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26887264/
我是一名优秀的程序员,十分优秀!