Javascript和CSS，使用破折号

我开始学习一些javascript，并理解在命名标识符时不允许使用破折号。然而，在CSS中，ID和类通常使用破折号

---

在CSS中使用破折号会干扰javascript交互吗？例如，如果我要使用

getElementByID（“css dash name”）

。我曾经尝试过几个例子，使用带有破折号的getElementByID作为div ID的名称，这是有效的，但我不确定在所有其他上下文中是否都是这样。

在ID中使用破折号和下划线（或类名，如果您选择的话）不会产生任何负面影响，使用它们是安全的。你就是不能像这样做：

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

上面的示例将出错，因为您将元素分配给的变量中有一个破折号

但是，由于变量不包含破折号，因此可以执行以下操作：

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

---

只有javascript变量本身才存在命名限制。

每当您必须将CSS属性作为javascript变量名来处理时，CamelCase是正式的方法

element.style.backgroundColor = "#FFFFFF";

您将永远不会遇到必须将元素的ID作为变量名进行寻址的情况。它总是在一个字符串中，所以

document.getElementById("my-id");

---

将始终有效。

不，这不会导致问题。您正在以字符串的形式访问ID（它用引号括起来），因此破折号不会引起任何问题。但是，我建议不要使用document.getElementById（“css dash name”），而是使用，这样您就可以：

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

这更清楚。jQuery文档也相当不错。这是网络开发者最好的朋友。

:

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

在JavaScript中使用ID时没有任何限制，除非您希望引用全局范围中的元素。您需要在此处使用：

window['css-dash-name']

---

只有在您可以将元素作为属性访问的情况下，它才会有所不同。例如，表单字段：

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

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

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

---

<> P>其他答案是正确的，至于你可以和不能使用连字符，但是在问题的根源，你应该考虑不使用破折号/连字符在你的变量/类/ ID名称中的想法。它不是标准实践，即使它确实有效，并且需要仔细编码才能使用它

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

不同的资源会在两者之间推荐不同的选择（JavaScript除外，JavaScript几乎总是推荐这种情况）。最后，只要你的方法是一致的，这是最重要的部分。使用camel或Pascal case将确保您不必担心代码中的特殊访问器或括号

对于JavaScript约定，请尝试以下问题/讨论：

下面是关于CSS、Html元素等约定的另一个重要讨论：

使用Hypen（或破折号）可以

我目前也在学习JavaScript，就我所读的David Flanagan的书（JavaScript:The Definitive Guide，第五版）而言，我建议你读一读。对于在HTML文档中的ID和类（甚至是Name属性）中使用hypen或破折号（-），它没有任何警告

正如Parrots已经说过的，hypens不允许出现在变量中，因为JavaScript解释器会将其视为负号和/或负号；但是在字符串上使用它，是非常好的

就像鹦鹉和Guffa所说的，你可以使用下面的

[]（方括号）

''（单引号或单引号）

“”（双引号或双引号）

告诉JavaScript解释器您正在声明字符串（例如元素的id/class/name）

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

@KP，如果他使用的是HTML4.1或更早版本，那就可以了，但是如果他使用的是XHTML的任何版本（.例如，XHTML1.0），那就不可能了，因为XHTML语法禁止大写（除了！DOCTYPE，它是唯一需要用大写声明的东西）

---

@Choy，如果您使用的是HTML4.1或更早版本，那么使用camelCase或PascalCase都不会有问题。虽然，为了保持CSS如何使用分隔符（它使用hypen或dash）的一致性，我建议遵循它的规则。对您来说，编写HTML和CSS代码将更加方便。而且，如果您使用的是XHTML或HTML，您甚至不必担心。

+1 Parrots很好的答案。我将对其进行编辑，使其更清楚地表明示例1是错误的方式，而示例2是正确的方式。感谢您提供简洁的答案。这正是我需要澄清的，限制只存在于javascript变量本身。这是一个非常糟糕的问题，因为我希望HTML数据属性（如“data something Aweasome”）与javascript变量（如“var something Aweasome”）相关联，但这并不是一个很好的方法。。我唯一的选择是在数据属性（data somethingAwesome）中混合使用分隔符，或者在我的js和html中的命名之间存在不一致。感谢您提供一个异常示例，它可能会造成问题，以及如何解决问题！

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