js中级小知识5-优快云博客

本文深入探讨了DOM中元素的属性操作，包括div的属性集合、classList的使用，以及client、offset和scroll系列属性的详细解析。同时，介绍了如何通过JavaScript获取和设置CSS样式，包括window.getComputedStyle和currentStyle的兼容性解决方案。

元素的属性

div.attributes是所有标签属性构成的数据集合

div.classList是所有class名构成的数组集合

　　在classList的原型链上可以看到add()和remove()

1.client系列

clientWidth/clientHeight是我们设置的宽和高架上内边距（没有边框）

clientLeft/clientTop就是我们设置的边框值

2.Offset系列

offsetWidth/offsetHeight是我们设置的宽和高加上内边距加上边框

offsetTop/offsetLeft是元素外边距离到父级的内边距的距离

offsetTop参照物由父级元素身上的position：absolute/fixed决定的；如果父级元素没有就逐层向上查找直到body。

offsetParent返回这个元素的父级元素

3.scroll系列

scrollwidth/scrollHeight就是我们设置的宽高加上内边距（内容没有一处的情况下）

如果超出了范围就按内容而定

scrollTop/scrollLeft滚动条卷走的高度和宽度

如果我们设置了小数，都会向上取整

案例分析

Offset往往我们和我们做元素的运动有关

1.offset必须和position配合使用往往这个值还必须是absolute。

2.offsetLeft有初始值在标准浏览器下是8px 低版本没有。

document.body获取的是文档中的body标签

document.documentElement获取的是文档中的根节点

document.body.clientWidth

document.documentElement.clientWidth

二者获取的width的值不一样差16px，怎样让他们一样。

一个css就搞定了

Ie6不支持document.documentElement,

兼容性写法

var w=doucument.documentElemnt.clientWidth||document.body.clientWidth

获取浏览器可见区的宽度

逻辑运算 || && !

||遇到第一个为真就返回

&&遇到第一个为假就终止，返回false，如果没有遇到返回最后那一个

5&&4&&2&&1 ==》1

5&&0&&3&&0 ==》0

5||2&&3且的优先级高于或 2&&3=》3 5||3==》5

==============================================================================================================================================================================================================================jjs操作css样式

div.style.width="100px".在div标签内我们添加了一个style属性，并设定了width值。这种写法还会个大量标签带来style属性，跟实际项目不符。

我们没有让css和html分离

所以如果是为了获取css样式

window.getComputedStyle()获取经过计算机计算的所有属性

就是只要渲染出来的都是经过计算的。

getComputeedStyle()第一个参数是当前元素，第二个一般我们写null

并且这个方法是只读，

Ie6-8不支持这个用法，ie的是用currentStyle

2.try{

}catch(error){}不报错执行try里面的代码块，报错执行catch里面的代码块。

前提条件时报错，如果不是报错不能使用

var csss;

try{

csss=window.getComputedStyle(aa,null)

}catch(e){

csss=aa.currentStyle

}

console.log(csss)

总结

　　Js解决兼容的方法

　　1.||

　　var dd=documen.documentElement.clientWidth||document.body.clientWidth

　　2.if()else()

if(window.getComputedStyle){

csss=window.getComputedStyle(aa,null)

}else{

csss=aa.currentStyle

}

console.log(csss)

　　3.try()catch(){}

3.try{}catch(err){}

必须在报错的条件下，和if else比较性能上比较差，不在万不得已的情况下不使用

只读可写

只读:只能获取不能修改

可写:可以修改的

Null和undefined的区别

Null和undefined都表示没有值

Null　　是这个东西是天生存在的但是没给值。

　　如果我们需要清除浏览器变量的内存需要赋值null

　　　　比如

　　　　var aa=doument.getElmentById("aa")

　　　　console.log(aa.parentNode.parentNode.parentNode.parentNode) null

Undefined这个东西压根就不存在的是人未定义的并且没赋值。

　　1.var a；undefined

　　2.div.aa undefined

　　元素节点的树状图

document>documentElement>body>tagName

offsetLeft/offsetTop结合运动

滚动轮播

===========================================================================================================================================-==================================================

面试题作用域

+function(){

　　console.log(a)

　　var a=5;

　　function a(){}

　　console.log(a)

　　function b(){}

　　b=6

　　console.log(b)

　　var c=d=b

}()

console.log(b)