JS面向对象编程
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浏览器