完全移除 CSS 属性
Posted
技术标签:
【中文标题】完全移除 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;
通过禁用而不是删除当前的,应该更容易在两者之间切换。
【讨论】:
以上是关于完全移除 CSS 属性的主要内容,如果未能解决你的问题,请参考以下文章