vue 中 通过js插入的dom 无法生效css

最新推荐文章于 2024-07-01 14:01:10 发布
最新推荐文章于 2024-07-01 14:01:10 发布
阅读量1.9k 收藏 3
点赞数 5
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43815091/article/details/123987002
版权

vue 中 通过js插入的dom 无法生效css

问题描述

通过js向div中动态添加dom后，事先写好的css样式对新增的dom不生效
在这里插入图片描述

在这里插入图片描述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jiTxEElY-1649219103507)(vx_images/245342312246906.png)]

原因

通过测试，这是因为vue文件中的style标签添加了scoped的原因，而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效，但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。

解决办法

把style标签的scoped干掉即可
在这里插入图片描述
在这里插入图片描述

注意点

当然这么做的前提是你得保证当前vue文件(组件)中的样式不会出现与其他组件样式class重名，否则可能会出现样式覆盖的情况，不过只是一个vue文件(组件)干掉scoped是不会出现样式覆盖的，因为其他的组件可以避免样式覆盖。

腾梦
关注
前端速成教程（HTML、CSS、JS、Vue…）
https://www.hyperplasma.top
05-06 3698
JavaWeb开发 SSM框架基础 前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化。Web技术教程：W3Schoo。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。
关于vue.js过渡css类名的理解(推荐)
11-29
在Vue中，过渡效果是通过CSS、JavaScript或者内置的过渡组件实现的，尤其对于复杂的用户交互，过渡效果能显著提升用户体验。 在Vue中，过渡涉及到四个主要的CSS类名，它们用于控制元素进入和离开时的状态变化： 1....
解决vue页面DOM操作不生效的问题
08-27
下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue的css样式对js动态添加的dom节点不生效问题
TTianYe的博客
08-18 1132
一句话： 把style标签的scoped干掉，变成全局样式即可
使用VUE框架后，绑定事件失效了
博客驿站
11-25 1万+
今天遇到一个问题，以前没留意过，在初始化vue对象之前 元素绑定的方法都失效了，我还以为是我的方法写错了；debugger了下，没错！绑定了，然后走过vue之后，绑定的时间都没了！为什么会这样呢？晚点查一下，忙
解决vue 中使用v-html或者jquery 动态添加dom元素，样式不生效
会飞的咕咕鱼的博客
05-12 4162
原因： 新添加的dom，在实际意义上是一个子组件，vue中当我们给style设置了 scoped,该样式就只针对当前组件生效，样式不会渗透到子组件。 解决办法： 1. 把样式写在公共全局css中。 2.使用深度选择器 >>> 或 /deep/。注意：>>>只在css中生效，Less\Sass中不生效。语法： css : .parent >>> .child{ ...
vue 中创建的dom样式失效
tao__f的博客
02-28 599
原因:less,sass,scss 设置了scoped 关闭scoped即可解决
vue3.0中使用postcss-pxtorem的具体方法
10-15
在Vue 3.0框架中，使用`postcss-pxtorem`是一个有效的方法，可以帮助开发者将CSS中的像素单位（px）转换为相对单位（rem），从而实现响应式布局，特别是在移动端设备上。`postcss-pxtorem`是一个PostCSS插件，它的...
vue element 项目默认css文件 style
01-02
总的来说，Vue Element项目中的`styles`文件是项目样式管理的核心部分，它负责存储和管理全局样式，通过在`main.js`中引入，确保这些样式在整个项目中生效。合理地使用和组织`styles`文件，可以提高项目的可维护性和...
vue通过v-html指令渲染的富文本无法修改样式的解决方案
10-15
在Vue.js应用中，`v-html`指令用于将纯HTML字符串插入到DOM中，而不是作为文本内容。然而，当使用`v-html`渲染富文本时，可能会遇到一个问题：无法通过CSS样式表修改这些动态插入的元素样式。这个问题的原因在于Vue...
vue动态加载外部依赖js代码实现
11-19
本文档把js加载做成vue组件，便于在其他模块引用，符合vue整体思路，供大家参考借鉴
js新建dom节点添加类，类名被解析但是样式不加载
m__yue的博客
07-01 452
2.使用样式穿透，跳过scoped，这样就不用去除scoped造成全局样式污染。1.Vue组件中样式Style中scoped导致样式局部生效，因为采用scoped每个类渲染后会有一个单独的data-v-xxxx编码格式，防止样式污染，去除即可。4.重新创建一个CSS/SCSS样式文件，然后在Vue组件中引用该文件即可，将不生效的样式都放在该样式文件中，不需要再去除scoped和deep。3.可能是类的优先级，在子类前加上父类，这里时动态创建的类，所以使用了也没效果。
动态加载js或css
sugang_ximi的专栏
01-23 534
function loadHeadFile(filename, type){ var fileref; // 新头文件对象 var files; // 现有头文件 var attr; // 文件类型 switch(type){ case 'css': // 添加css文件
Vue中动态加载css、js、字体
暗影之拳的博客
08-25 2764
1.首先封装三个公用方法 //动态加载css loadStyle(url) { var link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = url; //css链接 var head = document.getElementsByTagName('head')[0]; he
解决Vue项目中使用原生/jquery插件无法获取DOM的问题
量子前端的博客
05-20 2492
问题场景 Vue项目中有需求，是使用jquery的滚动插件，插件本质是在window.onload中获取滚动DOM并且对他进行一些操作。 发现问题 脚本中的DOM获取到的结果为null，因此脚本也没有生效，如图： 项目目录是这样的： 我原来的理解：脚本在app容器下面，脚本执行中会获取到DOM，但是仔细思考Vue的渲染原理，其实Vue在生成虚拟DOM之后是进行真实DOM的异步渲染，为了性能角度，并且在修改完状态后也是异步的方式进行渲染，想要在Vue中获取DOM可以使用nextTick。 而这些插件其实
vue中css样式不生效的原因及解决方式
热门推荐
weixin_46446967的博客
09-15 3万+
相信有很多小伙伴入门使用组件库时,设置样式不生效,下面分析一下为什么出现这种问题,以及解决方式 我们在使用vue开发时,在style中加入scoped
关于vue的动态添加dom节点及样式不生效问题的解决办法
weixin_40243502的博客
11-07 2868
属性，那么样式只会应用到当前组件的作用域内，而不会影响其他组件或全局样式。时，新添加的HTML内容中的类名无法生效，因为样式作用域被限制在组件内部。在Vue中，如果你的样式标签中包含。指令将HTML内容渲染到元素中。2.类名不生效问题解决。
Vue中使用原生js创建元素样式不生效解决办法
qq_45118905的博客
09-13 3098
【代码】Vue中使用原生js创建元素样式不生效解决办法。
Vue修改Dom不生效的问题
messi30lz的博客
09-08 1445
注释掉的内容没有效果是因为对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。vue的基本原理是通过Object.defineProperty重写变量的get和set方法来实现监听变量的改变和通知页面重新渲染的。解决数据没有被双向绑定我们可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名。场景：data中定义一个空数组，在mouted中用请求到大数据对其进行赋值，进入主页面不生效。
vue中重置css样式
最新发布
03-08
### 实现 CSS 样式重置的方法 #### 全局样式重置 为了确保整个 Vue 项目的样式一致性，可以在项目入口文件 `main.js` 或者创建一个新的全局样式文件来进行样式的初始化。使用 normalize.css 可以保持浏览器默认样式的实用性并解决跨浏览器差异。 ```javascript // main.js import './assets/css/normalize.css'; ``` 这使得所有页面加载时都会应用这些基础样式规则[^2]。 对于更彻底的样式清除，则可以考虑引入 Reset.css： ```bash npm install --save reset-css ``` 接着同样在 `main.js` 文件里导入此库： ```javascript // main.js import 'reset-css'; ``` 这种方式下，所有的 HTML 元素都将被赋予统一的基础样式设置，消除了浏览器间固有的样式不一致问题[^1]。 #### 组件内部样式处理 如果仅希望影响特定组件而不改变其他地方的表现形式，在单文件组件 (SFC) 中可以直接定义 scoped 的 `<style>` 块来限定作用范围内的样式覆盖行为。 ```html <template> <!-- 组件模板 --> </template> <script setup lang="ts"> /* 组件逻辑 */ </script> <style scoped> @import url('https://unpkg.com/reset-css/reset.min.css'); /* 额外自定义样式 */ body { font-family: Arial, sans-serif; } </style> ``` 上述例子展示了如何在一个单独 SFC 内部通过链接外部资源的方式来执行局部性的样式清理工作；当然也可以选择下载本地副本再做相同操作[^3]。 需要注意的是，当采用 scoped 属性时，所声明的选择器只会应用于当前组件实例中的 DOM 结构上，从而减少了意外修改到无关区域的风险。 #### 自定义全局样式解决方案 另一种做法是在根级 App.vue 文件中加入非 scoped 的 style 标签用于放置那些应该贯穿始终生效的一般性样式调整语句。这样既不影响其它独立模块又能达到预期效果。 ```html <!-- src/App.vue --> <template> <router-view></router-view> </template> <script setup lang="ts"></script> <style> @import '~normalize.css'; /* 使用 Webpack 别名简化路径 */ *, ::before, ::after { box-sizing: border-box; /* 确保盒模型计算方式一致 */ } h1,h2,h3,p,a,ul,ol,li,... { /* 对常用标签指定通用属性 */ margin:0; padding:0; list-style:none; } </style> ``` 这种方法允许开发者灵活地组合多种策略，既能利用第三方工具带来的便利又不失对细节之处的手动把控能力。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值