javascript - getComputedStyle()异常行为

This question already has answers here:

text-decoration: apparent discrepancy between appearance and computed values
                                
                                    （3个答案）
                                
                        
                                3年前关闭。
            
                    
在以下代码示例中，我希望在控制台日志中看到下划线。相反，我看不到。

如何从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('%c Oh my heavens! ', 'background: #222; color: #bada55');
  console.log('%c ' + /text\-decoration\: ([^\;]+)/g.exec(css)[1] + '!', 'font-weight: bold; font-size: 22px');
  console.dir($el);
  console.log(window.getComputedStyle($el));
  debugger;

  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 up</div>
</div>

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

最佳答案

尽管它影响其子元素，但[父级]的text-decoration样式属性为not inherited（粗体是我的）：


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


这似乎很奇怪，因为其他类似的属性，例如font-size，do inherit，但这就是它的样子（请参见表here和/或here的“继承：否”）。