Vue3通过JS修改Css样式(附节点获取相关知识)

方法一：通过获取节点style(获取标签节点)

// 例隐藏body滚动条
let bodyStyle = document.body.style;
bodyStyle.overflowY = 'hidden';

// 通过class类名设置样式
let byClass = document.getElementsByClassName('navTabs')[0].style
byClass.color = '#eee'

// 通过id设置样式
let byClass = document.getElementById('navTabs').style
byClass.color = '#eee'

方法二：通过动态设置class

<!-- 样式名：判断条件1 === 判断条件2 -->
<li :class="{ current: current === lis }"></li>

方法三：直接动态设置style

<!-- {样式名: 判断条件1 === 判断条件2 ? '满足' : '不满足'}-->
<span :style="{ color: current === index ? '#4b92fc' : '#333333' }"></span>

附节点获取相关知识

// 通过id名
document.getElementById('id名')

// 通过标签名，获取到符合的集合，用[0]角标区分
document.getElementsByTayName('标签名')

// 通过类名，获取到符合的集合，用[0]角标区分
document.getElementsByClassName('类名')

// 通过标签name值
document.getElementsByName('name属性的值')

// 通过css选择器,获取到满足css选择器的第一个标签
document.querySelector('css选择器')

// 通过css选择器,获取所有满足css选择器的标签
document.querySelectorAll('css选择器')