이 스크립트 를 사용 하여 상속 된 모든 스타일의 스타일 객체를 만듭니다.
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이런 식으로 속성에 액세스 할 때 기억해야 할 몇 가지
-
카운터를 사용하거나 동적 메서드 이름을 사용하지 않는 한 문자열을 사용합니다.
즉, obj [method]는 정의되지 않은 오류를 제공하지만 obj [ “method”]는 그렇지 않습니다.
-
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'])은이 경우에 사용해야합니다.
