getComputedStyle()意外行为

Question

在下面的代码示例中，我希望看到控制台日志中的下划线。相反，我看到none。

如何从underline中的text-decoration属性提取#one .yo值

​

setTimeout(function() {
  var $el = document.querySelectorAll('#one .yo')[0];
  var css = getComputedStyle($el).cssText;

  console.log("text-decoration is set to:");
  console.log(/text\-decoration\: ([^\;]+)/g.exec(css)?.[1] + '!');
  console.dir($el);
  console.log(window.getComputedStyle($el));

  var $el2 = document.querySelectorAll('#two .yo')[0];
  $el2.style.cssText = css;
}, 750);

* {
  margin: 0;
  padding: 0;
}
#one {
  color: blue;
  text-decoration: underline;
}

<div id="one">
  <div class="yo">what's up</div>
</div>

<div id="two">
  <div class="yo">what's up</div>
</div>

​

Answer 1

虽然它会影响它的子类，但是父元素的text-decoration样式属性是非遗传 (粗体是我的)：

文本装饰是，技术上不是继承的，但效果类似于继承。如果将它们设置在内联元素上，则它们适用于该元素生成的所有框。(...)

这看起来很奇怪，因为其他类似的属性，如font-size、继承，但这正是它的方式(参见表这里和/或这里中的"Inherited: no“)。