用JS获取不到元素样式信息的"Bug"？

这是Bug吗？

相信很多人学习前端的时候都会有遇到一个问题，在JS中需要获取某个元素的宽高或者是绝对定位的位置信息，通常我们会这么写：

var elemWidth = elem.style.width;
console.log(elemWidth);  //(空字符串)

然而我们会发现什么也没获取到，这到底是个什么原因？

我们仔细观察一下我们是怎么获取这些信息的。通过元素的 style 属性，获取一个关于元素样式信息的对象，在里面取我们需要的样式信息。而我们是不是理所当然的认为我们写在 style 标签内的样式，或者通过 link 引入的样式表的样式信息都存在了元素的 style 这个属性中？

很遗憾，并不是这样，我们再想想我们什么时候对元素的 style 属性进行了修改。相信大家都写过内联样式，例如：

<div class="exp" style="width: 100px;">举个栗子</div>

这时候我们再来获取下元素的宽：

var elemWidth = document.querySelector(".exp").style.width;
console.log(elemWidth); //100px

相信看到这你们也知道是怎么回事了，只有在内联样式中定义的样式才能在JS中通过元素的 style 属性取得。

解决方式

这里列举我所知道的解决方式供大家参考：

1. 很明显，将需要获取的样式写在元素中，即使用内联样式的方式；

2. 在JS中要使用之前，先使用 elem.style.width=”100px”; 这样的方式初始化需要使用的样式，在后面也可以获取到其值；

3. 一些位置信息可以通过元素的 offsetXxx 属性来获取。