我可以使用 Javascript 从文档中删除字体大小声明吗？答案

【问题标题】：Can I remove font-size declarations from document with Javascript?我可以使用 Javascript 从文档中删除字体大小声明吗？
【发布时间】：2011-06-05 08:20:48
【问题描述】：

我想制作一个 Chrome 扩展程序（如此体面且有文档记录的 Javascript），从文档中删除所有 font-size 声明。

文档样式表：

document.styleSheets

样式表规则：

document.styleSheets[0].rules

规则声明（或者叫什么？）：

document.styleSheets[0].rules[0].style.fontSize

如何删除最后一个？我想使用浏览器的标准，所以不要将所有内容都设置为 100%。有没有办法删除所有font-size 样式？

（我不关心内联样式或 javascript 添加的样式。）

顺便说一句
有人知道为什么 .rules 对于 Stack Overflow 的 all.css 样式表是空的 (null) 吗？那里有很多样式，Chrome 使用它们。为什么我无法在 document.styleSheets 中访问它们？

【问题讨论】：

你能找到浏览器的默认 CSS 模板，然后从中提取值吗？
那将是很多工作。我认为重置用户/页面 css 更容易，但我可能错了。 style.removeProperty('font-size') 做了一些事情，但我不确定是什么。也许我正在处理错误的问题/解决方案（使用 document.styleSheets）..？
你能把所有字体大小设置为'继承'吗？
all.css 不为空，只需在 Chrome 控制台中输入 document.styleSheets 并查看 #0。
如果我在 Chrome 中这样做并向下钻取，我会看到 cssRules: null 和 rules: null。该资源是从一个单独的域提供的，所以我不知道 JavaScript 是否可以访问它。

标签： javascript css google-chrome-extension stylesheet font-size

【解决方案1】：

我认为这是不可能的，因为您无法访问从另一个域加载的样式表规则。这是一种类似于 AJAX 的安全限制同源策略。

【讨论】：

【解决方案2】：

如何通过清单注入custom css 并将字体大小覆盖为默认值：

* {font-size:1em !important;}
h1 {font-size:2em !important;}
h2 {font-size:1.5em !important;}
h3 {font-size:1.17em !important;}
h5 {font-size:.83em !important;}
h6 {font-size:.67em !important;}

用户代理样式表没有声明许多元素的大小，主要是针对标题。我找不到 Chrome 的确切默认样式表，但 here 是来自其他浏览器的一些，应该非常相似。

【讨论】：

+1 可能是最简单的解决方案。 FWIW，HTML4's recommended default stylesheet 确认了这些值。 Chrome 也是如此。
这不是最简单的解决方案...所有!important 都不会被覆盖，我只会添加更多CSS。编辑是的，所以也许这是最简单的解决方案 =( 但我也想重置 outline 和 line-height...
（顺便说一句，将它添加到清单中是行不通的，因为我希望它位于浏览器操作按钮后面，但这是细节。）

【解决方案3】：

尝试将其设置为空= ''
尝试将其设置为null
你可以试试javascriptdelete函数： http://www.openjs.com/articles/delete.php

【讨论】：

不工作。 ...style.removeProperty('font-size') 有效，但不知何故无法获得所有字体样式...
据我所知：您无法从其他域访问样式表。前两个是一样的。您也没有考虑到它可以在组合的 font: ... 声明中。最后一个是完全不正确的，因为 a.) delete 与主机对象可能相当不可预测 b.) delete 是 operator 而不是函数 - perfectionkills.com/understanding-delete