javascript - 如何以交互方式切换网页上的 CSS 工作表以进行测试/学习？

Question

我正在寻找可以适应切换所有样式表或选择网页上显示的样式表的不同方法，而无需注释多行代码，因为 CSS 中不允许嵌套注释。

背景:我正在尝试了解不同 css 工作表的不同效果，并希望这种交互对于非开发人员来说是所见即所得的。目前，我唯一拥有的东西found这是:

<a href="javascript:var%20i=0;if(document.styleSheets.length>0)
{cs=!document.styleSheets[0].disabled;
    for(i=0;i<document.styleSheets.length;i++)
        %20document.styleSheets[i].disabled=cs;};
    void(cs=true);">Toggle stylesheet</a>

我愿意接受 HTML、JS、Java、JQuery 或 CSS 实现。

澄清 - 可以使用 JQuery 选择样式表吗？因为如果可以选择样式表，这似乎是可能的。

对于那些一直关闭此帖子的人，给我一些反馈如何，以便我可以满足您的需求，而不是仅仅关闭帖子。如果您不知道，当您关闭它时，它会将我发送到常见问题解答页面，而不是您的反馈，我不知道要更改什么。另外，根据我的通知，还有其他人正在回答，但是当我回到帖子时，我看不到它，因为它已关闭，并且通知只包含前几个字，所以他们不是'很有帮助。

Answer 1

Chrome Developer Tools非常适合切换 CSS 样式，甚至添加样式，同时在您的页面上实时查看更改。

要使用，请在 Chrome 中打开您的页面，右键单击要检查的页面部分，然后选择“检查元素”。