在哪里可以将CSS添加到我正在查看的页面?我不想直接在一个元素中添加样式,我想在编辑网站的style.css之前向页面添加“文档”以调试更改。
请注意,这里有很多关于“从Chrome扩展程序中注入CSS”的问题,但具体来说我想通过“Chrome开发者工具”来实现。
答案 0 :(得分:32)
我不确定它是否有效,但你必须尝试。
在Mac上按 F12 /( Cmd + opt + I )打开开发者控制台转到控制台选项卡。
复制粘贴以下代码(编辑路径):
$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');
或者,您可以编辑一个属性,以便Chrome创建inspector-stylesheet.css,并在那里复制CSS源。
答案 1 :(得分:3)
为什么不像这样一种简单的框架不可知的单行?
document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('ref', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}())
似乎像魅力一样......
答案 2 :(得分:2)
这应该有效(粘贴到控制台,根据需要在最后一行编辑参数):
(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文件的文档中没有头标记,请尝试body
作为最后一个参数:
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','body');
答案 3 :(得分:1)
这就是您所追求的目标吗?:“如何直接在Chrome中编辑源文件”http://www.sitepoint.com/edit-source-files-in-chrome/
答案 4 :(得分:1)
这些事情看似复杂,但很容易-
第一种检查员样式表:
打开检查元素( F12 或 Cntrl + Shift + I )
转到元素标签,如果还没有,请参见样式标签,现在在右上角将显示 + 图标,单击它(或者长按该图标,如果它没有自动添加 inspector-stylesheet ),它将在当前元素旁边添加当前突出显示的元素的选择器选择器,将有一个链接/按钮 inspector-stylesheet ,单击它,将带您进入一个窗口,您可以在其中添加样式。
第二种方式,代码段:
打开检查元素( F12 或 Cntrl + Shift + I )
转到来源标签,转到代码段标签,点击 +新代码段,将其命名为任意名称,然后添加此:
(function(){
let style = `<style>
/*change your style here*/
body{
display:none;
}
</style>`;
document.head.insertAdjacentHTML("beforeend", style);
})();
保存并运行它( Cntrl + Enter )。
在FireFox中更容易:
打开检查元素( F12 )
转到样式编辑器,单击 + 图标,您将能够编辑样式;您也可以导入样式,只需单击 + 旁边的图标即可。
答案 5 :(得分:1)
首先,这是我使用Firefox进行教学和自己的开发工作的原因之一。答案是内置的。
作为上述答案的一种变体,您可以使用现代JavaScript,添加如下所示的硬编码样式:
document.head.insertAdjacentHTML('beforeend','<style> … </style>');
或者您可以如下添加外部样式表:
document.head.insertAdjacentHTML('beforeend','<link rel="styleshet" href="…">');
beforeend
参数是为了帮助注入的CSS覆盖以前加载的样式。
如果要重复执行此操作,则可以使用Bookmarklet Crunchinator之类的方法将其添加为书签。
该技术类似于我在JavaScript类中教的技术,在该类中,我使用afterbegin
注入一些默认CSS,但是允许用户样式表覆盖默认值。
答案 6 :(得分:0)
转到开发工具中的“源”选项卡,右键单击左列,然后将文件夹添加到工作区,并使用文件资源管理器选择包含css文件的文件夹。您将不得不允许进行更改,一旦您执行此操作,您将在源代码树中看到您的文件夹(确认您在源选项卡下选择文件系统选项卡),打开您的文件夹找到该文件并右键单击您的css文件并选择映射到网络资源。映射文件后,您可以打开并在工作区中查看该文件,并且从该文件中进行的任何更改都将影响页面样式。所以基本上你的风格会超过服务款式。
答案 7 :(得分:-1)
您可以使用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; }');