vue项目用原生js动态创建的div的样式不起作用该怎么办

• 一、问题描述
• 二、问题解决

一、问题描述

最近做项目遇到这样一个奇怪的问题，用了高德地图的自定义窗体，但是发现样式无论如何都不起作用。网上查了些资料才得以解决

先看一下不起作用的代码


可以看到样式和动态创建的div都没问题，但是样式就是不起作用，如下图

二、问题解决

通过查看控制台可以看到样式起作用的div都有这样一个特征

都有data-v-xxxxxx这样类似的

再看看我们自己写的渲染出来是什么样的

可以发现并没有上面的特征，所以我就猜想是因为这个原因造成的

那么如何解决这个问题呢？

首先看vue中style的一个属性scoped

在vue项目中通常会给style标签加上scope属性，以此来实现样式的私有化，避免全局污染。
但有的时候这个属性又会带来麻烦：当引入第三方组件且需要修改其样式时，通常出现没有修改成功的情况

记住以下这几句话，或许你就明白问题出在哪里了

1、添加scoped属性之后，DOM节点添加了一个不重复的data属性来表示其唯一性
2、添加scoped属性之后，DOM节点的css选择器末尾添加了data属性选择器来私有化该元素的样式
3、添加scoped属性之后，会给组件的最外部添加data属性，如果组件里面还有包含其他组件，那么其他组件是作用不到的

所以最终的解决办法就是去掉style的scoped属性，或者再额外写一个style，这个style不要加scoped，vue是允许写多个style的

标签：style,vue,样式,动态创建,js,不起作用,scoped,属性
来源： https://blog.csdn.net/qq_41880073/article/details/121748673