269

我有一个表，我通过一个不存在的 CSS 类显示/隐藏 jQuery 的完整列：

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

有了这个 DOM，我可以通过 jQuery 在一行中做到这一点：$('.target').css('display','none');

这非常有效，但是使用未定义的 CSS 类是否有效？我应该为它创建一个空类吗？

<style>.target{}</style>

是否有任何副作用或有更好的方法来做到这一点？

4

13 回答 13

495

“CSS 类”是用词不当；class是您分配给 HTML 元素的属性（或就脚本而言的属性）。换句话说，您在 HTML 中声明类，而不是 CSS，因此在您的情况下，“目标”类实际上存在于这些特定元素上，并且您的标记完全有效。

这并不一定意味着您需要在 HTML 中声明一个类，然后才能在 CSS 中使用它。见 ruak 的评论。选择器是否有效完全取决于选择器语法，并且 CSS 有自己的一套规则来处理解析错误，这些规则都与标记无关。本质上，这意味着 HTML 和 CSS 在有效性方面是完全独立的。1

.target一旦你理解了这一点，你就会清楚在你的样式表中不定义规则没有副作用。2当您将类分配给您的元素时，您可以通过这些类在样式表、脚本或两者中引用这些元素。两者都不依赖于另一个。相反，它们都引用标记（或者更准确地说，它的 DOM 表示）。即使您使用 JavaScript 来应用样式，这一原则也适用，就像您在 jQuery 单行器中所做的那样。

当您使用类选择器编写 CSS 规则时，您所说的只是“我想将样式应用于属于该类的元素”。类似地，当您编写脚本以通过某个类名检索元素时，您是在说“我想对属于该类的元素做一些事情”。是否存在属于所讨论类的元素完全是一个单独的问题。

1 这也是为什么CSS ID 选择器匹配具有给定 ID 的所有元素的原因，而不管该 ID 仅出现一次还是多次（导致不符合标准的 HTML 文档）。

2 我所知道的唯一需要像这样的空 CSS 规则的情况是某些浏览器由于错误而拒绝正确应用某些其他规则；创建空规则将导致由于某种原因应用这些其他规则。有关此类错误的示例，请参见此答案。然而，这是在 CSS 方面，因此应该与标记无关。

于 2013-09-09T15:25:19.617 回答
66

使用没有样式的类没有不良影响。事实上，CSS 的部分用处在于它与标记分离，并且可以设置或不设置元素/类/等的样式。如所须。

不要将它们视为“CSS 类”。将它们视为 CSS 碰巧在需要时也使用的“类”。

于 2013-09-09T15:25:13.490 回答
48

根据HTML5 规范：

类属性的值必须是一组以空格分隔的标记，表示元素所属的各种类。...作者可以在类属性中使用的标记没有其他限制，但鼓励作者使用描述内容性质的值，而不是描述所需内容呈现的值。

此外，在版本 4中：

class 属性在 HTML 中有几个角色：

  • 作为样式表选择器（当作者希望将样式信息分配给一组元素时）。
  • 用于用户代理的通用处理。

您的用例属于第二种情况，这使其成为使用类属性的合法示例。

于 2013-09-10T01:25:26.270 回答
40

您可以使用没有样式的类，这是完全有效的 HTML。

CSS 文件中引用的类不是类的定义，它用作样式选择器规则。

于 2013-09-09T15:24:56.067 回答
25

当您在 JavaScript 中使用类名时，它不会查看 CSS 来查找该类。它直接在 HTML 代码中查找。

所需要的只是类名在 HTML 中。它不需要在 CSS 中。

事实上，许多人认为将单独的类与 CSS 和 Javascript 一起使用实际上是一个好主意，因为它允许您的设计人员和编码人员独立工作，而不会通过使用彼此的类而妨碍彼此。

（注意，上一段显然更适用于较大的项目，所以如果你自己工作，不要觉得你必须走到这个极端；我提到它是为了说明两者可以完全分开)

于 2013-09-09T15:30:08.743 回答
13

您可以不使用CSS类而使用它，但我建议如果您只是为 JavaScript/jQuery 代码添加 CSS 类，请为其添加前缀，js-YourClassName这样前端开发人员就永远不会使用这些类来设置元素的样式。他们应该明白，这些类可以随时删除。

于 2013-09-09T16:21:51.067 回答
10

在 HTML 中添加 Class 的那一刻，Class 将被定义，因此您的解决方案完全没问题

于 2013-09-09T15:25:14.960 回答
10

不必在样式表中定义CSS类。它应该工作得很好。但是，添加它不会有害。

于 2013-09-09T15:25:44.060 回答
8

这里没有人完全提到的一件事是 JavaScript（在这种情况下由 jQuery 辅助）不能直接修改文档的级联样式表。jQuery 的css()方法只是改变了匹配的元素的style属性集。CSS 和 JavaScript 在这方面完全不相关。

$('.target').css('display','none');根本不会更改您的.target { }CSS 声明。相反，这里发生的是任何带有class“目标”的元素现在看起来像这样：

<element class="target" style="display:none;"></element>

没有预定义 CSS 样式规则是否有任何副作用？没有任何。

有一个更好的方法吗？性能方面，是的！

如何提高性能？

style您可以预先定义一个新类并使用addClass()（另一种 jQuery 方法）将其添加到匹配的元素中，而不是直接修改每个元素的。

基于这个与 比较的预先存在的 JSPerf，我们可以看到它实际上要快得多：css()addClass()addClass()

css() 与 addClass()

我们如何自己实现这一点？

首先，我们可以添加新的 CSS 声明：

.hidden {
    display: none;
}

您的 HTML 将保持不变，这个预定义的类只是为了供以后使用。

我们现在可以修改 JavaScript 来使用addClass()：

$('.target').addClass('hidden');

运行此代码时，不是直接修改style每个匹配的“目标”元素的属性，而是添加了这个新类：

<element class="target hidden"></element>

使用新的“隐藏”类，此元素将继承 CSS 中声明的样式，并且您的元素将被设置为不再显示。

于 2013-09-30T09:27:33.500 回答
6

正如许多其他人所提到的，是的，使用没有分配 CSS 的类是完全有效的，而不是将它们视为“CSS 类”，您应该简单地将类和 ID 的语义分别识别为组和单个元素。

我想加入，因为我觉得这个例子没有提出一个重要的观点。如果您需要对可变长度的元素进行可视化操作（在这种情况下，您使用的是表格行），那么认识到通过 Javascript 执行此操作的成本可能非常昂贵（例如，如果您有数千行）。

在这种情况下，假设我们知道第 2 列总是有可能被隐藏（这是您的表格的一个有意识的功能），那么设计一个 CSS 样式来处理这个用例是有意义的。

table.target-hidden .target { display: none; }

然后，我们只需在一个（我们的表）上切换一个类，而不是使用 JS 遍历 DOM 找到 N 个元素。

$("table").addClass("target-hidden")

通过为表格分配一个 ID，这会更快，您甚至可以使用:nth-child选择器来引用该列，这将进一步减少您的标记，但我无法评论效率。这样做的另一个原因是我讨厌内联样式，并且会不遗余力地根除它！

于 2013-09-11T08:23:22.810 回答
5

如果您在 HTML 元素上应用一个类，并且该类未在 CSS 中定义，则它将无效。这是一种常见的做法，就像 Aamir afridi 所说，如果您仅出于 js 的目的使用类，最好在它们前面加上 js- 。

它不仅对 calsses 有效，对 html 元素的 id 属性也有效。

于 2013-09-10T08:19:27.427 回答
4

使用类来查询元素完全没有问题。我曾经给这些类名加上sys-前缀（例如，我将命名你的 class sys-target）以将它们与用于样式的类区分开来。这是过去一些微软开发人员使用的约定。我还注意到js-为此目的使用前缀的做法越来越多。

如果您不习惯将类用于样式以外的目的，我建议您使用Role.js jQuery 插件，它允许您使用role属性实现相同的目的，因此，您可以将标记编写为<td role="target">并使用$("@target"). 项目页面有很好的描述和示例。我将这个插件用于大型项目，因为我真的很喜欢保留类仅用于样式目的。

于 2013-09-11T07:08:28.027 回答
3

请参阅jQuery验证引擎。即使在那里，我们也使用不存在的类在HTML属性上添加验证规则。因此，使用未在样式表中实际声明的类并没有错。

于 2013-09-13T04:26:54.667 回答