JavaScript中的盒子模型

发布于 2020-01-07  515 次阅读 本文共2002个字


JS盒子模型中的13个常用属性:

  • clientWidth/clientHeight:可视区域的宽高,宽高+padding组成
  • clientTop/clientLeft:上边框和左边框的宽度
  • offsetWidth/offsetHeight:clientWidth/clientHeight+border
  • offsetParent:父级参照物,和父级元素没有必然关系,默认元素的父级参照物都是BODY,如果设置定位后,可以改变默认的父级参照物
  • offsetLeft/offsetTop:当前元素的外边框距离父级参照物内边框的偏移(左/上) =>IE8下是当前元素的外边框距离父级参照物的外边框算作偏移
  • scrollWidth/scrollHeight:当前元素真实内容的宽度和高度,在没有内容溢出的情况下,和clientWidth/clientHeight的值一模一样;但是在内容有溢出的情况下,scrollHeight获取的值是上padding+真实内容的高度(由于浏览器对于字体等渲染不太一样,所以我们获取的结果都是约等于的值,并且是否这是overflow:hidden也会对结果产生影响)
  • scrollTop/scrollLeft:当前区域如果有内容溢出,并且我们也让其出现了滚动条,那么这两属性获取的即使滚动条卷去的宽度和高度
    • scrollTop/scrollLeft是13个属性中唯一可以进行读写的,其余的都是只读的
    • 通过JS盒子模型的属性获取到的结果都是整数(它默认会对小数值进行四舍五入,而且获取的值是不带单位的)
    • 如果操作的是整个页面(不管是获取还是设置),想要兼容的话,需要写两套: document.documentElement.xxx=xxx; document.body.xxx=xxx;
    • JS中的盒子模型,获取的样式值都是复合值,如果想获取单独某一个具体的样式值(例如:我就想获取width或者paddingLeft)使用这13个属性就不行了

获取当前元素的具体样式属性值

function getCss(curEle, attr) {
  var val = null, reg = null;
  if ("getComputedStyle" in window) {
    var = window.getComputedStyle(curEle, null)[attr];
  } else {
    // IE6~8
    // 在低版本浏览器中,如果产地的attr是opacity,说明用户想要获取的是透明度,但是低版本浏览器中的透明度使用的是filter滤镜处理,所以这一点我们需要特殊处理
    switch (attr) {
      case "filter":
      case "opacity":
        val = curELe.currentStyle["filter"]; // "alpha(opacity=[number(opacity*100)])"
        reg = /alpha\(opacity=(.+)\)/i;
        // var = reg.test(val) ? reg.exec(val)[1]/100 : 1;
        val = reg.test(val) ? RegExp.$1/100 : 1;
        break;
      default:
        var = curEle.currentStyle[attr]
    }
  }
  // 去除部分结果的单位:左边是有效数字,右边是单位的,都可以去掉单位,对于复合值或者其他非数字的样式值,我们不管
  reg = /^-?\d+(\.\d+)?(px|rem|em|pt)$/i;
  var = reg.test(val) ? parseFloat(val) : val;
  return val;
}

JS中浏览器兼容检测的三大方式

1、使用try、catch

try {
  // 执行的JS代码
} catch(e) {
  // 如果上述的代码执行出现问题,则进入catch中执行
}
/*
  前提条件:
  1、需要保证不兼容的代码,在浏览器中执行的时候,抛出异常信息,这样才会进入catch中执行
  2、性能不太好,不管是否兼容,都需要把try中的代码执行一下才可以
*/

2、当前浏览器信息监测来判断是否兼容

var curInfo = window.navigator.userAgent; // 获取浏览器的基本信息,包括类型和版本号
if (curInfo.includes("MSIE 8")) {
  // 非IE8浏览器
}
// 使用这种方式检测兼容,首先我们需要知道哪些浏览器不兼容,这样才可以书写条件信息

3、验证当前即将使用的属性和方法是否在当前对象中

// 方案 1:
if (window.getComputedStyle) {
  // 兼容: 首先获取属性值,如果兼容,是一个具体的值,不兼容结果是undefined
} 

// 方案 2:
if (typeof window.getComputedStyle !== "undefined") {
  // 兼容:在上一个基础上稍作修改
}

// 方案 3:
if ("getComputedStyle" in window) {
 // 兼容
}

努力,只为遇见更好的自己!