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+border
console.log(scrollWidth)
//如果内容没有超出，就等同于client
//若果超出就等于实际内容宽高，但是没有padding右下侧-滚动条宽高

html和body宽高问题

//html标签 document.documentElement
//body标签 documentbody
console.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