BOM2--getComputedStyle,currentStyle,style,offset,client和scroll

    1.getComputedStyle/currentStyle/style
    获取的宽高不包括 边框和内边距
    2.offsetWidth/offsetHeight
    获取的宽高包括 边框和内边距

    3.getComputedStyle/currentStyle/offsetXXX
    只支持获取, 不支持设置
    4.style在这里插入代码片
    可以获取, 也可以设置

    5.getComputedStyle/currentStyle/offsetXXX
    即可以获取行内,也可以获取外链和内联样式
    6.style
    只能获取行内样式
  1. getComputedStyle
    获取的宽高不包括border和paddig
    可以获取由行内和css设置的 宽高
    只读
    只支持IE9及以上的浏览器
  2. currentStyle
    获取的宽高不包括border和paddig
    可以获取由行内和css设置的 宽高
    只读
    只支持IE9以下的浏览器
  3. style
    获取的宽高不包括border和padding
    只能获取由行内设置的样式
    可读可设置样式,设置的样式是行内样式
    浏览器兼容
  4. offsetWidth和offsetHeight
    获取的宽高包括 元素宽高+border+padding
    可以获取由行内和css设置的 宽高
    只读
    浏览器兼容
  5. offsetLeft和offsetTop
    获取元素到第一个定位祖先元素之间的偏移位
    如果没有祖先元素是定位的, 那么就是获取到body的偏移位
  6. offsetParent
    获取元素的第一个定位祖先元素
    如果没有祖先元素是定位的, 那么就是获取到的就是body
  7. clientWidth/clientHeight 元素宽高 + 内边距
  8. clientLeft/clientTop 左边框的宽度 顶部边框的宽度
  9. scrollWidth/scrollHeight
1.内容没有超出元素范围时
scrollWidth  = 元素宽度 + 内边距宽度 == clientWidth
scrollHeight  = 元素高度 + 内边距的高度 == clientHeight 
2.内容超出元素范围时
scrollWidth = 元素宽度 + 内边距宽度 + 超出的宽度
scrollHeight = 元素高度 + 内边距的高度 + 超出的高度
  1. scrollTop/scrollLeft
    scrollTop: 超出元素内边距顶部的距离
    scrollLeft: 超出元素内边距左边的距离
发布了124 篇原创文章 · 获赞 1 · 访问量 4914

猜你喜欢

转载自blog.csdn.net/weixin_42139212/article/details/104240367
今日推荐