完全移除 CSS 属性

Posted 2023-02-22

【中文标题】完全移除 CSS 属性

【英文标题】：Remove CSS property completely

【发布时间】：2015-02-08 20:47:55

【问题描述】：

我有一个按钮，单击该按钮会加载一个附加的 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。 Here's how my options look.

【问题讨论】：

大多数属性都可以使用initial关键字；它将值重置为浏览器默认值。

已经试过了，不行。正如我所说，我不想为现有属性设置新值，我想完全删除它们。

你不能用新的样式表重新加载页面，而不是动态加载它吗？如果您出于可访问性原因这样做，我个人认为这是合理的。

与其添加或删除属性，更好的方法是将这些额外的属性放在一个 CSS 类中，然后添加或删除这个额外的类。如果您需要覆盖，请使用 !important。现在只是添加/删除类。

我确信这是不可能的。如果website，您可以做的最好的就是加载具有其他样式、其他主题的同一页面。

【参考方案1】：

您可以删除原始样式表。只需为其分配一个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 让您更轻松地管理这些规则。

【讨论】：

删除原始样式表可能是我唯一也是最好的解决方案。尽管您的替代解决方案无法解决问题，因为它只会用另一个值覆盖该属性，这不是我想要的。

回复。替代解决方案：不，它不建议您在 body 上添加另一个类并创建另一组命名空间规则。只需删除该类，第一个样式表规则将不再匹配。

【参考方案2】：

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

【参考方案3】：

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

CSS：

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

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

jQuery：

$('.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 代码。查看You Might Not Need jQuery 以找到使此功能跨浏览器的建议。

【讨论】：

这实际上是个好主意，但由于我的样式直接设置为输入，这对我不起作用。

这没有任何意义。即使您无法在标记中添加class="a"（这是公平的，可能会有大量输入）。只需从上面的示例中完全删除 a 类。有一组以input[type="text"] 为目标的样式和一个以input[type="text"].b 为目标的单独 集。然后在必要时添加或删除b。您只需要定义样式。

我想我只是要删除现有的样式表并加载新的样式表，而不是在主要的样式表之上加载新的样式表。

【参考方案4】：

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

这是一个 jQuery 的例子

.MyControlbackground: blue;
.MyControlAccessibilitybackground: red !important;

$(SomeControl).click(function ()  $(this).addClass('MyControlAccessibility'); 
$(SomeControl).click(function ()  $(this).removeClass('MyControlAccessibility'); 

【讨论】：

请永远不要使用!important。如果你发现自己在使用它，那么你可能做错了 CSS。

@JordanForeman：不，创建功能的人没有这样做，因为他们错了。有些人滥用它，有些人不理解它。但它实际上是为这种极端情况而设计的。

我想你是对的，它的存在是有原因的。虽然您的方法是非常 少数使用!important 确实有意义的实例之一，但鉴于OP 的目标，我不认为这是正确的方法。我有偏见，因为这不是我的答案：p 而且，最佳实践是最佳实践是有原因的。在极少数情况下，我认为这是 最佳 方法（关于遵守 Web 标准、易于阅读、关注点分离等）。此外，我将把它留在这里： css-tricks.com/when-using-important-is-the-right-choice

【参考方案5】：

如前所述，在 body 上使用全局类很好。

另一种方法是将您的明暗“主题”特定样式与通用 CSS 分开放置在单独的样式表中，然后禁用您不想要的样式。这将避免冲突和需要使用!important，并且您可以保持干净，而不必修改 jquery.css() 的各个部分。

例如

base.css

a  text-decoration:none; 

dark.css

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

light.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;
    

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