JS获取CSS样式（style/getComputedStyle/currentStyle）

获取CSS样式是前端开发中非常重要的一项技能，可以帮助我们对网页的样式进行动态处理。JS获取CSS样式主要有三种方式：style、getComputedStyle和currentStyle，下面将分别进行详细讲解。

1. 使用style属性获取CSS样式

我们可以使用元素的style属性来获取它的内联样式。

<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div id="box" style="color: yellow;"></div>
<script>
    var box = document.querySelector('#box');
    console.log(box.style.width); // "100px"
    console.log(box.style.color); // "yellow"
</script>

使用style属性的优点是获取的是内联样式，能够获取到当前元素设置的所有样式。但缺点是只能获取内联样式，无法获取外部样式或者计算后的样式。

2. 使用getComputedStyle获取CSS样式

getComputedStyle是一种获取计算样式的方法，它获取的是最终渲染到页面上的样式，包括内联样式和外部样式。但需要注意的是，它获取的只是只读的样式，不支持修改。

<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div id="box" style="color: yellow;"></div>
<script>
    var box = document.querySelector('#box');
    var computedStyle = getComputedStyle(box);
    console.log(computedStyle.width); // "100px"
    console.log(computedStyle.color); // "rgb(255, 255, 0)"
</script>

3. 使用currentStyle获取CSS样式

currentStyle是IE浏览器专有的获取计算样式的方法，它能够获取到当前元素计算后的样式，包括内联样式和外部样式。

<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div id="box" style="color: yellow;"></div>
<script>
    var box = document.querySelector('#box');
    if (box.currentStyle) {
        console.log(box.currentStyle.width); // "100px"
        console.log(box.currentStyle.color); // "rgb(255, 255, 0)"
    } else {
        console.log('浏览器不支持currentStyle');
    }
</script>

需要注意的是，currentStyle只适用于IE浏览器，其他浏览器不支持此方法。

综上所述，使用getComputedStyle是我们最常用的获取CSS样式的方法，能够获取最终渲染到页面上的样式，并且在大多数浏览器中都支持。但在特殊情况下，如需获取元素的内联样式或者仅在IE浏览器中运行的代码中，也可以使用style属性和currentStyle方法。