JS面向对象编程

时间：2018-10-16 12:39:52 阅读：156 评论：0 收藏：0 [点我收藏+]

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浏览器

JS面向对象编程

原文：https://www.cnblogs.com/Lia-633/p/9797135.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)