在书签中重置 CSS 属性答案

【问题标题】：Resetting CSS properties in bookmarklet在书签中重置 CSS 属性
【发布时间】：2015-05-10 08:23:59
【问题描述】：

我正在尝试通过小书签将新的 <div> 元素与一些内容附加在一起，并添加一些内联 CSS。

问题是主页面的 CSS 通常也会影响这个 div。

什么是首选方法来确保书签中的样式始终比任何父页面中的样式更重要？

最值得信赖的解决方案是为 div 中的每个元素设置所有可能的 CSS 属性。这是明智的吗？我在哪里可以得到清单？

我发现cleanstate.css 可以进行重置。

也许一些 js 解决方案会更好用？例如。检测主页应用了哪些样式，并将它们重置为默认值？无论如何，我将在此书签中提供 jQuery。

【问题讨论】：

您的意思是在样式属性的末尾使用 !important：例如 background-color: green !important;
!important 对于我的样式是不够的，我需要在所有样式上使用 !important，而不仅仅是我设置的少数样式。我希望新的 div 表现得像一个单独的页面。
可能在父样式链接之后包含<link... 样式文件。这将确保您的所有子 div 覆盖父 div。例如<link rel="stylesheet" href="parentStyle.css"> <link rel="stylesheet" href="childStyle.css">.

标签： javascript jquery css reset bookmarklet

【解决方案1】：

可靠的解决方案是 iframe。

您可以动态创建它并使用 src 标签中的 'javascript:' 协议分配内容。

var iframe = document.createElement('iframe');

iframe.src = "javascript:'<div> Yours Content </div>'";
document.body.appendChild(iframe);

或者您可以插入空的 iframe，等待它加载并根据需要修改 iframe 文档。例如：

var iframe = document.createElement('iframe');

iframe.src = 'about:blank';
document.body.appendChild( iframe  );

iframe.onload = function() {
  iframe.contentWindow.document.body.innerHTML = '<div> Yours content </div>';
};

或者，您可以创建单独的 .html 页面并将其作为 iframe 插入。 <iframe src="http://example.com">虽然，您需要在某处托管页面，并且如果没有额外的脚本，文档将无法访问父页面。 (.postMessage())

【讨论】：