Question

假设我有一个标准的stackoverflow问题页面，我想附加一个属性，如＆＃34; font-family：monospace＆＃34;使用Google Chrome扩展程序修复每个包含文本的元素。

这可以使用javascript吗？如果我理解正确，即使在每个元素标记上使用getElementsByTagName（），如果元素具有在页面CSS中给出不同值的类名，也会被覆盖。

Answer 1

您可以为<head>元素附加一个样式，定位所有元素（看作字体系列只会适用于文本元素）。

因此，在您的javascript中，您会在头部附加：

<style>
  *{
  font-family:monospace;
  }
</style>

请注意，出于安全原因，SO片段已包含在内，因此“正确”了。现场演示是不可能的。

演示片段

＆＃13;

$('#btn').click(function(){
    $('*').css("font-family","monospace");
    });

＆＃13;

div{
  font-family:"Arial";
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head></head>

<body>
hi. I'm text
  <button id="btn">change</button>
  <div>
    I've been given a font family already
    </div>
</body>

＆＃13;

如果你想强制这个（也就是说，如果该网站在他们的 font-family网站声明中使用了!important标记），可能然后必须添加可怕的!important标记，因为如果在网站的css中的任何地方使用过（很多），这将被覆盖。

这可以使用setProperty方法实现：

 this.style.setProperty( 'height', '0px', 'important' );
});

只是它的一个例子。

Answer 2

这是可能的。您可以遍历每个元素并添加样式。层次结构如下：

的.class
内联样式
.class !important

示例：.test-class {font-family:monospace !important }
带有!important

您可以阅读更多here

如何将特定的CSS属性添加到所有包含文本的元素

2 个答案: