CSS-变量

以你之姓@ 2021-07-24 18:59 420阅读 0赞

# CSS变量 #

### 声明变量和使用变量 ###

# CSSStyleDeclaration #

## getComputedStyle ##

返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问

// html
    <div class="fo-blue">js操作css变量</div>
    
    // js
    let text1 = document.querySelector('.fo-blue')
    var text1_style = getComputedStyle(text1)
    console.log('这个是通过getComputedStyle API拿到的',text1_style)
    console.log('这个是通过DOM.style拿到的',text1.style)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]

## getPropertyValue ##

返回一个 [`DOMString`][DOMString] ，这个返回值将会包含预请求的CSS属性信息。

### 语法 ###

var value = style.getPropertyValue(property);

### 例子 ###

![在这里插入图片描述][20200320183010267.png]

## getPropertyPriority（不常用） ##

根据传入的CSS属性，返回一个 [`DOMString`][DOMString] 来表示该属性的优先级。

语法：

var priority = style.getPropertyPriority(property);

例子

var declaration = document.styleSheets[0].cssRules[0].style;
    var isImportant = declaration.getPropertyPriority('margin') === 'important';

## setProperty ##

为一个声明了CSS样式的对象设置一个新的值 。

### 语法 ###

style.setProperty(propertyName, value, priority);
    
    propertyName 
    //是一个 DOMString ，代表被更改的CSS属性。
    value  可选 
    /*是一个 DOMString ，含有新的属性值。如果没有指定, 则当作空字符串。 注意: value 不能包含 "!important" --那个应该使用 priority 参数.*/
    priority  可选 
    //是一个 DOMString 允许设置 "important" CSS 优先级。如果没有指定, 则当作空字符串。

### 举例 ###

字体颜色由初始化的蓝色变成黄色

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style> :root { --size:80px; --color:blue; } .fo-blue { font-size: var(--size); color: var(--color); } </style>
    	</head>
    	<body>
    		<div class="fo-blue">js操作css变量,点我无限放大</div>
    	</body>
    	<script> let roots = document.querySelector(':root') let text1 = document.querySelector('.fo-blue') var text1_style = getComputedStyle(text1) text1.style.setProperty('--color','yellow') // 此注意：不能用getComputedStyle(text1)，只能用dom.style </script>
    </html>

### 另辟蹊径 ###

还有一种方法js操作css变量

#### 使用setAttribute改变css的变量值 ####

##### 关键 #####

roots.setAttribute('style', '--size:' + value++ + 'px')

##### 全部代码 #####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style> :root { --init: 50px; --blue: blue; --size: var(--init); } .fo-blue { font-size: var(--size); color: var(--blue); -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } </style>
    	</head>
    	<body>
    		<div class="fo-blue">js操作css变量,点我无限放大</div>
    	</body>
    	<script> let roots = document.querySelector(':root') let text1 = document.querySelector('.fo-blue') var text1_style = getComputedStyle(text1) var value = getComputedStyle(text1).getPropertyValue('--init').slice(0, -2); text1.addEventListener('click', function() { roots.setAttribute('style', '--size:' + value++ + 'px') }) </script>
    </html>

## removeProperty ##

移除style对象的一个属性。

### 语法 ###

var oldValue = style.removeProperty(property);

### 举例 ###

let text1 = document.querySelector('.fo-blue')
    text1.style.removeProperty('margin-top')

## item ##

通过下标从 [`CSSStyleDeclaration`][CSSStyleDeclaration] 返回一个 CSS 属性值。只要传入参数这个方法就不会抛出异常； 当传入的下标越界时会返回空字符串，当未传入参数时会抛出一个 `TypeError` 。

语法：

var propertyName = style.item(index);

举例：

var style = document.getElementById('div1').style;
    var propertyName = style.item(1); // or simply style[1] - returns the second style listed

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]: /images/20210724/228374deec4d4bd6a1f7ba461c9fc39d.png
[DOMString]: https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString
[20200320183010267.png]: /images/20210724/9210ad51d3de4f33b89c0520fbb9c521.png
[CSSStyleDeclaration]: https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration