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

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

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

Ответ 1

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

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

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

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

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

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

Ответ 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!';"

Ответ 3

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

element.style.backgroundColor = "#FFFFFF";

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

document.getElementById("my-id");

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

Ответ 4

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

Я тоже сейчас изучаю JavaScript, и насколько я читаю книгу Дэвида Фланагана (JavaScript: The Definitive Guide, 5th Edition) — Я предлагаю вам прочитать его. Это не предупреждает меня об использовании hypen или dash (-) в идентификаторах и классах (даже атрибут Name) в HTML-документе.

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

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

  • [] (квадратные скобки)
  • '' (одиночные кавычки или одинарные кавычки)
  • "" (двойные кавычки или двойные кавычки)

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


Использовать Hyphen (или тире) — для "Консистенции"

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

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

Ответ 5

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

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

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

window['css-dash-name']

Ответ 6

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

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

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

Ответ 7

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

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

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

Для условных обозначений JavaScript задайте этот вопрос/обсуждение:

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

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

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