42

在哪里可以将 CSS 添加到我正在查看的页面？我不想直接向一个元素添加样式，我想在编辑网站的 style.css 之前向页面添加“文档”以调试更改。

请注意，这里有很多关于“从 chrome 扩展中注入 CSS”的问题，但具体来说，我想通过“Chrome 开发人员工具”来解决。

4

9 回答 9

39

我不确定它是否有效，但你必须尝试。

按F12/（在 Mac 上为Cmd+ opt+ I）打开开发者控制台并转到控制台选项卡。

复制粘贴以下代码（编辑路径）：

$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');

或者，您可以编辑一个属性，以便由 Chrome 创建inspector-stylesheet.css，然后复制您的 CSS 源代码。

于 2013-10-18T09:22:49.220 回答
26

有多种方法可以做到这一点，而且它们也很容易。

第一种方式，检查器样式表：

打开检查元素（F12或Ctrl+ Shift+ I）

转到Elements选项卡（Ctrl+ Shift+P并键入show elements），如果您不在那里，请查看Styles选项卡，现在在右上角看到，会有一个+图标，单击它（如果没有，则长按该图标' t 自动添加inspector-stylesheet )，它将添加当前突出显示元素的选择器，在选择器旁边，会有一个链接/按钮inspector-stylesheet，单击它，它将带您一个窗口，您可以在其中添加样式。

第二种方式，编辑为 HTML

打开检查元素（F12或Ctrl+ Shift+ I）

转到元素面板（Ctrl++并键入show element panelShift）。p

滚动到head元素，右键单击该元素并选择Edit as HTML，转到该元素的底部 ( Ctrl+ End)，<style></style>在该元素中添加您的元素，在该元素中添加您的样式，然后点击Ctrl+ Enter。

第三种方式，片段：

打开检查元素（F12或Ctrl+ Shift+ I）

转到Source选项卡，转到Snippets选项卡，单击+ New snippet，将其命名为您想要的任何名称，然后添加：

创建新的片段Ctrl++类型创建新的片段命中，如果需要，重命名片段，然后添加（编辑样式）Shift：PEnter

(function(){
    let style = `<style>
/*change your style here*/
body{
        display:none;
    }
</style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();

保存它，运行它（Ctrl+ Enter）。

你也可以这样运行代码片段：Ctrl+ ptype ! 它将显示您保存的片段，选择您要运行的片段。

要编辑或查看您的片段，请Ctrl+ Shift+P输入show snippets。

在 FireFox 中它更容易：

打开检查元素 ( F12)

转到样式编辑器，单击+图标，您将能够编辑样式；您也可以导入样式，只需单击+旁边的图标。

于 2019-02-10T06:34:33.250 回答
15

首先，这是我使用 Firefox 进行教学和自己的开发工作的原因之一。答案是内置的。

作为上述答案的变体，使用现代 JavaScript，您可以添加硬编码样式，如下所示：

document.head.insertAdjacentHTML('beforeend','<style> … </style>');

或者您可以添加外部样式表，如下所示：

document.head.insertAdjacentHTML('beforeend','<link rel="stylesheet" href="…">');

该beforeend参数是为了帮助注入的 CSS 覆盖以前加载的样式。

如果您要重复执行此操作，则可以使用Bookmarklet Crunchinator之类的工具将其添加为书签。

该技术类似于我在 JavaScript 课程中教授的技术，我在其中afterbegin注入一些默认 CSS，但允许用户样式表覆盖默认值。

于 2019-04-10T22:24:54.987 回答
3

为什么不像这样一种简单的框架不可知单线？

document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('rel', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}())

似乎像一个魅力一样工作......

于 2017-10-25T11:35:27.750 回答
1

这应该可以工作（粘贴到控制台，根据需要在最后一行编辑参数）：

(function(i,n,j,e,c,t,css){
  css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;
  t.insertAdjacentElement('beforeend',css);})
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','head');

这将插入一个<link>

带一个href//fonts.googleapis.com/css?family=Roboto

收盘前</head>

如果您尝试添加 css 文件的文档中没有 head 标签，请尝试body作为最后一个参数：

(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','body');
于 2016-02-04T00:09:45.963 回答
0

这是你所追求的吗？：“如何在 Chrome 中直接编辑源文件” http://www.sitepoint.com/edit-source-files-in-chrome/

从那篇文章：

第 1 步：启动开发人员工具。转到查看 -> 开发人员 -> 开发人员工具。导航到“来源”

第 2 步：单击文件系统选项卡，然后单击 + 将文件夹添加到工作区。系统会提示您找到工作文件夹，Chrome 会要求您确认是否允许访问。

第 3 步：编辑并保存您的代码并刷新浏览器以查看您的更改

于 2013-10-18T09:18:52.400 回答
0

您可以使用 Chrome Devtools 中的代码片段注入 CSS。保存并执行代码片段，然后在控制台或另一个代码片段中调用它：

function insertCss(code) {
  var style = document.createElement('style');
  style.type = 'text/css';

  if (style.styleSheet) {  // IE
    style.styleSheet.cssText = code;
  } else { // Other browsers
    style.innerHTML = code;
  }
  document.getElementsByTagName("head")[0].appendChild( style );
}

// run the snippet as follows:
insertCss('span { color: red !important; }');
于 2020-01-28T19:45:56.627 回答
0

自 2018 年 Chrome (65) 以来，浏览器的集成 DevTools 具有称为Local Overrides 1的功能。因此，不需要像 StyleBot、Stylish 或 Greasemonkey 这样的附加组件或扩展。

本地覆盖允许在任何实时站点上重写 CSS、JS 和 DOM。更改保存在本地文件夹中，它们会覆盖实​​时环境的内容。

这可以在下面访问Developer Tools > Sources >> Overrides

这允许您选择包含 CSS 和 JS 的自定义本地文件夹，这些文件夹将覆盖当前网站自己的 CSS 和 JS。

开发者工具 > 来源 > 结束

于 2021-12-18T07:22:27.637 回答
0

转到开发工具中的源选项卡并右键单击左列，然后将文件夹添加到工作区并使用文件资源管理器选择包含您的 css 文件的文件夹。您必须允许进行更改，一旦您这样做，您将在源树中看到您的文件夹（确保您在源选项卡下选择文件系统选项卡），打开您的文件夹找到文件并右键单击您的 css 文件并选择映射到网络资源。映射文件后，您可以在工作区中打开并查看它，并且从该文件中所做的任何更改都会影响页面样式。所以基本上你的风格会超越服务风格。

于 2017-11-30T22:10:12.820 回答