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

更新时间：2023年06月02日 10:34:27 作者：大白菜飞船

这篇文章主要介绍了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即可解决

总结

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

您可能感兴趣的文章:

在Vue中使用动态import()语法动态加载组件
在Vue中,你可以使用动态import()语法来动态加载组件,动态导入允许你在需要时异步加载组件,这样可以提高应用程序的初始加载性能,本文给大家介绍在Vue中使用动态import()语法动态加载组件,感兴趣的朋友一起看看吧
2023-11-11
vue element-ui el-cascader级联选择器数据回显的两种实现方法
这篇文章主要介绍了vue element-ui el-cascader级联选择器数据回显的两种实现方法，具有很好的参考价值，希望对大家有所帮助。
2023-07-07
vue3手动设置滚动条位置自动定位功能
这篇文章介绍了vue3手动设置滚动条位置自动定位功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-12-12
vue实现页面自适应的常用4种方法
前端页面自适应有很多方法可以实现,本文小编将为大家详细介绍四种常用的方法,并提供相应的代码示例,感兴趣的小伙伴可以跟随小编一起学习一下
2023-10-10
vue如何自定义地址设置@
这篇文章主要介绍了vue如何自定义地址设置@，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue.js常用指令之循环使用v-for指令教程
这篇文章主要跟大家介绍了关于Vue.js常用指令之循环使用v-for指令的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
vue.js 使用v-if v-else发现没有执行解决办法
这篇文章主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下
2017-05-05
使用Vue2实现简单的购物车功能(可直接使用)
这篇文章主要给大家介绍了如何使用Vue2实现简单的购物车功能,文中有相关的代码示例,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
2023-08-08
vue中provide、inject的使用方法案例详解
本教程是介绍如何在vue中使用provide和inject,在 Vue 中,provide 和 inject 是用于实现祖先组件向后代组件传递数据的一种方式,对vue中provide、inject的使用方法感兴趣的朋友一起看看吧
2024-02-02
利用Vue3的Teleport实现模态对话框功能
在前端开发中,模态对话框是一种常见的用户交互方式,它能够有效地提示用户、收集信息或确认操作,随着现代框架的演进,Vue 3 的出现为我们提供了更便捷、高效的方式来处理复杂的界面布局,今天,我们将深入探讨如何利用 Vue 3 的新特性 Teleport 来实现模态对话框
2025-02-02