完全移除 CSS 属性

Posted

技术标签:

【中文标题】完全移除 CSS 属性【英文标题】:Remove CSS property completely 【发布时间】:2015-02-08 20:47:55 【问题描述】:

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

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

这是因为在高对比度模式下,Firefox 的正文为黑色背景色,任何设置为 inputbutton 的背景都将覆盖它,其值等于文本颜色,这将使该值输入或按钮不可读。但那是另一回事了……

编辑:由于到目前为止每个人都在告诉我为它们设置一些新属性,所以我用粗体大写字母来写 - 我不需要为 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 ...

这里我们有两个不同的类,ab。最初定义输入时,设置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;
    

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

【讨论】:

以上是关于完全移除 CSS 属性的主要内容,如果未能解决你的问题,请参考以下文章

jquery 移除导入的css

jquery移除CSS样式问题

CSS 表 <td> 填充不能完全移除 [重复]

markdown 移除元素的某个CSS属性

jq获取和设置标签的css样式jq给标签增加或移除class属性

jquery 点击增加样式,点击移除样式