JavaScript는 CSS 사용자 정의 속성에 어떻게 액세스하고 수정할 수 있습니까?-CSS 튜토리얼-php.cn

JavaScript는 CSS 사용자 정의 속성에 어떻게 액세스하고 수정할 수 있습니까?

Linda Hamilton

풀어 주다： 2024-12-09 03:01:09

원래의

815명이 탐색했습니다.

How Can JavaScript Access and Modify CSS Custom Properties?

JavaScript를 사용하여 CSS 사용자 정의 속성에 액세스

JavaScript는 CSS 변수라고도 하는 CSS 사용자 정의 속성에 액세스하고 조작하는 방법을 제공합니다. 일반 CSS 속성과 달리 이러한 사용자 정의 속성은 스타일시트의 var(...) 구문을 통해 액세스할 수 있습니다.

사용자 정의 속성 값 가져오기

사용자 정의 속성인 경우 window.getCompulatedStyle(document.body).getPropertyValue('--name')을 사용합니다. 여기서 --name은 사용자 정의 속성 이름입니다. 예:

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar');

로그인 후 복사

사용자 정의 속성 값 설정

사용자 정의 속성 값을 설정하려면 document.body.style.setProperty('--name', value), 여기서 --name은 사용자 정의 속성 이름이고 value는 새 값입니다. 예:

document.body.style.setProperty('--foo-bar', 'red');

로그인 후 복사

예

다음 코드를 고려하세요.

<body>
  <p>Let's try to make this text bold and the background red.</p>
  <button onclick="plain_js()">Plain JS</button>
  <button onclick="jQuery_()">jQuery</button>

  <script>
    function plain_js() { 
      document.body.style.setProperty('--mycolor', 'red');
      document.body.style['font-weight'] = 'bold';
    };
    function jQuery_() {
      $('body').css('--mycolor', 'red');
      $('body').css('font-weight', 'bold');
    }
  </script>
</body>

로그인 후 복사

"Plain JS" 또는 "jQuery" 버튼 클릭 이제 --mycolor 사용자 정의 속성을 빨간색으로 설정하고 텍스트를 굵게 표시합니다.

위 내용은 JavaScript는 CSS 사용자 정의 속성에 어떻게 액세스하고 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!