JavaScript和CSS中使用短划线

Question

我开始学习一些JavaScript，并了解到在命名标识符时不允许使用破折号。然而，在CSS中，常用破折号来表示ID和类。

在CSS中使用破折号是否会干扰JavaScript交互呢？例如，如果我使用 getElementByID("css-dash-name")。我尝试了一些使用带有破折号作为div ID名称的getElementByID示例，它可以工作，但我不确定在所有其他情况下是否也是如此。

- Choy

Answer 1

在 ID（如果你通过该方式选择）或类名中使用破折号和下划线不会产生负面影响，所以可以安全使用它们。但你不能这样做：

var some-element = document.getElementByID('css-dash-name');

上面的示例会出现错误，因为您正在分配元素的变量中有一个连字符。

下面的示例则没有问题，因为变量中不包含连字符：

var someElement = document.getElementByID('css-dash-name');

该命名限制仅适用于JavaScript变量本身。

- Parrots

---

+1，鹦鹉给出了很好的答案。我会编辑一下，让示例1是错误的方式，示例2是正确的方式更加清晰明了。 - Doug Neiner

感谢您提供简明扼要的答案。正是我需要澄清的，限制仅适用于JavaScript变量本身。 - Choy

真是太遗憾了，因为我想让HTML数据属性（例如"data-something-awesome"）与JavaScript变量（例如"var something-awesome"）相互关联，但是没有很好的方法来实现这一点...我的唯一选择就是在数据属性中混合分隔符（data-somethingAwesome），或者在我的JavaScript和HTML命名中存在不一致性。 - Jon z

Answer 2

只有在您可以将元素视为属性访问时才会有所区别。例如表单字段：

<form>
   <input type="text" name="go-figure" />
   <input type="button" value="Eat me!" onclick="...">
</form>

在onclick事件中，你无法将文本框作为属性访问，因为在JavaScript中，连字符被解释为减号。

onclick="this.form.go-figure.value='Ouch!';"

但是你仍然可以使用字符串访问它：

onclick="this.form['go-figure'].value='Ouch!';"

- Guffa

---

感谢您提供的一个异常示例，说明了它可能会带来的问题以及如何解决它！ - Choy

Answer 3

无论何时你需要将CSS属性作为JavaScript变量名来处理，CamelCase都是官方的方式。

element.style.backgroundColor = "#FFFFFF";

您永远不需要将元素的ID作为变量名来处理。它始终会以字符串形式出现，因此

document.getElementById("my-id");

始终有效。

- Pekka

Answer 4

使用连字符（或破折号）是可以的

我也正在学习JavaScript，就我所读的David Flanagan的书（《JavaScript权威指南第5版》）而言——我建议你也读一下。它没有警告我在HTML文档中的ID和Class（甚至Name属性）中使用连字符或破折号的任何事情。

正如Parrots已经说过的那样，变量中不允许使用连字符，因为JavaScript解释器会将其视为减号和/或负号；但是在字符串中使用它是完全可以的。

就像Parrots和Guffa所说的那样，您可以使用以下方法...

1. [ ]（方括号）
2. ''（单引号）
3. ""（双引号）来告诉JavaScript解释器您正在声明字符串（例如元素的id/class/name）。

使用连字符（或破折号）- 保持“一致性”

@KP，如果他使用的是HTML 4.1或更早版本，那么这将是可以的，但如果他使用任何版本的XHTML（例如XHTML 1.0），则不可能，因为XHTML语法禁止大写字母（除了!DOCTYPE之外，这是唯一需要用大写字母声明的内容）。

@Choy，如果您使用的是HTML 4.1或更早版本，则转到camelCase或PascalCase都不会有问题。尽管出于一致性考虑，如何使用CSS分隔符（它使用连字符或破折号）建议遵循其规则。这样你可以更方便地编写HTML和CSS代码。而且，您甚至不必担心是否使用XHTML或HTML。

- user642922

Answer 5

ID允许包含连字符：

• ID和NAME标记必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“_”）、冒号（“:”）和句点（“.”）。

在JavaScript中使用ID时没有限制，除非您想引用全局范围内的元素。在这种情况下，您需要使用：

window['css-dash-name']

- Gumbo

Answer 6

在这种情况下，它会导致错误：

const fontSize = element.style.font-size;

因为使用连字符会导致属性无法通过点操作符访问。JavaScript解析器会把连字符看作减法运算符。正确的方式应该是：

const fontSize = element.style['font-size']

- Yilmaz

Answer 7

其他答案关于在哪里可以和不能使用连字符是正确的，然而在问题的根源上，你应该考虑不使用破折号/连字符来命名你的变量/类/ID。即使它确实有效并需要仔细编码才能使用，这也不是标准做法。

考虑使用PascalCase（所有单词首字母大写）或camelCase（第一个单词以小写字母开头，后面的单词以大写字母开头）。这是两种最常见、被接受的命名约定。

不同的资源会推荐两者之间的不同选择（JavaScript除外，基本上总是推荐camelCase）。最重要的是，在你的方法中保持一致性。使用camel或Pascal case将确保你不必担心代码中的特殊访问器或括号。

对于JavaScript约定，请参阅此问题/讨论：

javascript naming conventions

这里还有另一个关于CSS、Html元素等约定的讨论：

What's the best way to name IDs and classes in CSS and HTML?

- KP.

Answer 8

不会有问题。您正在将ID作为字符串访问（它被引号括起来），因此破折号不会造成问题。但是，我建议不要使用document.getElementById("css-dash-name")，而是使用jQuery，这样您就可以执行以下操作：

$("#css-dash-name");

这要清晰得多。jQuery 的文档也非常好。它是 Web 开发者的好朋友。

- Mike Trpcic