Chrome - 禁用特定.css文件中的所有样式

时间:2013-05-31 19:07:02

标签: google-chrome google-chrome-devtools

检查网站时,是否可以禁用特定的.css文件?我可以在FireFox中执行此操作,但无法在Chrome中找到该选项。

6 个答案:

答案 0 :(得分:52)

如果要删除页面会话剩余部分的样式,请打开DOM Inspector,找到链接样式表的<link><style>元素,然后删除该元素。这会导致删除所有关联的样式。

如果您只想暂时停用样式表,请向disabled / <link>元素添加新属性<style>。删除此属性以再次启用样式表。

如果网站包含许多令人分心的DOM元素,您还可以访问控制台,例如document.styleSheets[0].disabled = true;(其中0是样式元素的索引)。

答案 1 :(得分:3)

这是基于Rob W的有用答案

只需将以下内容粘贴到控制台中,然后相应地更改索引值。

首次执行将禁用样式表,第二次执行将启用它。

var stylesheetIndex = 0;
var action = document.styleSheets[stylesheetIndex].disabled === false ? "Disabled " : "Enabled ";
document.styleSheets[stylesheetIndex].disabled = !document.styleSheets[stylesheetIndex].disabled;
console.log( action + "stylesheet:" + document.styleSheets[stylesheetIndex].href );

答案 2 :(得分:2)

一种方法是找到:

<link rel="stylesheet" href="yourstyle.css" />

将其更改为其他内容......

<link rel="stylesheet" href="yourstyleXXX.css" />

哪会阻止它工作......

我敢打赌,开发工具有一种方法可以......

问题是大多数人都在用预处理器连接和缩小他们的CSS ......所以在这些情况下你将无法采用这种方法。

答案 3 :(得分:0)

为Chrome安装“Web开发人员”扩展程序。然后,您将拥有各种选项,包括“编辑CSS”,您可以在其中动态更改任何CSS文件(或者只是完全删除其内容)。

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

答案 4 :(得分:0)

<script>

var stylesheet0 = document.styleSheets[0]; 
var stylesheet1 = document.styleSheets[1]; 
var stylesheet2 = document.styleSheets[2]; 

stylesheet0.disabled = true; 
stylesheet1.disabled = true; 
stylesheet2.disabled = true; 

</script>

答案 5 :(得分:0)

您可以在开发工具中打开“网络”选项卡,然后找到要禁用的特定 CSS 文件。右键单击它并选择“阻止请求 URL”,然后刷新页面(确保在开发工具顶部也选中了“禁用缓存”)。现在,当页面加载时,对该特定 CSS 文件的请求将被阻止。您也可以再次右键单击它并取消阻止它。

enter image description here