markdown CSS样式获取/设置

Posted 2021-05-05

## Get CSS Variables Values

### Styles Defined Inline
```javascript
const element = document.querySelector('.element');

const fontSize = element.style.fontSize;
const color = element.style.color;

const myVar = element.style.getPropertyValue("--my-var");
```

### Styles Defined in CSS File
```javascript
const element = document.querySelector('.element');
const styles = getComputedStyle(element);

const backgroundColor = styles.backgroundColor;
const myVar = styles.getPropertyValue("--my-var");
```

## Set CSS Variables Values

### Inline
```javascript
const element = document.querySelector('.element');

element.style.setProperty("right", "0px");
element.style.setProperty("--my-var", jsVar + 4);
```