Question

最近我想知道编辑元素样式不是通过在dom上切换它们的类，而是通过更改css类或选择器的实际规则集。所以不是像

那样的东西

$('.some').hide()

或

$('.some').addClass('hidden')

为什么不直接用document.styleSheets和东西改变规则？这种方法通常不会更具性能，至少对于许多元素而言，因为我们让浏览器本地处理规则集更改吗？

您可以将样式添加到.some，例如display: none;，并且所有.some元素都将被隐藏。无需迭代js中的所有元素并手动隐藏它们（如上例所示）。

直接更改规则集更可能会鼓励具有上下文感知能力的类（或者你会称之为..），因为你隐藏了所有#persons > .item或其他东西。

我仍然不了解关于以上下文命名的类的最佳实践，例如.calendar .ticket .item之类的控件名称，而不是{{1}这样的单一功能类1}} .hidden .left，因为我通常需要两种类型的约定。

我只是问你对此有什么看法，以及修改样式表方法的优点和缺点与jquery等库如何处理更改样式有什么区别？

另外，您认为什么是良好做法，您认为什么是黑客？

咳嗽 javascript和黑客咳嗽

Answer 1

由于实现方式不同以及缺少规则选择器API，操作document.styleSheets非常棘手。目前，如果要在样式表中操作规则，则必须完成此过程：

iterate over document.styleSheets
    iterate over rules within current styleSheet object
        if rule matches our class, edit the rule styles

然后是级联问题。您如何知道您匹配的规则上的特定样式不会被页面样式表中某处的不同规则覆盖？如果你在更改了你找到的第一个匹配规则后拯救了，你不能确定你设置的样式是否会实际应用到元素，除非你在每一个上粘贴!important，这将留下你有一整套不同的问题。

即使您操作了样式表规则，浏览器仍然还有相同的工作 - 它必须通过应用级联重新计算所有样式。

所以，操纵styleSheets现在看起来并不太吸引人，是吗？坚持班级转换，相信我。使用jQuery和现代API（如querySelectorAll）可以快速完成，浏览器仍然可以完成所有艰苦的工作，例如重新计算样式值。

Answer 2

这个棘手的问题:(

但是如果你拿样板文件，它有一些标准的类可以使用：

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: ; position: absolute; width: 1px; }

 /* Hide visually and from screenreaders, but maintain layout */
 .invisible { visibility: hidden; }

它变得棘手的是，如果它是你需要隐藏的东西因为JS，那么你应该只用JS隐藏它。然后，如果JS被禁用，它将起作用。如果它不依赖于JS，那么你将它隐藏在HTML中。

所以JS函数=用JS隐藏（通过使用JS或添加隐藏类）

基本HTML hide =使用HTML类隐藏

Styleswitching vs JS切换

基本上，JS切换为您提供了添加效果等的机会，只是稍微使用了预定义的类限制。但是很想看到一些资源比较：）

css：更改规则集与使用选择器切换类/应用样式

2 个答案: