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

原创已于 2022-12-07 17:06:53 修改 · 8.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-10-21 17:35:09 首次发布

嗷嗷学习的JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了三种在前端中动态设置元素样式的常见方法：通过获取节点style直接修改、通过class类名或id设置样式，以及在Vue中使用v-bind:style进行条件样式绑定。同时，讲解了如何通过不同方式获取DOM节点，包括通过id、标签名、类名、name属性和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选择器')