vue单页面里使用body背景色不生效

最新推荐文章于 2024-01-09 17:44:38 发布
最新推荐文章于 2024-01-09 17:44:38 发布
阅读量549 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a964564277/article/details/130052993
版权
这篇文章讲述了如何在Vue.js的生命周期钩子函数中，通过JavaScript操作DOM，分别在beforeCreate和beforeDestroy阶段改变及恢复body元素的背景色。利用setAttribute设置背景色为#f7f8f9，而在组件销毁前通过removeAttribute移除样式属性，达到动态控制页面视觉效果的目的。
摘要由CSDN通过智能技术生成

可以通过js控制背景色
// 创建节点之前就设置背景色
beforeCreate() {
document.querySelector(“body”).setAttribute(“style”, “background:#f7f8f9”);
},
// 销毁节点之前就删除属性
beforeDestroy() {
document.querySelector(“body”).removeAttribute(“style”);
},

蹉跎年华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue页面DOM操作不生效的问题
08-27
在Vue框架中，页面动态更新是非常常见的需求，但有时候开发者可能会遇到在页面上进行DOM操作不生效的问题。这种情况通常发生在某些数据更新之后，但直接进行DOM操作时，并没有取得预期效果。Vue使用的是虚拟DOM...
使用Vue-cli 中为单独页面设置背景图片铺满全屏
10-15
在前端开发中，尤其是在使用Vue-cli创建的项目中，我们经常会遇到需要为某个页面设置全屏背景图片的需求。这个过程主要涉及到CSS样式的设置，以确保背景图片可以覆盖整个页面并且不会出现重复或拉伸失真的情况。下面...
body的100%以及background设置不生效
最新发布
wuqudhen的博客
01-09 592
在vue单页面设置body的background-color不生效，解决办法。在common.less中写入。然后再在main.js中引入。问题已解决（原来如此简单，哎）
Vue中html、body设置背景色不能覆盖全局
wsx981049288的博客
05-27 391
观察了下，在vue页面中设置html和body的背景色是无法覆盖全局的。所以可以在App.vue中，设置。
vue设置body样式不生效
desongzhang的博客
06-09 3892
去掉scoped 属性，这个表示它的样式作用于当下的组件，使得该css样式不影响到其他组件或本组件的子组件，也保护的本组件的样式不受其他组件影响。 <style lang="less" > @import "./assets/css/reset.css"; @import "./assets/iconfont/iconfont.css"; // 滚动条样式 /* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 5px; } /* 滚动槽 */ ::-web
vue body样式不生效
weixin_35752645的博客
01-10 1986
您好！如果您的 vue 组件的 body 样式不生效，可能有以下几种原因： 您的样式规则可能被其他样式规则覆盖了。在检查样式规则时，请确保 body 样式规则在后面。 您的样式规则可能没有正确应用到 body 元素上。确保样式规则中的选择器与 body 元素匹配。 如果您使用了 style 标签或 style 属性来应用样式，请确保这些样式在您的 vue 组件的 template 中。 如...
设置 body 背景颜色，高度设置为100%不起作用
liyichuanZhengzhou的博客
05-10 845
问题：body 内容为空，或者 body 高度未撑满设备屏幕，若渲染页体背景颜色，颜色无法覆盖上下全屏的效果，即使在 body 中设置 100% 也无济于事。因此，若将 body 的父元素 html 设为 100%，它的子级元素 body 的 height:100% 便发生作用了，以此类推，所有子元素均遵循该规则。也就是说实际开发中，若未设置 body 高度，或者 body 中没有子元素，body 是没有高度的。原因：一个元素高度是否可以使用百分比显示，取决于元素的父级元素，认状态下 body 高度为0。
Vue-cli中为单独页面设置背景色的实现方法
08-28
在 Vue-cli 项目中，为单独页面设置背景色的实现方法是使用 fixed 属性，并将背景色设置到整个屏幕上，而不仅仅是当前页面的容器。这是一种非常实用的解决方案，可以使我们的页面更加美观和易于使用。
vue里input根据value改变背景色的实例
01-19
1、首先定义两个不同的 .null-input .el-input__inner { background-color: rgba(255, 255, 255, 0.8); color: #525661; font-size: 16px; } .no-null-input .el-input__inner { background-color: rgba(255, 255, ...
Vue中html全屏背景色（height：100%不能生效时）
weixin_51356219的博客
05-21 2727
有以下两种方法 1、把百分比符号换成“vh”(推荐) .box { height: 100vh; background-color: rgb(44, 88, 233); } 2、在全局样式表common.css(自己起名字)中设置#app的高度为100%，再在所需页面设置#app的背景颜色 common.css中： html, body, #app{ height: 100%; margin: 0; padding: 0; } 组件中： #app { bac.
在uni-app项目中设置背景颜色/微信小程序设置 backgroundColor无效的问题
dandanmei0513的博客
05-07 1117
uniapp设置背景颜色无效
vue+nuxt项目，单独给一个页面设置背景颜色无法满屏的情况
木子的博客
03-21 1830
完整采坑过程和解决结果： 1、我想给一个子页面单独设置一个背景颜色。 2、通过给body设置颜色后发现其他页面的颜色也变了。 3、然后通过scoped来限制css样式只在当前页面生效，设置scoped后body的背景色失效了。 4、然后我又给template内的第一个div标签设置背景色，设置完发现无法满屏，上下左右均有一条白线。 5、随后查到可以通过position: fixed解决，背景颜色成功满屏。 6、但随后我又发现页面无法通过鼠标滚轮滚动了，一番折腾，发现position的fixed要
解决vue组件中给body设置样式不起作用的简单办法
wjm0519的博客
09-10 3067
给template中的第一个div设置如下样式 html css
Vite+Vue3+ElementUI Plus自动引入时自定义主题不生效问题
胡海龙
04-28 2860
本文描述了使用Vite+Vue3+ElementUI-Plus时在自定义主题中由于使用了自动引入导致的主题不生效的问题和解决方法。
Vue-cli 中为单独页面设置背景色的方法
qq_26982559的博客
04-14 1万+
例子：                                 支付成功                 学车所需资料                   学车考照流程               1.如果直接在css中设置body的background-color，会导致其他页面的背景色响应改变，所以不可取；
Vue 单独页面设置 body 样式
weixin_44590591的博客
01-07 6447
需求：针对不同的页面， 的样式需要做一些变化。比如不同页面设置不同的背景色，如果直接在页面里设置 body 的样式，页面并不会生效，如下： <template> <div>单独页面</div> </template> <style> body { backgroud-color: #ccc; min-width:400px; } </style> 解决方法 <template> <
vue 解决界面不渲染问题/下一次操作才渲染上一次操作的最新数据
树上骑个猴的博客
12-16 1万+
提示：首先确认数据是没问题的，此时如果是界面没有实施渲染，特别是等到用户下一次操作才渲染。以下的解决方案才有效果 出现问题的原因： 我使用了el-table，v-for渲染表单的控件，该表单中有两个下拉框，当A下拉框改变selected值时，B下拉框要去请求接口，更新下拉选项。此时把最新的下拉选项更新上去，但是我发现数据请求到了，赋值上去，但是下拉不会显示最新的，要等到再次改变A下拉框的seleted值时，B下拉框的下拉选项才显示上一次请求到的数据。 解决方案 this.$forceUpdate();
vue设置页面背景色
热门推荐
u014678583的博客
03-04 1万+
mounted() { document.querySelector('body').setAttribute('style', 'background-color:#f6f6f6') }, beforeDestroy() { document.querySelector('body').removeAttribute('style') ...
vue 页面改body背景色
04-01
在 Vue 中改变 body 背景色，需要在根组件（一般是 App.vue）中使用 mounted 钩子函数，并通过 document.body.style.backgroundColor 来改变背景色，代码如下： ```html <template> <div> <!-- 页面内容 --> </div> </template> <script> export default { name: 'App', mounted() { document.body.style.backgroundColor = '#f2f2f2'; // 修改背景色 } } </script> ``` 在 mounted 钩子函数中执行操作，可以保证在页面渲染完成后修改背景色。注意，直接在模板中使用 style 属性设置 body 的背景色是无效的，因为模板中的样式只会作用于组件内部的元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值