完全删除 CSS 属性

Remove CSS property completely

本文关键字：属性 CSS 删除      更新时间：2023-09-26

我有一个按钮，当单击它时会加载一个额外的CSS文件，该文件会覆盖大部分基本CSS文件。(如果您想知道，这是出于可访问性目的(

假设我有一个background，background-color属性用于多个选择器中，用于input[type='text']。我想重置/删除那些。我不想为这些背景属性设置新值，我想删除它们，以便浏览器将默认呈现一切。

这是因为

在 Firefox 中具有黑色背景颜色的高对比度模式下，任何设置为 input 或 button 的背景都将用等于文本颜色的值覆盖它，这将使输入或按钮的值不可读。但那是另一回事了...

编辑：由于到目前为止每个人都告诉我为这些设置一些新属性，所以我用粗体大写字母写它 - 我不需要为background设置新属性。 :)如果该属性存在，Firefox 在高对比度模式下设置的背景也是黑色，则其背后的原因也是黑色。要对此进行测试，请转到Preferences -> Content -> Colors并检查Allow pages to choose their own colors, instead of my selections above 。这是我的选项的外观。

您可以删除原始样式表。只需为其分配一个id并使用 jQuery.remove(...) .

另一种解决方案是更改第一个样式表以使用某种命名空间+，例如：

/* these are the rules that you want to be removed */
.stylesheet1       { }
.stylesheet1 h1    { }
.stylesheet1 p     { }
.stylesheet1 a     { }
.stylesheet1 input { }
/* these rules can co-exist with the next stylesheet */
nav                { }
article            { }
aside              { }
section            { }

在 HTML 中，将 stylesheet1 类添加到正文中。当你加载另一个CSS文件(大概是通过JavaScript(时，你删除了这个类。所有命名空间规则都将失效。

* CSS 预处理器(例如 SASS 和 LESS(使您可以更轻松地管理这些规则。

在

第一个 css 文件的开头执行 css 重置/规范化。然后在第二个开始时再做一次。您可以省略第一次重置，但这将为您提供一致的结果。

听起来最好的

解决方案是让两个不同的 CSS 类针对单个输入，并在两者之间来回切换。有几种方法可以做到这一点：

.CSS：

input[type="text"].a {...}
input[type="text"].b {...}

在这里，我们有两个不同的类， a 和 b .最初定义输入时，请设置 class="a" 。然后，我们将在单击按钮时将其与b交换。同样，有几种方法可以做到这一点：

j查询：

$('.a').click(function(){
    $(this).removeClass('a').addClass('b');
});

普通 JS

var button = document.querySelector('.a');
button.addEventListener('click', function(){
    button.classList.remove('a');
    button.classList.add('b');
});

这是实现这种行为的通常首选方法。它严格遵守标准，因为它将逻辑、标记和表示分成各自的部分。

注意：上面列出的普通JS方法使用了一些非常现代的本机JS代码。查看"您可能不需要 jQuery"以查找有关使此功能跨浏览器使用的建议。

我认为更好的方法是将这些额外的属性放在 CSS 类中，然后根据需要向元素添加或删除这个额外的类，而不是向元素添加或删除属性。如果您需要覆盖，请使用 !important .现在只是关于添加/删除类。

这是jQuery中的一个示例

.MyControl{background: blue;}
.MyControlAccessibility{background: red !important;}
$(SomeControl).click(function () { $(this).addClass('MyControlAccessibility'); }
$(SomeControl).click(function () { $(this).removeClass('MyControlAccessibility'); }

如前所述，在主体上使用全局类是很好的。

另一种方法是将浅色和深色"主题"特定样式放入与通用CSS不同的样式表中，然后禁用您不需要的样式表。这将避免冲突和需要使用!important，并且您可以保持干净，而不必破解jquery.css((的各种位。

例如

基地.css 

a { text-decoration:none; }

黑暗.css

body { background-color:#000; }
a {color:#fff; font-size:1.2em;}

光.css

a {font-size:1.5em;}

请注意，light.css 没有 background-color 等的属性，因此当它们从暗切换到亮时，将再次使用默认值。

要进行切换，您可以执行以下操作：

for (var i = 0; i < document.styleSheets.length; i++) {
    var ss = document.styleSheets[i];
    // some browsers store in url, others in href
    if((ss.href || ss.url || '').indexOf('dark.css') > -1) {
        ss.disabled = true;
    }
}

通过禁用而不是删除当前一个，应该更容易在两者之间切换。

相关文章：