DOM中更改css样式以及DOM中常见的属性样式

DOM样式

行内样式与css样式

var div0 = document.querySelector(\'#div0\');div0.style.height = \'100px\';div0.style.width = \'100px\'

上面的对象写法，需要将所有的css中-字母替换为大写字母

例如 font-size fontSize

而style字符串方式写法，按照原css行内样式填写。

div0.style = \'width:100px\';height:100px;background-color:red\"

复制对象 浅复制 Object.assign()

var o = {a:1,b:2}var o1 = {};Objcet = assign(o1,o);//o与o1无引用关系

用这种方法可以给元素添加样式

Object.assign(div0.style,{width:\'50px\',height:\'50px\',backgroundColor = \'red\'})

为元素添加或清除class样式

div0.className = \'div1\';div0.className += \' div2\'//增加calss样式div0.className = div0.className.replace(\'div1\',\'\')//清除div1样式

如果DOM的行内样式有内容，可以通过下面这种方式来获取对应的行内样式

如果DOM的样式在css中，这时候还没有渲染所以无法计算Css的样式，这种style获取是不能获得css样式的。

console.log(div0.style.width)

想要获取计算后的样式，就需要使用getComputedStyle获取元素样式

console.log(getComputedStyle(div0).width)//不支持IE8j及以下conso.log(div0.currentStyle.Width)//兼容写法，只支持IE8以上var style;try{style=getConputedStyle(div0)}catch(error){style.div0.currentStyle;}//可以用这种写法兼容所有浏览器，不过try catch这种写法尽量不要使用，比较消耗性能

如果想要通过JS获取或者书写CSS中的样式时，可以通过stylesheets来进行

for(var i = 0; i < document.styleSheets.length;i++){console.log(document.styleSheets[0].cssRules[i].selectorText)//获取css中的选择器console.log(document.styleSheets[0].cssRules[i].style.length)//选择样式中的有几对属性属性值for(var j = 0; j < document.styleSheets[0].cssRules[i].style.length;j++){var key = document.styleSheets[0].cssRules[i].style[j];console.log(key,document.styleSheets[0].cssRules[i].style[key])//选择器中样式的属性,属性值document.styleSheets[0].cssRules[i].style.color = \'green\';//改变css属性的属性值}}

DOM常见属性样式

var div = document.querySelector(\'div\');//clientWidth  clientHeight 客户宽高//offsetWidth  offsetHeight 内容宽高//scrollWidth  scrollHeight 滚动内容宽高

console.log(div.clientWidth)//宽高+padding -(滚动条宽高)console.log(div.offsetWidth)//宽高+padding+borderconsole.log(scrollWidth)//如果内容没有超出，就等同于client//若果超出就等于实际内容宽高，但是没有padding右下侧-滚动条宽高

html和body宽高问题

//html标签 document.documentElement//body标签 documentbodyconsole.log(document.documentElement.clientWidth)//当前文档的可视宽高 - (滚动条宽高)console.log(document.documentElement.offsetWidth)//当前文档的内容宽高 - (滚动条宽高)console.log(document.documentElement.scrollWidth)//当前文档可是宽高，如果有滚动条就是实际body撑开的宽高console.log(document.body.clientWidth)//实际body的宽度和高度-滚动条宽高console.log(document.body.offsetWidth)//实际body的宽高-滚动条宽高console.log(document.body.scroll.Width)//实际body中内容的宽高

位置

//clientLeft cilentTop//offsetLeft offsetTop//scrollLeft scrollTop

DOM的位置问题

console.log(div.clientLeft)//边线宽高console.log(div.offsetLeft)//当前div到父元素左上角的距离console.log(div.scrollLeft)//当前元素的滚动条位置

html和body的clientleft和offsetleft不考虑

document.documentElement.scrollTop//(页面中滚动条的位置)document.body.scrollTop//(早期浏览器页面滚动条的位置)

除了scrollTop和scrollLeft之外其他的都是可读属性，只有这个是可以修改的

如果你想获取某一子元素的位置信息，可以使用下面这种方法,他会返回一个对象，其中有很多当前元素的位置信息。

var rect = div.getBoundingClientRect()//rect.x === rect.left//rect.y === rect.top