---

style

let elem = document.getElementById("elem-container")
// 获取元素宽度或设置元素宽度
elem.style.width // 获取
elem.style.width = '100px' // 设置
// 设置背景图片(注意多个单词是驼峰写法而不是中划线)
elem.style.backgroundImage = '........'

注意通过style只能获取到标签上通过style属性写的样式

<div id="elem-container" style="width:100px"/>
let elem = document.getElementById("elem-container")
// 获取元素宽度
elem.style.width //  '100px'

<div id="elem-container"/>
let elem = document.getElementById("elem-container")
// 获取元素宽度
elem.style.width //  ''

style.cssText可以得到所有的style属性代码

<div id="elem-container" style="width:100px"/>
let elem = document.getElementById("elem-container")
// 获取元素宽度
elem.style.cssText //  'width:100px'

计算样式currentStyle（ie提供） 和getComputedStyle()

虽然style对象能够提供支持style特性的任何元素的样式信息，但是他不包含从其他样式列表层叠而来的并且影响当前元素的样式信息

用法

var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor);
alert(computedStyle.width);
alert(computedStyle.height);
alert(computedStyle.border);

//ie不支持getElementById()提供了currentStyle

var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor);
alert(computedStyle.width);
alert(computedStyle.height);
alert(computedStyle.border);

---

示例封装一个获取样式的函数

在实际操作中我们常常要获取一个DOM元素的宽度高度之类的
这里通过例子讲解一下获取元素的样式属性

如何获取元素的真实宽高

<style>
    #elem-container{
        width: 200px; 
        height: 100px; 
        background-color: pink;
        margin: 20px;
        padding: 10px;
        border:2px solid red ;
}
</style>

<div id="elem-container">点我</div>
<script>
    let elem = document.getElementById("elem-container");

    function style(element,pseduoElement){
        return element.currentStyle ? element.currentStyle : window.getComputedStyle(element,pseduoElement);
    };

    let theCSS=style(elem,null);
    let elementWidth = theCSS.width;
    let elementHeight =theCSS.height;
    
    console.log(elem.style.width)
    
    elem.addEventListener('click',function(){
        console.log(elementWidth);  // 200px 内容宽度
        console.log(elementHeight); //100px 内容高度
        console.log(elem.offsetHeight); //124 此空间包括内容，padding 和 border（还包括滚动条的宽度，但大多时候滚动条的宽度是计算到 padding 和内容中的）
        console.log(elem.scrollHeight); //120 用来计算可滚动容器的大小，包括不可见的部分，比如一个 300*300 的容器放入一个 600*600 的图片，此时 scrollHeight 为 600，当然，scrollHeight 的值需要加上 padding 的值。`element.currentStyle : window.getComputedStyle(element,pseduoElement)`
        console.log(elem.clientHeight); //120 表示可视区域，包括内容和 padding ，如果有滚动条，还需要减去滚动条的宽度。
        
    });
</script>
//单击元素获取高度

上面的代码通过点击事件打印出指定元素的宽度和高度
下面注释有写各种方法所得到的宽度所代表什么；也是我们常用来获取元素宽高的方法

    console.log(elementWidth);  // 200px 内容宽度
    console.log(elementHeight); //100px 内容高度
    console.log(elem.offsetHeight); //124 此空间包括内容，padding 和 border（还包括滚动条的宽度，但大多时候滚动条的宽度是计算到 padding 和内容中的）
    console.log(elem.scrollHeight); //120 用来计算可滚动容器的大小，包括不可见的部分，比如一个 300*300 的容器放入一个 600*600 的图片，此时 scrollHeight 为 600，当然，scrollHeight 的值需要加上 padding 的值。`element.currentStyle : window.getComputedStyle(element,pseduoElement)`
    console.log(elem.clientHeight); //120 表示可视区域，包括内容和 padding ，如果有滚动条，还需要减去滚动条的宽度。

接下来看看我们的style函数

 function style(element,pseduoElement){
      return element.currentStyle ? element.currentStyle : window.getComputedStyle(element,pseduoElement);
  };

这个函数做了兼容在不同浏览器获取到元素的style
这也是我们常用的获取style的方法