Как связать свойство объекта javascript с дефисом в нем?

Ответ 1

ИЗМЕНИТЬ

Посмотрите на комментарии, которые вы увидите, что для свойств css ключевая нотация несовместима с рядом свойств. Использование символа ключа верблюда поэтому является текущим способом

obj.style-attr // would become 

obj["styleAttr"]

Использовать нотацию, а не точку

style["text-align"]

Все массивы в js являются объектами, и все объекты являются просто ассоциативными массивами, это означает, что вы можете ссылаться на место в объекте так же, как вы ссылаетесь на ключ в массиве.

arr[0]

или объект

obj["method"] == obj.method

пару вещей, которые нужно запомнить при доступе к свойствам таким образом

• они вычисляются так, чтобы использовать строки, если вы не делаете что-либо с помощью счетчика или не используете динамические имена методов.

  это означает, что obj [method] даст вам ошибку undefined в то время как obj [ "method" ] не будет

• Вы должны использовать это обозначение, если используете символы, недопустимые в переменных js.

Это регулярное выражение в значительной степени суммирует его

[a-zA-Z_$][0-9a-zA-Z_$]*

Ответ 2

Свойства CSS с - представлены в camelCase в объектах Javascript. Это будет:

alert( style.textAlign );

Вы также можете использовать условное обозначение скобки для использования строки:

alert( style['text-align'] );

Имена свойств могут содержать только символы, цифры, известный знак $ и _ (благодаря pimvdb).

Ответ 3

Ответ на исходный вопрос: поместите имя свойства в кавычки и используйте индексирование стиля массива:

obj['property-with-hyphens'];

Несколько человек указали, что интересующее вас свойство является свойством CSS. Свойства CSS, имеющие дефисы, автоматически преобразуются в корпус верблюда. В этом случае вы можете использовать имя с верблюдом, например:

style.textAlign;

Однако это решение работает только для свойств CSS. Например,

obj['a-b'] = 2;
alert(obj.aB);          // undefined
alert(obj['a-b']);      // 2

Ответ 4

Используйте скобки:

var notTheFlippingStyleObject = {
    'a-b': 1
};

console.log(notTheFlippingStyleObject["a-b"] === 1); // true

Дополнительная информация об объектах: MDN

ПРИМЕЧАНИЕ. Если вы обращаетесь к объекту style, CSSStyleDeclaration, используйте camelCase для доступа к нему из javascript. Подробнее здесь

Ответ 5

Чтобы прямо ответить на вопрос: style['text-align'] заключается в том, как вы ссылаетесь на свойство с дефисом в нем. Но style.textAlign (или style['textAlign']) - это то, что следует использовать в этом случае.

Ответ 6

Свойства зашифрованного стиля ссылаются через camelCase в JavaScript, поэтому используйте style.textAlign.

Ответ 7

Чтобы решить вашу проблему: свойства CSS с дефисами в них представлены свойствами JavaScript в camelCase, чтобы избежать Эта проблема. Вы хотите: style.textAlign.

Чтобы ответить на вопрос: используйте обозначение квадратной скобки: obj.prop совпадает с obj["prop"], поэтому вы можете получить доступ к именам свойств, используя строки, и использовать символы, которые запрещены в идентификаторах.

Ответ 8

alert(style.textAlign)

или

alert(style["textAlign"]);

Ответ 9

Имена свойств объекта не являются взаимно однозначными совпадениями для имен css.

Ответ 10

Я думаю, что в случае стилей CSS они меняются на camelCase в Javascript, поэтому test-align становится textAlign. В общем случае, когда вы хотите получить доступ к свойству, содержащему нестандартные символы, вы используете стиль массива. ['text-align']

Ответ 11

Сначала мне интересно, почему решение не сработало на моем конце.

api['data-sitekey'] //returns undefined

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

var api = document.getElementById("some-api");
api.dataset.sitekey

Надеюсь, это поможет!