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