ele.style.left在控制台输出为空？？

引入

遇到一个问题，需要获取元素的left值，想到通过element.style.left实现，运行以下代码:

    <style>
        .a{
            background-color: salmon;
            position: absolute;
            left: 300px;
        }
    </style>
    <div class="a">aa</div>
    <script>
        console.log(document.querySelector('.a').style.left);
    </script>

发现控制台并没有显示我们想要的内容，可css样式中明明设置了left值，为什么呢！？？

我们知道，设置样式可以在css样式表中，也可以通过内联样式设置，那么我们尝试一下另一种方法：

    <style>
        .a{
            background-color: salmon;
            position: absolute;
            /* left: 300px; */
        }
    </style>
    <!-- a设置内联样式 -->
    <div class="a" style="left: 300px;">aa</div>
    <script>
        console.log(document.querySelector('.a').style.left);
    </script>

噢！这次输出了"300px"！！ 可知，第一个demo是因为该样式是通过CSS样式表设置的，而不是通过元素的内联样式，所以document.querySelector('.a').style.left 返回空字符串。

解决方法:

1. 在html中写入内联样式
2. 或者在js中通过element.style.left = '300px'将元素样式设置为内联样式

获取元素样式的值

如果想获取元素样式的值（包括通过CSS样式表设置的样式），可以使用window.getComputedStyle方法，如下所示：

let element = document.querySelector('.a');    //a为元素类名
let computedStyle = window.getComputedStyle(element);
let leftValue = computedStyle.getPropertyValue('left');
console.log(leftValue);    //CSS样式表中设置了left: 300px;则输出"300px"(有带单位的字符串！）

总结

如果元素的样式不是内联样式（即通过内联style属性设置的），那么 element.style.left 将返回一个空字符串或 undefined，取决于浏览器的实现。该情况下可以使用window.getComputedStyle方法获取。

另外：这里得到的是带有单位的字符串，所以若要参与计算，可考虑使用parseInt、parseFloat或者正则表达式将其转换为数字。