style-template-string

功能

通过模板字符串标记实现链式函数调用，更简洁的一次性修改DOM多个样式及属性。

教程（以Vue为例）

下载

npm install style-template-string

引入

// 建议在main.js全局引入
import 'style-template-string'

使用

mounted() {
    // 需要在mounted钩子之后调用
    const hello = document.querySelector('.hello')
}

修改样式

const color = 'red'

hello.setStyle`
    font-size: 40px;
    color: ${color};
    border: 1px solid #ccc
`

修改属性

const b = 2

hello.setProp`
    a: 1;
    b: ${b};
    data-c: 3
`

修改内容

const text = 'content text'

hello.setContent`this is a ${text} !!!`

链式调用

hello.setStyle`
    font-size: 40px;
    color: ${color};
    border: 1px solid #ccc
`.setProp`
    a: 1;
    b: ${b};
    data-c: 3
`.setContent`this is a ${text} !!!`