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

Question

假设我有一个标准的 Whosebug 问题页面，我想通过使用 Google Chrome 扩展将 "font-family: monospace" 等属性附加到每个包含文本的元素。

这可以使用 javascript 吗？如果我理解正确，即使在每个元素标签上使用 getElementsByTagName() 也会被覆盖，如果元素具有 class 名称，而这些名称在页面的 CSS.

中被赋予了不同的值

Answer 1

您可以将样式附加到您的 <head> 元素，以所有元素为目标（因为字体系列无论如何只适用于文本元素）。

因此，在您的 javascript 中，您将在头部附加以下内容：

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

请注意，出于安全原因，包含 SO 片段，因此 'proper' 现场演示不在此处。

演示片段

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

div{
  font-family:"Arial";
  }

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

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

这将使用 setProperty 方法实现：

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

只是一个例子。

Answer 2

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

.class
内联样式
.class 与 !important

示例：.test-class {font-family:monospace !important }
内联样式 !important

你可以阅读更多here

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

How to add specific CSS attributes to all text-containing elements

html

javascript

css

google-chrome-extension