【前端】动态改变样式的几种写法

洛尧

已于 2022-10-28 13:22:55 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript vue.js

于 2022-10-18 13:00:53 首次发布

本文链接：https://blog.csdn.net/qq_43144103/article/details/127385847

前端专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了前端中动态改变样式的三种主要方法：包括使用`:class`结合`{}`、`[]`来切换样式，以及直接通过`:style`属性设置内联样式。此外，也提及了使用JavaScript操作`class`和`style`属性来实现样式变化。对于更改`style`标签内的样式，作者建议避免这种做法，推荐使用内联样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、行内样式

（1）:class=“{}”

<div
	v-for="(item, index) in dataList"
	:key="item.name + index"
	class="sitem"
	:class="{
		'is-active': curName === item.name,
	}"
></div>

（2）:class=“[]”

<div
	v-for="(item, index) in dataList"
	:key="item.name + index"
	:class="[
		'sitem',
		curName === item.name ? 'is-active' : '',
	]"
></div>

（3）:style=“{}”

<div
	v-for="(item, index) in dataList"
	:key="item.name + index"
	:style="{
		color: item.mColor,
		'margin-top': '10px'
	}"
></div>

二、js写法

（1）class

<div
	v-for="(item, index) in dataList"
	:key="item.name + index"
	class="sitem"
	:id="'div_' + item.station_code"
	@click="clickPort(item)"
></div>

clickPort(sitem) {
	let div = document.querySelector('#div_' + sitem.station_code); //id
	if (div.classList.contains('isactive')) {
		div.classList.remove('isactive');
		//
	} else {
		div.classList.add('isactive');
		//
	}
}

（2）style

中间带 ” - ” 的用小驼峰命名就可以了。

clickBlock(i, j) {
	let div = document.getElementById('block'+i+'-'+j);
	if (div.style.backgroundColor==='rgb(159, 236, 231)') {
		div.style.backgroundColor='rgb(159, 236, 197)';
	} else {
		div.style.backgroundColor='rgb(159, 236, 231)';
	}
}
// setProperty()
// removeProperty() 自行百度

三、改变style标签内样式

<script>
export default {
  props: {
    zIndex: {
      default: 999,
      type: Number,
    },
  },
  mounted() {
    this.$refs.UI.style.setProperty('--zIndex', this.zIndex);
  },
  watch: {
    zIndex(val) {
      //, old) {
      this.$el.style.setProperty('--zIndex', val);
    },
  },
}
</script>
<style lang="less" scoped>
.dialog1 {
  width: 81.8rem;
  height: 32rem;
  position: relative;
  z-index: var(--zIndex);
}
</style>