JS面向对象编程

Posted 2021-01-13 小仙女63

JS盒子模型

• js中提供了与盒子模型相关的属性
• css盒子模型属性：width height border padding margin

将这些属性分为很多系列 属性一共13个

client系列(跟溢出内容无关)

• clientWidth = width + padding(左右)
• clientHeight = height + padding(上下)
• clientLeft 左边框
• clientTop 上边框

offset系列

• offsetWidth = width+padding(左右)+border(左右)
• offsetHeight = height+padding(上下)+border(上下)
• 与偏移量相关 
  
  • offsetParent 参照物
  • offsetLeft 左偏移量
  • offsetTop 上偏移量

scroll系列(与溢出内容有关)

• scrollWidth ≈ width(真实的宽度) + 左padding （约等于真实的宽度）
• scrollHeight ≈ height(真实的高度)+ 上padding （约等于真实的高度）

为什么是约等于？各个浏览器的行高不同，相同浏览器设置overflow属性，值也不同

• 跟滚动条相关的?(唯一两个可以设置数值，其他只能读取) 
  
  • scrollLeft 滚动条横向卷出的内容
  • scrollTop 纵向卷出的内容 
    最小值是0 最大值 = 真实高度(ele.scrollHeight) - 一屏的高度(ele.clientHeight) 
    超过最大值小于最小值都无法设置

获取一屏的高度和整个文档真实的高度

• 一屏的高度：document.documentElement.clientHight || document.body.clientHight
• 整个文档真实的高度：document.documentElement.scrollHight || document.body.scrollHight 
  若没有溢出的内容，一屏的和文档的高度是一样的

获取任意属性值

window.getComputedStyle(元素, null) 查询伪类元素 ‘before’不查写null 
ie7~ie8 odiv.currentStyle

获取内嵌式或外链式中的任意CSS属性值

• window.getComputedStyle -ele.currentStyle

浏览器兼容性处理

• 1.通过判断属性的方式 
  
  • window.getComputedStyle
  • "getComputedStyle" in window

var oDiv = document.getElementById(‘div1‘); //ele表示当前操作的元素 attr表示CSS属性

function getCss(ele,attr) {

if(window.getComputedStyle){//判断此方法是否能被window调用

return window.getComputedStyle(ele,null)[attr];

}else {

return ele.currentStyle[attr];

}

}

console.log(getCss(oDiv, ‘fontSize‘));

• 2.检测数据类型方式 
  
  • typeof

function getCss(ele,attr) {

if(typeof getComputedStyle === ‘function‘){

return window.getComputedStyle(ele,null)[attr];

}else {

return ele.currentStyle[attr];

}

}

console.log(getCss(oDiv, ‘fontSize‘));

• instanceof ary instanceof Array 可以检测出对象的细分类型
• constructor 指向所属的类 ary.constructor (若原型重写，constructor会有问题) 
  
  • Object.prototype.toString.call(null) “[object Null]” 最精准检测数据类型方式 前面的是数据类型 后面的是所属类
• 3.判断浏览器

var oDiv = document.getElementById(‘div1‘); //ele表示当前操作的元素 attr表示CSS属性

function getCss(ele,attr) { //3.检测浏览器的方式

if(/msie [6-8].0/.test(navigator.userAgent)){

return ele.currentStyle[attr];

}else {

return window.getComputedStyle(ele,null)[attr];

}

}

console.log(getCss(oDiv, ‘fontSize‘));

• navigator.userAgent.indexOf(‘MSIE 8.0‘) === -1 说明不是IE8浏览器

JS盒子模型

• js中提供了与盒子模型相关的属性
• css盒子模型属性：width height border padding margin

将这些属性分为很多系列 属性一共13个

client系列(跟溢出内容无关)

• clientWidth = width + padding(左右)
• clientHeight = height + padding(上下)
• clientLeft 左边框
• clientTop 上边框

offset系列

• offsetWidth = width+padding(左右)+border(左右)
• offsetHeight = height+padding(上下)+border(上下)
• 与偏移量相关 
  
  • offsetParent 参照物
  • offsetLeft 左偏移量
  • offsetTop 上偏移量

scroll系列(与溢出内容有关)

• scrollWidth ≈ width(真实的宽度) + 左padding （约等于真实的宽度）
• scrollHeight ≈ height(真实的高度)+ 上padding （约等于真实的高度）

为什么是约等于？各个浏览器的行高不同，相同浏览器设置overflow属性，值也不同

• 跟滚动条相关的?(唯一两个可以设置数值，其他只能读取) 
  
  • scrollLeft 滚动条横向卷出的内容
  • scrollTop 纵向卷出的内容 
    最小值是0 最大值 = 真实高度(ele.scrollHeight) - 一屏的高度(ele.clientHeight) 
    超过最大值小于最小值都无法设置

获取一屏的高度和整个文档真实的高度

• 一屏的高度：document.documentElement.clientHight || document.body.clientHight
• 整个文档真实的高度：document.documentElement.scrollHight || document.body.scrollHight 
  若没有溢出的内容，一屏的和文档的高度是一样的

获取任意属性值

window.getComputedStyle(元素, null) 查询伪类元素 ‘before’不查写null 
ie7~ie8 odiv.currentStyle

获取内嵌式或外链式中的任意CSS属性值

• window.getComputedStyle -ele.currentStyle

浏览器兼容性处理

• 1.通过判断属性的方式 
  
  • window.getComputedStyle
  • "getComputedStyle" in window

var oDiv = document.getElementById(‘div1‘); //ele表示当前操作的元素 attr表示CSS属性

function getCss(ele,attr) {

if(window.getComputedStyle){//判断此方法是否能被window调用

return window.getComputedStyle(ele,null)[attr];

}else {

return ele.currentStyle[attr];

}

}

console.log(getCss(oDiv, ‘fontSize‘));

• 2.检测数据类型方式 
  
  • typeof

function getCss(ele,attr) {

if(typeof getComputedStyle === ‘function‘){

return window.getComputedStyle(ele,null)[attr];

}else {

return ele.currentStyle[attr];

}

}

console.log(getCss(oDiv, ‘fontSize‘));

• instanceof ary instanceof Array 可以检测出对象的细分类型
• constructor 指向所属的类 ary.constructor (若原型重写，constructor会有问题) 
  
  • Object.prototype.toString.call(null) “[object Null]” 最精准检测数据类型方式 前面的是数据类型 后面的是所属类
• 3.判断浏览器

var oDiv = document.getElementById(‘div1‘); //ele表示当前操作的元素 attr表示CSS属性

function getCss(ele,attr) { //3.检测浏览器的方式

if(/msie [6-8].0/.test(navigator.userAgent)){

return ele.currentStyle[attr];

}else {

return window.getComputedStyle(ele,null)[attr];

}

}

console.log(getCss(oDiv, ‘fontSize‘));

• navigator.userAgent.indexOf(‘MSIE 8.0‘) === -1 说明不是IE8浏览器