getComputedStyle（）意外行为

Question

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

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

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

虽然它影响了它的孩子，但是{父母的 <rule name="Force Https" stopProcessing="true"> <match url="healthcheck.html" negate="true" /> <conditions> <add input="{HTTP_X_FORWARDED_PROTO}" pattern="https" negate="true" /> </conditions> <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" /> </rule> 样式属性是not inherited（粗体是我的）：

  

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

这看起来很奇怪，因为其他类似的属性，例如text-decoration，do inherit，但这只是它的方式（参见＆＃34;继承：否＆＃34;在桌面上here和/或here）。