DOM对象的常用属性

获取div宽高

元素.clientWidth 客户宽高
元素.clientHeight

元素.offsetWidth 偏移宽高
元素.offsetHeight

元素.scrollWidth 滚动宽高
元素.scrollHeight

以上所有的宽高,基于元素被加入到DOM渲染树后
也就是被添加在页面中以后,才可以获取
并且图片这类后加载元素无法获取宽高(异步原因造成)

异步 当运行某个需要一段时间完成的内容时、可以先继续向后执行代码,加载和执行后面是同时进行的
同步 上一步执行完成再执行下一步

元素的宽高

console.log(getComputedStyle(div).width) //50px-滚动条的宽高
console.log(div.clientWidth) 50 不加单位

console.log(div.clientWidth) width+padding-滚动条的宽高,不带边线(边框)
console.log(div.offsetWidth) width+padding+border 有没有滚动条跟它没有关系,就是实际这个div的占位宽高,带边线(边框)
console.log(div.scrollWidth)
如果没有超出 等同于clientWidth和clientHeight
如果超出就是实际内容所占的宽高,但是padding没有右侧和下侧
如果超出就是实际内容所占的宽高,但是padding没有右侧和下侧-(如果有滚动条,减去滚动条宽高)

body与html的宽高

// ————————————————————————————元素以外的宽高,页面宽高
// document.body body
// document.documentElement html

// console.log(document.body.clientWidth,document.body.clientHeight);//实际body的宽度和高度-滚动条宽高
// console.log(document.body.offsetWidth,document.body.offsetHeight);//实际body的宽度和高度-滚动条宽高
// console.log(document.body.scrollWidth,document.body.scrollHeight);//实际body中内容的宽高

// console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);//当前文档的可视宽高-(如果有滚动条,减去滚动条宽高)
// console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight);//当前文档的内容宽高-(如果有滚动条,减去滚动条宽高)
// console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);//当前文档的可视宽高,如果有滚动条,就是实际body撑开的宽高

clientWidth/Height

//页面宽度-16(默认8个像素的宽度)   高度0(因为没有内容)如果有内容会撑开 
// 元素有多高,就会撑开多少 ,宽度是可视宽度
// console.log(document.body.clientWidth,document.body.clientHeight);


// 获取页面的可视宽高  ,并不会因为内容变大而撑开
// console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)

offsetWidth/Height

// body的offsetWidth和clientWidth相同
// console.log(document.body.offsetWidth,document.body.offsetHeight);

// 获取页面的可视宽度,高度是8 ,有内容,宽度仍然是可视宽度,html的高度是body内容高度+bodyMargin
// console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight);

scrollWidth/Height

    // 没有内容时和body的clientWidth相同,有内容,内容撑开的宽高,和clientHeight相同,内容宽度
    // console.log(document.body.scrollWidth,document.body.scrollHeight);


    // 如果没有body没有高度,则是可视宽高
    // 如果body有宽高,不超过可视宽高,则是可视宽高
    // 如果body的宽高超出可视范围,则是body宽高+margin(宽度+margin,高度+margin*2)
    // console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);

最常用的

    // 1、内容高度 console.log(document.body.clientHeight);
    // 2、可视宽高 console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
    // 3、有滚动条时,内容宽高  console.log(document.body.scrollWidth,document.body.scrollHeight);

位置

    // clientLeft clientTop
    // offsetLeft offsetTop
    // scrollLeft scrollTop

元素的位置

clientLeft/Top
    //   var div1=document.getElementById("div1");
    //   边线宽高
    //   console.log(div1.clientLeft,div1.clientTop);
offsetLeft/Top
    // 没有定位时,相对页面的左上顶角位置
    // 如果定位 相对父容器左上角位置  和css中left,top相同
    // console.log(div1.offsetLeft,div1.offsetTop);
scrollLeft/Top
    // 是元素上的滚动条位置(元素已经向下滚动了多少/元素上去了多少,而不是滚动条的长度..)  仅这两个属性可以设置
    // console.log(div1.scrollLeft,div1.scrollTop);

                                可滚动页面的整体减去可视窗口的高度
    // div1.scrollTop=157;   // (div1.scrollHeight-div1.clientHeight)这个就是最大滚动位置,到底
    // console.log(div1.scrollHeight,div1.clientHeight);
    嫌麻烦可以直接设置为整个页面的整体高度 就到底了 这样不够准确
    // div1.scrollTop=div1.scrollHeight;


    // 操作滚动条触发执行函数
   /*  div1.onscroll=function(){
        console.log(div1.scrollTop);//获取滚动条位置
    } */


    // IE8以后才有的方法
    // 获取元素的矩形界限范围
    // var rect=div1.getBoundingClientRect();
    // console.log(rect);
  /*   {
        width,  //offsetWidth
        height, //offsetHeight
        left, //最左边到可视窗口的距离
        top, //最顶部到可视窗口的距离
        right,//left+width 最右边到可视窗口的距离
        bottom,//top+height  最下面到可视窗口的距离
        x, //left
        y  //top  
    } */
比较常用的
    // 元素的
    // 1、offsetLeft、offsetTop,定位后元素相对父容器的距离
    // 2、scrollLeft,scrollTop,元素内的滚动条位置
    // 3\ getBoundingClientRect()获取元素的矩形界限范围

html body位置

    // body 和 html没有边线,所有这两个值都是0
    // console.log(document.body.clientLeft,document.body.clientTop)
    // console.log(document.documentElement.clientLeft,document.documentElement.clientTop)

    // 因为body和html标签都是最顶端,最外层,这两个值都是0
    // console.log(document.body.offsetLeft,document.body.offsetTop)
    // console.log(document.documentElement.offsetLeft,document.documentElement.offsetTop)

    // document.body.scrollTop=100;
    // 页面中的滚动是html的scrollTop和scrollLeft控制
    // 早期的浏览器是body控制
    // document.documentElement.scrollTop=200;
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值