Javascript и CSS, используя тире

Я начинаю изучать javascript и понимаю, что тире не разрешены при именовании идентификаторов. Однако в CSS обычно используется тире для идентификаторов и классов.

каким-то образом использование тире в CSS мешает взаимодействию javascript? Например, если бы я использовал getElementByID ("css-dash-name"). Я пробовал несколько примеров использования getElementByID с тире в качестве имени для идентификатора div, и это сработало, но я не уверен, что это так во всех других контекст.

13
css javascript naming-conventions

7 ответов

имея тире и подчеркивания в идентификаторе (или имени класса, если вы выберете это), которые не будут иметь никакого отрицательного эффекта, безопасно их использовать. Ты просто не могу сделать что-то вроде:

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

приведенный выше пример приведет к ошибке, потому что в переменной, которой вы назначаете элемент, есть тире.

следующее Было бы хорошо, хотя, поскольку переменная не содержит тире:

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

это ограничение именования только существует для самих переменных javascript.

31

только в тех случаях, когда вы можете получить доступ к элементам как свойствам, это имеет значение. Например, поля формы:

<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!';"
10

всякий раз, когда вам нужно обратиться к свойству CSS в качестве имени переменной JavaScript, CamelCase является официальным способом.

element.style.backgroundColor = "#FFFFFF";

вам никогда не придется обращаться к идентификатору элемента как к имени переменной. Он всегда будет в строчке, так что

document.getElementById("my-id");

всегда будет работать.

3

Использование Hypen (или черточки) ОК

Я тоже в настоящее время изучаю JavaScript, и насколько я читал книгу Дэвида Фланагана (JavaScript: окончательное руководство, 5-е издание)

2

идентификаторы могут содержать дефисы:

  • ID и имя маркеры должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ( " - " ), подчеркиваний ("_"), двоеточий ( " :") и периодов (".").

и нет никаких ограничений при использовании идентификаторов в JavaScript, кроме случаев, когда вы хотите ссылаться на элементы в глобальной области. Там вам нужно использовать:

window['css-dash-name']
1

нет, это не вызовет проблемы. Вы получаете доступ к идентификатору в виде строки (она заключена в кавычки), поэтому тире не представляет проблем. Однако, я бы предложил не использовать документ.getElementById ("css-dash-name"), а вместо этого используя jQuery, Так что вы можете сделать:

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

что гораздо понятнее. документация jQuery также довольно хороша. Это лучший друг веб-разработчиков.

0

другие ответы верны, насколько вы можете и не можете использовать дефисы, однако в корне вопроса Вы должны рассмотреть идею не использовать тире/дефисы в именах переменных/классов/идентификаторов. Это не стандартная практика, даже если она работает и требует тщательного кодирования, чтобы использовать ее.

рассмотрите возможность использования PascalCase (все слова начинаются с заглавной буквы) или camelCase (первое слово начинается в нижнем регистре, после слов в верхнем регистре). Эти двое наиболее распространенные, принятые соглашения об именах.

различные ресурсы будут рекомендовать различные варианты между ними (за исключением JavaScript, который в значительной степени всегда рекомендуется camelCase). В конце концов, пока вы последовательны в своем подходе, это самая важная часть. Использование camel или Pascal case гарантирует, что вам не придется беспокоиться о специальных аксессуарах или скобках в вашем коде.

для соглашений JavaScript попробуйте следующее вопрос/обсуждение:

соглашения об именах javascript

вот еще одно отличное обсуждение соглашений для CSS, Html-элементов и т. д.:

каков наилучший способ назвать идентификаторы и классы в CSS и HTML?

0