vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue使用原生js创建元素样式不生效

vue使用原生js创建元素样式不生效问题及解决

作者:大白菜飞船

这篇文章主要介绍了vue使用原生js创建元素样式不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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;
}

但是在页面渲染时却不生效:

参考了网上众多方法,有以下几种可能:

1.Vue组件中样式Style中scoped导致样式局部生效,因为采用scoped每个类渲染后会有一个单独的data-v-xxxx编码格式,防止样式污染,去除即可。(这里测试无效)

2.使用样式穿透,跳过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;
}

3.可能是类的优先级,在子类前加上父类,这里时动态创建的类,所以使用了也没效果。

4.我解决的办法:重新创建一个CSS/SCSS样式文件,然后在Vue组件中引用该文件即可,将不生效的样式都放在该样式文件中,不需要再去除scoped和deep。

vue中创建的dom样式失效

原因:less,sass,scss 设置了scoped

关闭scoped即可解决

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文