CSS自定义属性

自定义属性

为了方便复用

:root {
	--myColor: skyblue;
}

在自定义的属性名前面加两个杠- -以与一般属性区分开来

使用时:

div {
	background-color: var(--myColor, 'blue');
}

即使用var()函数,
第一个参数为我们自定义的属性
第二个参数为备用选项, 如果自定义属性无效则使用备用选项

当var()函数计算失败,
即两个参数都无效时或计算出来的结果对于当前属性无效时
使用默认值

div {
	padding: var(--myColor);
}

很明显上面例子对于padding无效, 则padding使用默认值
或者说这句样式无效

动态改变自定义属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        :root {
            font-size: 1em;
            --myColor: skyblue;
        }
        div {
            font-size: 1rem;
            background-color: var(--myColor);
            height: 10rem;
            width: 10rem;
        }
    style>
head>

<body>
    <button type="button">change to redbutton>
    <div>div>
    <script>
        let rootElement = document.documentElement;
        let mystyle = getComputedStyle(rootElement);
        let myColor = mystyle.getPropertyValue('--myColor');
        console.log(myColor);
        
        let mybtn = document.getElementsByTagName("button")[0];
        console.log(mybtn);
        mybtn.onclick = function() {
            rootElement.style.setProperty('--myColor','red');
        }

    script>
body>
html>

CSS自定义属性_第1张图片
点击button后:
CSS自定义属性_第2张图片

你可能感兴趣的:(CSS,css,前端,javascript)