vue动态插入内容 v-html 的样式无效解决方法

撑起自己半边天

于 2022-04-08 10:35:25 发布

阅读量8k

点赞数 7

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

本文链接：https://blog.csdn.net/weixin_43840289/article/details/124035138

版权

vue 专栏收录该内容

20 篇文章

订阅专栏

在Vue项目中遇到动态插入的HTML内容样式无法生效的问题。通过document.createElement创建的DOM元素不受scoped样式影响。解决方案是使用深度作用选择器>>>，在CSS中添加>>>.element来正确应用样式。这样可以确保动态生成的div元素及其子元素应用到预期的样式，如宽度、高度、阴影和边框等。

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

vue v-html 动态内容样式无效解决方法

今天项目遇到一个通过document 插入的一段html标签的样式不起作用，代码如下：

for(...){
	var element = document.createElement( 'div' );
	element.className = 'element';
	element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
	var img = document.createElement('img');
	img.src = this.tableSum[ i ].image;
	element.appendChild( img );
}

//style样式
.element {
	width: 130px;
	height: 130px;
	box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
	border: 1px solid rgba(127,255,255,0.25);
	font-family: Helvetica, sans-serif;
	text-align: center;
	line-height: normal;
	cursor: default;
}

样式是不生效的！

解决方法：
通过 v-html 创建的 DOM 内容不受 scoped 样式影响，但是可以通过深度作用选择器来为他们设置样式。前面加 ‘>>>’，就完美解决了

>>>.element {
				width: 130px;
				height: 130px;
				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
				border: 1px solid rgba(127,255,255,0.25);
				font-family: Helvetica, sans-serif;
				text-align: center;
				line-height: normal;
				cursor: default;
			}

仅笔记，便查阅