HTML 태그 및 JS에서 CSS3 var 변수를 설정하는 방법

이 글의 내용은 HTML 태그와 JS에서 CSS3 변수를 설정하는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. HTML 태그

에 CSS 변수를 다음과 같이 설정하세요.

<div style="--color: #cd0000;">
<img  src="mm.jpg"   style="max-width:90%" alt="HTML 태그 및 JS에서 CSS3 var 변수를 설정하는 방법" >
</div>

일반 CSS 문처럼 스타일 속성에 설정하세요.

효과는 다음과 같습니다:

2. JS

에서 CSS 변수를 다음과 같이 설정합니다. HTML 표현:

var(--color)를 적용하려면 다음 JavaScript 코드를 실행하세요.

box.style.setProperty('--color', '#cd0000');

즉, setProperty() 메서드를 사용하면 효과는 다음과 같습니다. GIF 스크린샷:

3.

JS에서 CSS 변수를 얻을 수 있습니다. getPropertyValue() 메서드를 사용하여 다음을 나타냅니다.

// 获取 --color CSS 变量值
var cssVarColor = getComputedStyle（box）。getPropertyValue（'--color'）；
// 输出cssVarColor
// 输出变量值是：#cd0000
console.log（cssVarColor）；

4. CSS3 var() 변수 정보

CSS3 var() 변수는 2년 전에 도입되었을 때는 좋은 것이 아닙니다. 많은 브라우저가 이를 지원했습니다. 이제 Edge16은 이를 완벽하게 지원합니다.

위 내용은 HTML 태그 및 JS에서 CSS3 var 변수를 설정하는 방법에 대한 전체 소개입니다. CSS3 튜토리얼에 대해 자세히 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.

위 내용은 HTML 태그 및 JS에서 CSS3 var 변수를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!