让不懂建站的用户快速建站，让会建站的提高建站效率！
发布日期：2024-11-02 13:33 点击次数：167
1. **CSS变量的界说** - **语法**：在CSS中，变量界说使用`--`前缀。举例，在`:root`选定器（它匹配文档的根元素，在HTML中频繁是`<html>`元素）中界说变量： ```css :root { --primary - color: blue; --secondary - color: green; } ``` - **作用域**：变量界说的作用域很热切。若是在`:root`中界说，变量在系数文档中齐不错探询（假定莫得被更围聚元素的同名变量掩盖）。也不错在其他选定器里面界说变量，这么变量的作用域就闭幕在该选定器过火后代元素中。举例： ```css .container { --container - padding: 10px; } .content { padding: var(--container - padding); } ``` - **细隐痛项**：变量名是差别大小写的，况兼要顺从CSS中绚烂符的定名规章，即不成以数字开头，不成包含空格等突出字符（除了连字符`-`）。
2. **CSS变量的应用** - **在属性值中使用**：不错将变量应用于多样CSS属性值。举例，诞生文本脸色、布景脸色、边框脸色、尺寸等。 ```css h1 { color: var(--primary - color); } button { background - color: var(--secondary - color); border: 1px solid var(--primary - color); } .box { width: var(--box - width, 100px);/* 第二个参数是默许值，若是变量未界说则使用 */ height: var(--box - height); } ``` - **在媒体查询中使用**：CSS变量也不错用于媒体查询，使形貌凭证不同的修复特质愈加机动地更动。 ```css @media screen and (min - width: var(--tablet - breakpoint)) { .sidebar { display: block; } } ``` - **动态主题切换**：不错行使CSS变量粗浅地完竣主题切换功能。举例，界说一个深色主题和淡色主题的变量集，通过切换类名轻视其他样子来改换系数页面的主题。 ```css .light - theme { --text - color: black; --background - color: white; } .dark - theme { --text - color: white; --background - color: black; } body { color: var(--text - color); background - color: var(--background - color); } ```
3. **JS操作CSS中的变量** - **得回变量值**：在JavaScript中，不错通过`window.getComputedStyle()`设施得回元素的策画形貌，然后得回变量的值。 ```javascript const element = document.querySelector('h1'); const styles = window.getComputedStyle(element); const primaryColor = styles.getPropertyValue('--primary - color'); console.log(primaryColor); ``` - **诞生变量值**：不错通过修改元素的`style`属性轻视添加内联形貌来诞生CSS变量的值。 - **使用`style`属性**： ```javascript const element = document.querySelector('.box'); element.style.setProperty('--box - width', '200px'); ``` - **通过添加内联形貌（更机动的样子）**： ```javascript const element = document.querySelector('.box'); const newStyle = `--box - width: 300px; --box - height: 300px;`; element.setAttribute('style', element.getAttribute('style')? element.getAttribute('style') + newStyle : newStyle); ``` - **反馈式更新**：琢磨JavaScript事件（如窗口大小改换、用户交互等）来动态更新CSS变量，完竣反馈式瞎想。举例，凭证窗口宽度动态更动元素的间距等变量。 ```javascript window.addEventListener('resize', () => { const element = document.querySelector('.container'); const width = window.innerWidth; const newPadding = width * 0.1 + 'px'; element.style.setProperty('--container - padding', newPadding); }); ```
