在非我的页面上重新加载CSS

Question

我试图在JS中制作一些工具栏，作为GreaseMonkey脚本，我需要高对比度的选项。它们已经在几个页面上实现了，但我将把它们应用到任何我正在访问的网站。我有应用高对比度的按钮，它们工作得很好，但我不知道如何恢复默认的CSS。当我知道DOM树结构、类、it等时，我找到的每个解决方案在我自己的页面上使用都是很好的，但正如我所说的，它应该适用于任何页面。

我用来做对比的是：

    var OA_whiteBlack_f = function(){
    $("*").not("video").not("object").not("embed").css("cssText", "background: #000 !important; color: #fff !important;");
    };

如您所见，我添加了一些.not，以避免更换播放器(在youtube上仍然不起作用)

有什么办法可以在页面加载时恢复样式表计算组吗？

Answer 1

返回样式的问题是，如果在任何这些元素上都存在任何现有的内联样式，则首先需要存储它，可以使用data()进行存储。

请注意，cssText清除了可能在某些页面中出现问题的任何现有内联样式。

var $elements = $("*").not("video,object,embed").each(function () {
    var $el = $(this),
        currStyle = $el.attr('style') || '';
    $el.data('stored_style', currStyle ).css("cssText", "background: #000 !important; color: #fff !important;");
});

来撤销..。循环所有元素，并用存储的值替换样式属性。

$elements.each(function () {
    var $el = $(this);
    $el.attr('style', $el.data('stored_style'));
});