javascript - CSS样式在JavaScript中输出空字符串

Question

我正在尝试获取 JavaScript 中元素的 padding 值。方法如下:

var textWrapper = document.getElementById('textWrapper');
console.log(textWrapper.children[0].style.padding);

它输出一个空字符串，即使在 css 样式中，padding 设置为 10px。我做错了什么，我该如何解决？

JSFiddle

console.clear()

var textWrapper = document.getElementById('textWrapper');
console.log(textWrapper.children[0].style.padding);

.text {
  width: 200px;
  height: 50px;
  padding: 10px;
}

<div id="textWrapper">
  <div class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div class="text">Duis aute irure dolor in reprehenderit</div>
  <div class="text">Excepteur sint occaecat cupidatat non</div>
  <div class="text">"Sed ut perspiciatis unde omnis iste natus error sit</div>
</div>

Answer 1

.style 属性获取内联 CSS。使用 getComputedStyle()相反。

el = document.getElementById('textWrapper')
style = window.getComputedStyle(el)
padding = style.getPropertyValue('padding')