index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="main-header">
<h1>CSS Variables</h1>
</header>
<div class="container">
<div class="grid">
<div class="box">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste ad laudantium nulla, unde, libero corrupti quisquam ullam accusamus sapiente numquam nam ab, harum obcaecati ipsam quos repudiandae eum. Fuga, alias.</p>
</div>
<div class="box">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste ad laudantium nulla, unde, libero corrupti quisquam ullam accusamus sapiente numquam nam ab, harum obcaecati ipsam quos repudiandae eum. Fuga, alias.</p>
</div>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
style.css
/* 设置全局变量:在任何标签中都可以使用这个变量 */
:root {
/* css命名变量使用 -- 开头 */
--main-bg-color: #f4f4f4;
--main-txt-color: #333;
--header-bg-color: #6767cc;
--header-txt-color: #fff;
--container-width: 90%;
}
body {
margin: 0;
padding: 0;
line-height: 1.5;
/* background-color: red; */
/* css使用变量 使用var()方法 */
background-color: var(--main-bg-color);
color: var(--main-txt-color);
}
header#main-header {
background-color: var(--header-bg-color);
color: var(--header-txt-color);
}
.container {
width: var(--container-width);
margin: 20px auto;
}
header#main-header h1 {
margin: 0;
padding: 0;
}
/* 设置局部变量 */
.box {
--box-bg-color: #ddd;
--box-border-color: #06c;
--box-padding: 5px 10px;
--box-shadow-h-offset: 10px;
--box-shadow-v-offset: 5px;
--box-shadow-blur: 5px;
}
.box {
background-color: var(--box-bg-color);
border: 1px solid var(--box-border-color);
padding: var(--box-padding);
box-shadow: var(--box-shadow-h-offset) var(--box-shadow-v-offset) var(--box-shadow-blur) var(--box-border-color);
}
.box h1 {
color: var(--box-border-color);
}
.grid {
/* --gap: 20px; */
--gap: 20;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* grid-gap: var(--gap); */
grid-gap: calc(var(--gap)*1px);
align-items: center;
}
.box p {
/*重写变量的值 方式一*/
/* --box-border-color: #555;
color: var(--box-border-color); */
/*重写变量的值 方式二*/
color: var(--box-p-color, #555);
}
main.js
// js 如何获取到css文件中的变量以及如何给css文件中的变量赋值
// #06c .box
const box = document.querySelector(".box");
const boxStyles = getComputedStyle(box); //getComputedStyle()获取到类名为box的所有样式
// console.log(boxStyles);
const boxBorderColor = boxStyles.getPropertyValue("--box-border-color"); //getPropertyValue()获取到--box-border-color属性的属性值
// console.log(boxBorderColor);
const header = document.querySelector("#main-header");
header.style.setProperty("--header-bg-color", "green");