获取元素的宽度,高度

2 篇文章 0 订阅

1. style.width 适合行内样式

style.   : 这种方式不适合取值,适合给元素设置样式

<div style="width:100px;"></div>

2. window.getComputedStyle(elem).width Chrome, FF, IE9+支持此方法(现代浏览器)

3. elem.clientWidth 可视宽度 padding+元素宽度,对于行内元素,元素的宽度获取不了,此属性也不起作用

    获取网页的高度:document.documentElement.clientHeight

                           注意: document.documentElement是html,文档元素

获取文档的宽高:
var w=document.documentElement.clientWidth;  document.body.clientWidth这种写法是不对的
var h=document.documentElement.clientHeight;

        css中 用:root表示html选择器,假如body设置了背景色红色,html不设置,那么此红色会填充整个网页,如果再给:root设置了蓝色的背景色,那么蓝色填充整个网页,红色只填充到有网页元素的部分

     

4. elem.offsetWidth 占位宽,可视宽度+border

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer.

Typically, an element's offsetHeight is a measurement in pixels of the element's CSS height, including border, padding and the element's horizontal scrollbar (if present, if rendered). It does not include the height of pseudo-elements such as :before or :after.

对于行内元素可以用此属性,但是获取的值在各浏览器中不一致,解决办法是,首先把行内元素转化为块元素,然后设置其宽高,再用clientWidth和offsetWidth

<span id="span1">spanspanspanspanspanspanspanspan</span>
#span1{
    display: block;
    width: 300px;
}
5. scrollWidth 元素的 内容的实际尺寸,尤其是内容溢出时,不同浏览器scrollWidth还不一样


另外,如果元素设置了box-sizing,还必须考虑box-sizing的值

① 如果设置了box-sizing: content-box;

#div1 {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #000;
    box-sizing: content-box;
}

那么样式中的width100px就是内容宽,此时clientWidth=100+10+10,offsetWidth=100+10+10+10+10

② 如果设置了box-sizing: border-box;

#div1 {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #000;
    box-sizing: content-box;
}

那么样式中的width100px就是包含了border的宽度,所以100px=border+padding+内容宽,计算内容宽=60

这时clientWidth=60+10+10,offsetWidth=60+10+10+10+10



  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值