JavaScript를 사용하여 CSS 변수를 가져오고 설정 하시겠습니까?

이번 주에 나는 CSS3 변수의 영광을 발견했습니다! 그들을 사랑해!JavaScript를 사용하여 CSS 변수를 가져오고 설정 하시겠습니까?

:root { 
    --main-height: 45px; 
    --main-gutter: -8px; 

    --match-width: 180px; 
    --player-width: 370px; 
    --score-width: 60px; 
}

내 질문 ... JavaScript에서 이러한 변수를 가져올 수있는 방법이 있습니까?

출처

2016-08-22 Jason Axelrod

http://stackoverflow.com/questions/8742249/how-to-set-css3-transition- using-javascript –

IE가 CSS3 변수를 지원하지 않을 수 있습니다. – Scott

그냥 말하기를 두려워하지 마십시오. IE *는이 기능을 지원하지 않습니다. 결코 그렇게되지 않을 것입니다. – BoltClock

여기에 유용한 데모가 있습니다. CODEPEN 및 아래의 스 니펫. 세부 사항은 출처에서 주석 처리됩니다.

핵심 부품은 다음과 같습니다

setProperty 및 template literals

// Collect the inputs 
 
const adjGrp = [].slice.call(document.querySelectorAll('#adjustments input')); 
 

 
// Add an eventListener to each input for the change event 
 
adjGrp.forEach(input => input.addEventListener('change', adjCSS)); 
 

 
// Event handler uses setProperty method and template literal of the CSS variable 
 
// Input name attributes are referenced to the corresponding CSS variable 
 
function adjCSS(e) { 
 
    document.documentElement.style.setProperty(`--${this.name}`, this.value + 'px'); 
 
}

:root { 
 
    --mainh: 45px; 
 
    --mainw: 480px; 
 
    --match: 180px; 
 
    --player: 370px; 
 
    --score: 60px; 
 
} 
 
#main { 
 
    font: 500 16px/1.5 Consolas; 
 
    height: var(--mainh); 
 
    width: var(--mainw); 
 
} 
 
#scoreboard { 
 
    display: table; 
 
    width: calc(var(--player) + 150px); 
 
    height: calc((var(--main) * .2)); 
 
    margin: 15px 0 15px 20px; 
 
} 
 
legend { 
 
    font-size: 1.6rem; 
 
    font-variant: small-caps; 
 
} 
 
output { 
 
    display: table-cell; 
 
    line-height: 1.5; 
 
    border: 3px inset grey; 
 
    padding: 3px 5px; 
 
} 
 
#match { 
 
    width: var(--match); 
 
} 
 
#player { 
 
    width: var(--player); 
 
} 
 
#score { 
 
    width: var(--score); 
 
} 
 
#adjustments { 
 
    margin: 0 0 0 20px; 
 
}

<form id='main'> 
 
    <fieldset id='scoreboard'> 
 
    <legend>Scoreboard</legend> 
 
    <input id='m' type='hidden'> 
 
    <input id='p' type='hidden'> 
 
    <input id='s' type='hidden'> 
 

 
    <label>Player 
 
     <output id='player' for='p'>Name</output> 
 
     <br/> 
 
    </label> 
 
    <label>Match&nbsp; 
 
     <output id='match' for='m'>0</output> 
 
     <br/> 
 
    </label> 
 
    <label>Score&nbsp; 
 
     <output id='score' for='s'>0</output> 
 
    </label> 
 
    </fieldset> 
 

 

 
    <fieldset id='adjustments'> 
 
    <legend>Adjustments</legend> 
 
    <label>Player 
 
     <input name='player' type='number'> 
 
    </label> 
 
    <br/> 
 
    <label>Match&nbsp; 
 
     <input name='match' type='number'> 
 
    </label> 
 
    <br/> 
 
    <label>Score&nbsp; 
 
     <input name='score' type='number'> 
 
    </label> 
 
    <br/> 
 
    </fieldset> 
 
</form>

출처

2016-08-22 02:15:12 zer00ne

스타일 요소를 만들고 원하는 CSS가 포함 된 <head>에 추가 할 수 있습니다.

$("head").append(` 
    <style type="text/css"> 
    CSS CODE 
    </style> 
`);

브라우저 간 호환성에 신경 쓰는 경우 CSS 변수를 사용하지 않아야합니다.

출처

2016-08-22 00:20:44 guub

JavaScript를 사용하여 CSS 변수를 가져오고 설정 하시겠습니까?

답변

관련 문제