하이픈이있는 자바 스크립트 객체 속성을 어떻게 참조합니까?

이 스크립트 를 사용 하여 상속 된 모든 스타일의 스타일 객체를 만듭니다.

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

다음을 사용하면 첫 번째 경고는 제대로 작동하지만 두 번째 경고는 작동하지 않습니다. .. -내가 생각하는 마이너스로 해석하고 있습니다. 디버거는 '잡지 않은 참조 오류'라고 말합니다. 하지만 문자열이 아니기 때문에 따옴표를 붙일 수 없습니다. 그렇다면이 객체 속성을 어떻게 사용합니까?

편집하다

주석을 보면 CSS 속성의 경우 키 표기법이 여러 속성과 호환되지 않는다는 것을 알 수 있습니다. 따라서 카멜 케이스 키 표기법을 사용하는 것이 현재 방식입니다.

obj.style-attr // would become 

obj["styleAttr"]

점 대신 키 표기법 사용

style["text-align"]

js의 모든 배열은 객체이고 모든 객체는 단지 연관 배열입니다. 즉, 배열의 키를 참조하는 것처럼 객체의 위치를 ​​참조 할 수 있습니다.

arr[0]

또는 개체

obj["method"] == obj.method

이런 식으로 속성에 액세스 할 때 기억해야 할 몇 가지

1. 카운터를 사용하거나 동적 메서드 이름을 사용하지 않는 한 문자열을 사용합니다.

   즉, obj [method]는 정의되지 않은 오류를 제공하지만 obj [ "method"]는 그렇지 않습니다.

2. js 변수에서 허용되지 않는 문자를 사용하는 경우이 표기법을 사용해야합니다.

이 정규식은 그것을 거의 요약합니다.

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

가있는 CSS 속성 -은 Javascript 객체의 camelCase로 표시됩니다. 다음과 같습니다.

alert( style.textAlign );

대괄호 표기법을 사용하여 문자열을 사용할 수도 있습니다.

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

속성 이름에는 문자, 숫자, 잘 알려진 $기호 및 _(pimvdb 덕분에) 만 포함될 수 있습니다 .

원래 질문에 대한 대답은 속성 이름을 따옴표로 묶고 배열 스타일 인덱싱을 사용하는 것입니다.

obj['property-with-hyphens'];

관심있는 속성이 CSS 속성이라고 여러 사람이 지적했습니다. 하이픈이있는 CSS 속성은 자동으로 카멜 케이스로 변환됩니다. 이 경우 다음과 같은 낙타 이름을 사용할 수 있습니다.

style.textAlign;

그러나이 솔루션은 CSS 속성에서만 작동합니다. 예를 들면

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

대괄호 사용 :

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

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

객체에 대한 추가 정보 : MDN

참고 : 스타일 객체 인 CSSStyleDeclaration 에 액세스하는 경우 must camelCase를 사용하여 javascript에서 액세스하십시오. 여기에 더 많은 정보

alert(style.textAlign)

또는

alert(style["textAlign"]);

질문에 직접 답하려면 style['text-align']하이픈이있는 속성을 참조하는 방법입니다. 그러나 style.textAlign(또는 style['textAlign'])은이 경우에 사용해야합니다.

하이픈이있는 스타일 속성은 JavaScript의 camelCase를 통해 참조 되므로 style.textAlign.

문제를 해결하려면 : 하이픈이있는 CSS 속성은 이 문제를 방지하기 위해 camelCase의 JavaScript 속성으로 표시됩니다 . 원하는 항목 : style.textAlign.

질문에 답하려면 : 대괄호 표기법 사용 : obj.prop은 obj["prop"]문자열을 사용하여 속성 이름에 액세스하고 식별자에서 금지 된 문자를 사용할 수 있도록 하는 것과 동일 합니다.

객체 속성 이름은 CSS 이름과 일대일 일치가 아닙니다.

그래서 그들이 자바 스크립트에서 낙타 표기법으로 변경 얻을 CSS 스타일의 경우 생각 test-align된다 textAlign. 비표준 문자가 포함 된 속성에 액세스하려는 일반적인 경우에는 배열 스타일을 사용합니다. ['text-align']

처음에는 왜 내 쪽에서 솔루션이 작동하지 않았는지 궁금합니다.

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

... 나중에 데이터 속성에 액세스하는 것이 다르다는 것을 알아 내십시오. 다음과 같아야합니다.

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

도움이 되었기를 바랍니다!