[JQUERY] 자바 스크립트를 통해 (CSS 변수 일명)는 CSS 사용자 정의 속성을 액세스

자바 스크립트를 통해 (CSS 변수 일명)는 CSS 사용자 정의 속성을 액세스

해결법

1. ---

   1.;: - 당신은 document.body.style.setProperty ( '이름'값)를 사용할 수 있습니다

   ;: - 당신은 document.body.style.setProperty ( '이름'값)를 사용할 수 있습니다

   var bodyStyles = window.getComputedStyle(document.body);
   var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get
   
   document.body.style.setProperty('--foo-bar', newValue);//set
   

   여기에 더 많은 정보.

2. ---

   2.표준 방법은 얻을 / 세트 CSS3 변수 .setProperty ()와 .getPropertyValue ()이다.

   표준 방법은 얻을 / 세트 CSS3 변수 .setProperty ()와 .getPropertyValue ()이다.

   당신의 변수 (선언 : 루트) 전역이 있다면, 당신은 점점 그 값을 설정하려면 다음을 사용할 수 있습니다.

   // setter
   document.documentElement.style.setProperty('--myVariable', 'blue');
   // getter
   document.documentElement.style.getPropertyValue('--myVariable');
   

   그러나 게터는 () .setProperty를 사용하여 설정되어있는 경우, var에의 값을 반환합니다. CSS 선언을 통해이었다 세트가있는 경우, 정의되지 않은 반환합니다. 이 예에서 확인 :

   하자 C = document.documentElement.style.getPropertyValue ( '- 인 myVariable'); 경보 ( '--myVariable의 값은'+ (c C :) '미정의'); : 루트 {--myVariable : 빨강; } DIV {배경 컬러 : VAR (- 인 myVariable); } --myVariable 으로

   빨간색 배경 세트

   .getPropertyValue를 호출하기 전에, 당신은 getComputedStyle () 메소드의 메이크업에 사용이 예기치 않은 동작을 방지하려면 (). 게터는 다음과 같이 표시됩니다 :

   getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');
   

   제 생각에는, 접근 CSS 변수는 더 간단하고, 빠르고 직관적 인 천연해야 ...

   내가 CSSGlobalVariablesa 작은 (<3킬로바이트)를 구현 한 자바 스크립트 도우미 자동으로 객체 쉽게 액세스 및 조작을위한 문서의 모든 활성 CSS 전역 변수로 감지하여 팩을하는가.

   // get the document CSS global vars
   let cssVar = new CSSGlobalVariables();
   // set a new value to --myVariable
   cssVar.myVariable = 'red';
   // get the value of --myVariable
   console.log( cssVar.myVariable );
   

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

   이용할 수있는 https://github.com/colxi/css-global-variables

3. ---

   3.다음의 예는 하나의 CSS 변수 (자세한 내용은 여기 읽기)라고도 사용자 정의 CSS 속성을 활용, 자바 스크립트 또는 jQuery를을 사용하여 배경을 변경할 수 있습니다 방법을 보여줍니다. 보너스 : 또한 코드는 하나의 글꼴 색상을 변경하기 위해 CSS 변수를 사용할 수를 나타냅니다.

   다음의 예는 하나의 CSS 변수 (자세한 내용은 여기 읽기)라고도 사용자 정의 CSS 속성을 활용, 자바 스크립트 또는 jQuery를을 사용하여 배경을 변경할 수 있습니다 방법을 보여줍니다. 보너스 : 또한 코드는 하나의 글꼴 색상을 변경하기 위해 CSS 변수를 사용할 수를 나타냅니다.

   plain_js 함수 () { 다른 색으로 설정 --mycolor에 // 필요에 DOM d.body.style.setProperty ( '- mycolor', '빨간색'); // CSS의 변수를 가져올 ... 개의 bodystyles = window.getComputedStyle (는 document.body); FONTCOLOR bodyStyles.getPropertyValue = ( '- FONTCOLOR')를; //가져 오기 사용자 지정 속성의 새로운 값으로 // ... 리셋 본문 요소 d.body.style.color = FONTCOLOR; d.g ( "파라") 스타일 [ "폰트 중량"] = "굵은".; this.style.display = "없음"; }; jQuery_ 함수 () { . $ ( "몸") (0) .style.setProperty ( '- mycolor', '#의 F3F')를 얻을; . ( "몸") CSS ( "색상", FONTCOLOR를) $; $ ( "# 파라") CSS ( "으로 fontWeight", "대담."); $ (이) .CSS ( "디스플레이", "없음"); } VAR 개의 bodystyles = NULL; var에 FONTCOLOR = ""; VAR의 문서 D =; d.g = d.getElementById; d.g ( "빨간색") 또는 addEventListener ( "클릭", plain_js).; d.g ( "분홍색") 또는 addEventListener ( "클릭", jQuery_).; : 루트 { --font 색상 : 흰색; --mycolor : 노란색; } 몸 { 배경 색상 : VAR (- mycolor); 색상 : # 090; } #para { 폰트 : 90 % 굴림, 돋움; 폰트 중량 정상; } #red { 배경 : 빨간색; } #분홍 { 배경 : # F3F; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

   배경을 만들 수하자의 시도는 빨간색 또는 분홍색과 흰색 대담한. 텍스트를 변경 <버튼 ID = "빨간색"> 레드 <버튼 ID = "분홍색"> 핑크

   jQuery를 함께하는 differnt 한 값으로 사용자 정의 속성을 설정하기 위해,이 응답은 실제로 답을 보유하고 있습니다. 그것은하여 새 값으로 사용자 정의 속성 --mycolor 설정 코드를 촉진, 기본 DOM 구조에 액세스 할 수 있습니다 몸의 요소를 반환 body 요소의 GET () 메소드를 사용합니다.

from https://stackoverflow.com/questions/36088655/accessing-a-css-custom-property-aka-css-variable-through-javascript by cc-by-sa and MIT license