A, HTML 태그 설정 CSS 변수
다음과 같습니다 :
<div style="--color: #cd0000;">
<img src="mm.jpg" style="border: 10px solid var(--color);">
</div>
직접 정상에서와 같은 CSS 문 style속성을 설정.
다음 스크린 샷의 효과 :
두 변수 JS CSS 설정
다음, HTML 개략적 :
<div id="box">
<img src="mm.jpg" style="border: 10px solid var(--color);">
</div>
당신이 원하는 경우에 var(--color)적용하려면, 다음과 같은 자바 스크립트 코드를 실행 :
box.style.setProperty('--color', '#cd0000');
사용 즉 setProperty()방법을 다음과 같은 효과를 개략적으로 스크린 샷 GIF입니다 :
세, JS 인수 CSS 변수
JS의 CSS 변수는 사용 취득 할 수 getPropertyValue()개략적 방법 :
// 获取 --color CSS 变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color');
// 输出cssVarColor
// 输出变量值是：#cd0000
console.log(cssVarColor);
CSS3의 VAR에 넷째, () 변수
CSS3의 var()변수는 없습니다 2 년 전 브라우저 지원의 수는 지금, Edge16이 완벽하게 지원했을 때, 좋은 일이있다.
즉 읽기이 문서에 대한 모든 덕분입니다!
HTML5 프로젝트 실제 학습 자료의 프런트 엔드를 이동 767 273 102, 가장 기본적인 HTML + CSS + JS에서 배우는 [멋진 특수 효과, 게임, 플러그인 패키지 디자인 패턴] : 여기가 교환 원을 학습하는 것이 좋습니다 끝입니다 우리는 모든 작은 프런트 엔드 파트너에 주어진 마무리된다. 2019 최신 기술, 동기화 및 비즈니스 요구. 친구 프런트 엔드 기술의 타이밍을 설명하기 위해 매일 큰 소가있을 것입니다, 학습 교류 내부에있다!