【vue】Vue中使用原生js创建元素样式不生效解决办法 |
您所在的位置：网站首页 › js修改css样式属性不生效怎么办 › 【vue】Vue中使用原生js创建元素样式不生效解决办法 |
|
在Vue项目中也会遇到需要动态创建DOM的情况，但是采用指定className的方式给创建的DOM元素指定样式不起作用，在调试界面能看到类名被解析，但是样式未加载，三天里尝试了N种方法，终于填了这个大坑，有需要的可以参考一下： measureTooltipElement = document.createElement('div') measureTooltipElement.className = "ol-tooltip ol-tooltip-measure"样式： .ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 14px 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } .ol-tooltip-measure { opacity: 1; font-weight: bold; }但是在页面渲染时却不生效 参考了网上众多方法，有以下几种可能： Vue组件中样式Style中scoped导致样式局部生效，因为采用scoped每个类渲染后会有一个单独的data-v-xxxx编码格式，防止样式污染，去除即可。（这里测试无效）使用样式穿透，跳过scoped，这样就不用去除scoped造成全局样式污染。Vue2使用/deep/ className，Vue3使用:deep(className)，此外还有>>>（可以尝试一下，我这里没有效果）。 // Vue3 :deep(.ol-tooltip) { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 14px 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } :deep(.ol-tooltip-measure) { opacity: 1; font-weight: bold; } // Vue2 /deep/ .ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 14px 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } /deep/ .ol-tooltip-measure { opacity: 1; font-weight: bold; } 可能是类的优先级，在子类前加上父类，这里时动态创建的类，所以使用了也没效果。我解决的办法：重新创建一个CSS/SCSS样式文件，然后在Vue组件中引用该文件即可，将不生效的样式都放在该样式文件中，不需要再去除scoped和deep。跟转载作者遇到问题基本相同，各种方法都经过尝试，只有最后一种方法生效，特此记录。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |