11-13 js操作css样式

Posted 2021-01-23 你的男朋友

1.Js操作css样式

 

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

 

　　我们没有让css和html分离。

 

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

 

　　window.getComputedStyle() 获取经过计算机计算的所有属性就是只要渲染出来的都是经过计算的。

 

　　　getComputedStyle()第一个参数是当前元素，第二个一般我们写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=document.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(err){}：必须在报错的条件下，和if  else比较性能上比较差，不在万不得以的情况下不使用

 

只读 可写

　　只读: 只能获取不能修改

　　可写：可以修改的

 

Null和undefined的区别：

　　Null和undefined都表示没有值

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

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

　　比如：

　　var aa=document.getElementById("aa")

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

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

1. var a;undefined
2. Div.aa undefined

 

元素节点的树状图

Document>documentElement>body>tagName

 

offsetLeft/offsetTop 结合运动

滚动轮播