请教各位大佬如何通过js修改element组件的样式

Question

问题描述
请问各位大佬通过js修改element-ui的样式呢
已经可以在css中通过/deep/+经编译后的id进行修改，如：

/deep/ #tab-name{
&nbsp &nbspfont-size: 16px
}

可是如何用js来动态修改对应id的样式呢
如何在js中使用css中的/deep/呢

Answer 1

何不使用:class呢，你都使用vue了，还用什么原生方法....

Answer 2

跟原生js修改样式一样，修改类名或者style

Answer 3

声明两个css文件，通过js控制选择哪个css文件加载。

Answer 4

简单的修改

<span id="tab-name" style="font-size: 16px;">我是字体</span>
document.getElementById('tab-name').style.fontSize = '16px'

也可以使用

const a = 1

if(a === 1) dynamicLoadCss('第一种样式的url')
if(a === 2) dynamicLoadCss('第二种样式的url')

/**
* 动态加载CSS
* @param {string} url 样式地址
*/
function dynamicLoadCss(url) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.type='text/css';
    link.rel = 'stylesheet';
    link.href = url;
    head.appendChild(link);
}

再或者vue

// css
#tab-name1 {
    font-size: 16px;
}
#tab-name2 {
    font-size: 12px;
}

let status = false

<span 
    :id="status ? 'tab-name1': 'tab-name2'" 
    style="font-size: 16px;"
>
我是字体
</span>