js----盒模型属性

215 阅读3分钟

JS盒子模型属性

  • JS盒子模型 通过JS中的属性和方法获取元素的属性信息
  • client
    • clientWidth / clientHeight
      • clientWidth 内容宽度 + 左右padding
      • clientHeight 内容高度 + 上下padding
    • clientLeft / clientTop
      • clientLeft 左边框
      • clientTop 上边框
    • offsetWidth / offsetHeight
      • offsetWidth = clientWidth(内容宽+左右padding) + 左右边框
      • offsetHeight = clientHeight(内容高+上下padding) + 上下边框
  • scoll系列 - scrollLeft(横向滚动条卷去的距离) - scrollTop(纵向滚动条卷去的距离) - 滚动条 卷去的距离,默认是0,具体是多少要看滚动条滚动了多少
  • 获取浏览器的窗口滚动的距离 let sc = document.documentElement.scrollTop || document.body.scrollTop;
    • scrollHeight/scrollWidth
      • 没有溢出时:scrollHeight/scrollWidth 等于 clientHeight/clientWidth
      • 内容溢出时:scrollHeight = clientHeight + 溢出内容高度;
      • 内容溢出时:scrollWidth= clientWidth + 溢出内容高度;
  • 获取浏览器窗口的盒模型属性
let winW = document.documentElement.clientWidth || document.body.clientWidth;
let winH = document.documentElement.clientHeight || document.body.clientHeight;

function win(attr, val) {
 if (typeof val !== "undefined") {
   document.documentElement[attr] = document.body[attr] = val;
 }
 return document.documentElement[attr] || document.body[attr];
}
console.log(win('scrollTop'));
console.log(win('screenTop', 1000));
  • 偏移值 offsetLeft和offsetTop
  • 父级参照物 距离当前元素最近的有定位属性的父级元素,如果没有的话默认 body

封装win方法

function win(attr, val) {
  if (typeof val !== "undefined") {
    // 传2个值的时候是设置,传一个值是获取
    document.documentElement[attr] = document.body[attr] = val;
  }
  return document.documentElement[attr] || document.body[attr];
}
console.log(win('scrollTop'));
console.log(win('screenTop', 1000));

计算生效的样式

  • ele.style(可读可写) 只能获取或设置行内样式
box.stytle.xxx
box.style.xxx = xxx
  • 获取浏览器最终计算生效后的样式 window.getComputedStyle(元素对象,伪类) 不需要伪类 写null
  • 返回一个对象 对象中包含该元素所有的样式
  • IE6-8不支持该语法
  • IE中获取计算过的生效样式 元素对象.currentStyle属性 属性值是一个对象 存储了该元素生效的所有样式

封装getCss方法 并处理兼容问题

// 优化:去除单位、同一 透明度样式:
function getCss(ele, attr) {
  var value;
  if ('getComputedStyle' in window) {
    value = window.getComputedStyle(ele, null)[attr];
  } else {
    // 判读获取的属性是否是透明度,如果是需要给IE的透明度属性进行特殊处理
    if (attr === 'opacity') {
      value = ele.currentStyle['filter'];
      var reg2 = /^alpha\(opacity=(.+)\)$/;
      value = reg2.exec(value)[1] / 100;
    } else {
      value = ele.currentStyle[attr];
    }
  }

  // 去除单位: 只有是数字带单位的情况下才需要去除单位
  var reg = /^-?\d+(\.\d+)?(px|pt|rem|em)$/i;
  if (reg.test(value)) {
    value = parseFloat(value);
  }
 }
console.log(getCss(box, 'width'));
console.log(getCss(box, 'opacity'));

图片懒加载 在某个合适的时机去加载这张图片 一般是图片进入浏览器可视区域或者即将进入可视区域

  • 原理
    • 实现延时加载,不直接给 img 标签设置 src 属性,而是选择自定义其他属性保存其图片资源路径;等到何时的时机,再获取这个自定义属性值,再赋值给图片的 src 属性,此时,浏览器会根据这个 src 去加载图片。
  • 单张图片懒加载 -当图片即将进入浏览器可视窗口
    • 监听页面的滚动事件 当页面滚动时 计算图片什么时候进入可视窗口
    • 进入浏览器可视窗口条件 :(图片上外边距离页面顶端的距离 - 浏览器的可视窗口的高度 - 页面纵向滚动条卷去的距离) <= 0
    • 现实项目中 先动态创建一个img标签 用动态创建的 img 去尝试加载,加载成功就再给页面中的图片 src 属性赋值。
  • 多张图片懒加载
    • 监听可视页面所有图片
    • 监听页面中的onscroll事件 在事件函数中 计算每张图片是否即将出现在浏览器的可视窗口
    • 当前图片即将进入,就进行该图片的加载
    • 加载之前需要判断该图片是否有src属性 若有 就说明图片已经加载过 就不需要重新加载