动态html样式无效,关于vue的css样式对js动态添加的dom节点不生效问题的解决方法...
问题描述开发的时候免不了有时候需要向某个节点appendchild,添加子节点,但是如果是在vue中,就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点无效。解决思路通过查看原始的节点与新增的节点发现,原始节点与新增节点的class都一样,但是原始的节点在class后面还会多出data-v-XXXXXXX这个属性,然后再去查看head引入的css样式同样发现在cl
问题描述
开发的时候免不了有时候需要向某个节点appendchild,添加子节点,但是如果是在vue中,就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点无效。
解决思路
通过查看原始的节点与新增的节点发现,原始节点与新增节点的class都一样,但是原始的节点在class后面还会多出data-v-XXXXXXX这个属性,然后再去查看head引入的css样式同样发现在class名后面也会多加一个[data-v-XXXXXXX]的后缀。
原因
最后通过测试知道,这是因为vue文件中的style标签添加了scoped的原因,而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效,但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式,于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。
解决办法
把style标签的scoped干掉即可
注意点
当然这么做的前提是你得保证当前vue文件(组件)中的样式不会出现与其他组件样式class重名,否则可能会出现样式覆盖的情况,不过只是一个vue文件(组件)干掉scoped是不会出现样式覆盖的,因为其他的组件可以避免样式覆盖。
注意:本文归作者所有,未经作者允许,不得转载
更多推荐
所有评论(0)