Как мне ссылаться на свойство объекта javascript с дефисом в нем? - PullRequest
91 голосов
/ 19 августа 2011

Использование этого сценария для создания объекта стиля из всех унаследованных стилей и т. Д.

var style = css($(this));
alert (style.width);
alert (style.text-align);

со следующим: первое предупреждение будет работать нормально, а второе - нетт .. это интерпретирует - как минус, я полагаю ... отладчик говорит "неперехваченная ошибка ссылки".Я не могу заключать в кавычки, потому что это не строка.Так как же использовать это свойство объекта?

Ответы [ 11 ]

127 голосов
/ 19 августа 2011

EDIT

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

obj.style-attr // would become 

obj["styleAttr"]

Используйте ключевые обозначения, а не точки

style["text-align"]

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

arr[0]

или объект

obj["method"] == obj.method

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

  1. они оцениваются, поэтому используйте строки, если вы не делаете что-то со счетчиком или не используете динамические имена методов.

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

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

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

[a-zA-Z_$][0-9a-zA-Z_$]*
16 голосов
/ 19 августа 2011

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

alert( style.textAlign );

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

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

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

14 голосов
/ 19 августа 2011

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

obj['property-with-hyphens'];

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

style.textAlign;

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

obj['a-b'] = 2;
alert(obj.aB);          // undefined
alert(obj['a-b']);      // 2
6 голосов
/ 19 августа 2011

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

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

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

Подробнее об объектах: MDN

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

4 голосов
/ 19 августа 2011
alert(style.textAlign)

или

alert(style["textAlign"]);
3 голосов
/ 19 августа 2011

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

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

3 голосов
/ 19 августа 2011

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

3 голосов
/ 19 августа 2011

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

2 голосов
/ 19 августа 2011

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

2 голосов
/ 19 августа 2011

Имена свойств объекта не совпадают с именами css.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...