>  기사  >  웹 프론트엔드  >  JavaScript에서 글꼴 가중치와 글꼴 가중치의 차이점

JavaScript에서 글꼴 가중치와 글꼴 가중치의 차이점

黄舟
黄舟원래의
2017-07-22 13:23:303675검색

오늘은 JS를 통해 요소의 CSS 스타일을 설정하는 방법을 알아냈습니다. 코드는 다음과 같습니다.

var js = document.getElementById('test-p');
js.style['font-weight'] = 'bold';

그러다가 아주 이상한 곳을 발견했습니다. .

console.log(js.style.fontWeight);
console.log(js.style['font-weight']);
console.log(js.style['fontWeight']);

를 사용하여 콘솔 출력 전에 굵게 설정하거나 CSS에서 직접 {font-weight:bold}를 설정하더라도 사용할 수도 있습니다. 세 가지 방법으로 콘솔에 굵은 글씨체를 출력합니다.

console.log(js.style);에서 직접 출력한 개체에 'font-weight' 속성이 없고 'fontWeight'만 있는 경우 왜 여기에 'font-weight'가 있는지 알려주세요. '와 'fontWeight'는 '동등'으로 나타납니다. 초보자들은 답변해 주셔서 감사합니다.

JS에서 "-"는 빼기 연산자를 나타냅니다. 따라서 글꼴 가중치는 글꼴에서 가중치를 뺀 값을 나타내고 test-p는 테스트에서 p를 뺀 것과 동일합니다.

카멜케이스
js.style.font-weight 입니다. 이렇게 직접 쓰면
js.style.fontWeight

로 쓰면 오류가 납니다. ]

javascript를 브라우저 스크립트로 사용하면 자연스럽게 CSS와 다른 것들을 조작할 수 있습니다

여기에 문제가 있습니다. CSS의 많은 속성은 연결 번호로 사용되며, javascript에서는 객체의 속성에 빼기 기호

그래서 재치 있는 저자는 번쩍이는 영감을 얻었습니다. js에서 CSS 속성에 액세스할 때 카멜 표기법 이름을 사용하여 너무 답답해 보이지 않도록 하면 어떨까요

이제부터 CSS 속성에 액세스할 때 , 낙타 케이스 이름을 사용하거나 빼기 기호를 사용하여 이름을 연결할 수 있습니다

위 내용은 JavaScript에서 글꼴 가중치와 글꼴 가중치의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.