简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
JavaScript를 사용하면 CSS 사용자 정의 속성(CSS 변수라고도 함)에 액세스할 수 있습니다.
P粉420868294
P粉420868294 2023-10-20 22:42:04
0
2
681

JavaScript(일반 또는 jQuery)를 사용하여 CSS 사용자 정의 속성(스타일시트에서 var(…)를 통해 액세스되는 속성)을 가져오고 설정하는 방법은 무엇입니까?

이것은 실패한 시도입니다. 버튼을 클릭하면 일반적인 font-weight 属性，但不会更改自定义 --mycolor 속성이 변경됩니다. 

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <style>
    body { 
      --mycolor: yellow;
      background-color: var(--mycolor);
    }
  </style>
</head>
<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['font-weight'] = 'bold';
    document.body.style['--mycolor'] = 'red';
  };
  function jQuery_() {
    $('body').css('font-weight', 'bold');
    $('body').css('--mycolor', 'red');
  }
  </script>
</body>
</html>

P粉420868294
P粉420868294

모든 응답(2)
P粉421119778
P粉4211197782023-10-21 17:19:53 2층

네이티브 솔루션

CSS3 변수를 가져오거나 설정하는 표준 방법 은 .setProperty() 和 .getPropertyValue()입니다.

변수가 전역 변수( :root 에 선언됨)인 경우 다음을 사용하여 해당 값을 가져오고 설정할 수 있습니다.

으아아아

그러나 .setProperty()을 사용하여 var의 값을 설정한 경우 getter는 해당 값만 반환합니다. CSS 선언을 통해 설정하면 undefined가 반환됩니다. 다음 예에서 확인해 보세요.

으아아아 으아아아 으아아아

이 예기치 않은 동작을 방지하려면 .getPropertyValue() 之前使用 getCompulatedStyle() 메서드를 호출해야 합니다. 그러면 getter는 다음과 같이 보일 것입니다:

으아아아

제 생각에는 CSS 변수에 접근하는 것이 더 쉽고 빠르며 직관적이고 자연스러워야 합니다...

개인적인 접근 방식

문서에서 모든 활성 CSS 전역을 자동으로 감지하고 객체로 패키징하는 작은(CSSGlobalVariables 더 쉽게 액세스하고 조작할 수 있도록 . 으아아아

개체 속성에 적용된 모든 변경 사항은 자동으로 CSS 변수로 변환됩니다.

사용 가능: https://github.com/colxi/css-전역 변수

좋다 +0
답글 추가
P粉863295057
P粉8632950572023-10-21 14:23:27 1층

다음을 사용할 수 있습니다. document.body.style.setProperty('--name', value);:

으아악
좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！