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

Question

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

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

Answer 1

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

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

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

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

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

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

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

Answer 3

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

element.style.backgroundColor = "#FFFFFF";

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

document.getElementById("my-id");

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

Answer 4

Использование Hypen (или тире) в порядке

Я тоже сейчас изучаю JavaScript, и насколько я читаю книгу Дэвида Фланагана (JavaScript: Полное руководство, 5-е издание) & mdash; Я предлагаю вам прочитать это. Он ничего не предупреждает об использовании hypen или dash (-) в идентификаторах и классах (даже атрибут Name) в HTML-документе.

Точно так же, как уже сказал Попугай, в переменных не допускается гипс, потому что интерпретатор JavaScript будет рассматривать его как минус и / или отрицательный знак; но использовать его на строках - вполне нормально.

Как и то, что сказали Попугаи и Гуффа, вы можете использовать следующее ...

1. [] (квадратные скобки)
2. '' (одинарные кавычки или одинарные кавычки)

3. "" (двойные кавычки или двойные кавычки)

   , чтобы сообщить интерпретатору JavaScript, что вы объявляете строки (например, идентификатор / класс / имя ваших элементов) .

Использовать дефис (или тире) & mdash; для «согласованности»

@ KP, это будет нормально, если он использует HTML 4.1 или более раннюю версию, но если он использует какие-либо версии XHTML (.eg, XHTML 1.0), то это невозможно, поскольку синтаксис XHTML запрещает прописные буквы (кроме ! DOCTYPE, единственное, что нужно указывать в верхнем регистре).

@ Чой, если вы используете HTML 4.1 или более раннюю версию, переход к CamelCase или PascalCase не будет проблемой. Хотя для согласованности относительно того, как CSS использует разделители (он использует hypen или тире) , я предлагаю следовать его правилу. Для вас будет гораздо удобнее кодировать как HTML, так и CSS. Более того, вам даже не нужно беспокоиться, если вы используете XHTML или HTML.

Answer 5

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

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

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

window['css-dash-name']

Answer 6

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

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

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

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

соглашения о присвоении имен javascript

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

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

Answer 7

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

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

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