我可以使用不存在的CSS类吗?

270

我有一个表格,通过jQuery和一个不存在的CSS类来显示/隐藏整列:

<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>

通过jQuery,我可以使用这个DOM仅用一行代码来达到这个效果:$('.target').css('display','none');

这个方法很有效,但是使用未定义的CSS类是否合法呢?我应该为它创建一个空类吗?

<style>.target{}</style>

有副作用吗?或者有更好的方法来做这件事吗?


9
我认为这没有什么问题,但我希望它能够成为样式表的一部分,而不是使用“.css”文件。使用“.css”文件设置的样式很难被覆盖,容易引起其他问题,所以我倾向于避免使用它们。 - Kevin B
8
顺便提一下,你可能想使用.toggle(),这会让你的代码更短一点。 - Math chiller
4
在使用Visual Studio + ReSharper时,如果您使用了未定义的类,则会收到警告。这对于我只是打错字的情况非常有帮助,但在某些情况下却很烦人。在这种情况下,您可以选择添加空样式或禁用警告(或忽略它)-就个人而言,我会添加空样式。我不知道其他任何IDE是否表现类似。 - Joe Enos
9
有些人不仅认为这是可能的,而且明确建议这样做。由于您的“目标”是用于JavaScript的目的,许多人使用前缀“js-”来命名这些类,例如“js-target”。顺便说一句:Target是一个不太好的名称。有关更多信息,请参见:http://philipwalton.com/articles/decoupling-html-css-and-javascript/。 - k0pernikus
1
https://dev59.com/_XE85IYBdhLWcg3wVR2g 或多或少是一个没有误解的副本。 - naught101
显示剩余4条评论
13个回答

5
如果您在HTML元素上应用了一个类,但该类在CSS中未定义,则不会产生任何效果。这是一种常见的做法,就像Aamir Afridi所说的那样,如果您只是为JS使用类,则最好在它们前面加上js-。对于HTML元素的id属性也是如此。

4
完全可以使用类来查询元素,我曾经将这些类命名为 sys- 前缀(例如,我会将您的类命名为 sys-target),以区分用于样式的类。这是一些微软开发人员过去使用的惯例。我还注意到越来越多的人使用 js- 前缀来完成此目的。
如果您不习惯将类用于除了样式之外的用途,我建议使用 Role.js jQuery 插件,该插件允许您使用 role 属性实现相同的目的,因此,您可以将标记编写为 <td role="target"> 并使用 $("@target") 进行查询。该项目网页有良好的描述和示例。我在大型项目中使用此插件,因为我真的很喜欢将类仅用于样式目的。

3

请参考jQuery验证引擎。即使在那里,我们也使用不存在的类来在HTML属性上添加验证规则。因此,在使用未在样式表中声明的类时没有任何问题。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接