vue项目设置某一页body的背景色

最新推荐文章于 2023-02-28 15:25:06 发布
最新推荐文章于 2023-02-28 15:25:06 发布
阅读量829 收藏 4
点赞数 1
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44917563/article/details/101537059
版权 
    beforeCreate() {		//在页面创建之前设置body的背景色
       document.querySelector('body').setAttribute('style', 'background:#F9F9F9')
    }, 
    beforeDestroy() {		//在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
        document.querySelector('body').removeAttribute('style')
    },
君为红颜笑＆deg
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue-cli中为单独页面设置背景色的实现方法
08-28
下面小编就为大家分享一篇Vue-cli中为单独页面设置背景色的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue页面背景颜色修改
sanmi8276的博客
05-18 6281
由于vue的单页面应用导致我们的项目只有一个index.html文件，然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。 废话不多说直接上代码，亲测百分之百有效： <template> <div> </div> </template> <script> export default { data() { return {}; }, mounted(){}, m
vue项目更换主题色
weixin_45108907的博客
01-06 721
需求：不同的项目需要引入同一个模块，但是ui主题色需要修改 解决： 1，后端提供接口，前端动态设置主题色 2，前端主题色配置在less文件中 /** 用于less变量声明 */ @border_color: #e6e6e6; // 边框颜色 @main_theme: var(--mainTheme, #50CFA0); // 按钮颜色 字体颜色 @main_backdrop_theme: var(--mainBackdropTheme, rgba(23, 94, 250, 0.1));
vue框架中更改body，html页面背景颜色
toplatona
09-06 1万+
beforeCreate () { document.querySelector('body').setAttribute('style', 'background-color:#fff') }, beforeDestroy () { document.querySelector('body').removeAttribute('style') }
vue中的某个页面修改body的背景色
weixin_40667880的博客
08-12 1856
在需要修改的vue页面中添加如下代码： beforeCreate () { // 修改背景色 document.querySelector('body').setAttribute('style', 'background-color:#fff') }, beforeDestroy () { // 销毁背景色 document.querySelector('body').removeAttribute('style') } ...
改变动画背景色.zip
08-10
// 设置body背景色 } setInterval(changeBackgroundColor, 2000); // 每2秒执行一次 ``` 这段代码会每两秒钟随机改变页面的背景颜色。 如果是在更复杂的动画环境中，比如使用了动画库，操作会有所不同。例如，...
vue滚动固定顶部及修改样式的实例代码
10-16
这种方法将元素固定在视口顶部，并通过`margin-top`设置一个值，该值等于需要固定的元素的高度。这样，当滚动时，顶部元素会始终保持在顶部，但不会被其他内容覆盖。 然而，有时候我们可能需要在滚动时动态改变元素...
在Vue中用canvas实现二维码和图片合成海报的方法
10-16
本文将详细讲解如何在Vue项目中通过canvas完成这一任务。 首先，我们需要导入必要的图片资源，如海报背景图和二维码图片。在本例中，海报背景图和二维码图片分别存储在`public`文件夹下的`images`目录中，可以通过`...
利用vue实现模态框组件
08-31
在示例代码中，`.modal`类设置了模态框的定位、z-index、滚动行为等基本样式，`.modal-dialog`类定义了模态框对话框的位置、大小和背景色，而`.modal-backup`类则是用于创建半透明的遮罩层，确保模态框在弹出时能...
[Vue]中给单个页面设置背景色
qq_38136543的博客
09-29 2589
当页面高度并没有撑满整个屏幕时，设置html、body都不能达到撑满整个屏幕高度。通过document设置可以完美解决此问题。此外，style需加上scoped限制，否则会影响其他页面背景色。 document.body.style.backgroundColor="#ffffff"; ...
vue页面如何单独给背景色全方案
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
11-10 1610
第一种 通过mounted钩子函数动态设置背景色 mounted(){ document.body.style.backgroundColor="#ffffff"; } 第二种 通过最外层盒子给他class设置，让最外层盒子固定定位进行设置 #app{ position: absolute; height: 100%; width: 100%; top:0; left: 0; overflow-y: auto; background-co
Vue - 详细实现为每个页面单独设置 body 背景色，利用 JS 为每个页面单独修改背景色（独立修改单个页面的背景色，不同页面设置不同的背景颜色）
王佳斌
08-17 6089
Vue - 每个页面单独设置 body 背景色（独立修改单个页面的背景色，不同页面设置不同的背景颜色），为不同页面设置body背景颜色，vue 单独页面body css 样式设置，vue.js 每个页面page自定义body颜色，vue中怎么修改单个页面body的背景色，Vue中如何实现为单独页面设置背景色，Vue-cli中如何为单独页面设置背景色，如何改变vue 单页面body的背景颜色，Vue不同页面body设置不同背景颜色，vue框架中单页面文件更改body,html页面背景颜色。.........
vue 页面设置背景色
weixin_44805839的博客
09-15 2万+
全部页面设置背景色： 在app.vue的style标签中： page{ background-color: #161622; } 单独页面设置： 在页面中进行如上设置
Vue项目如何配置、切换主题颜色（mixin + scss方式，简单高效）
最新发布
h395910638的博客
02-28 8789
Vue项目主题切换，简单高效，一天搞定三个主题！
初试 vue2.0——4.项目开发_背景图片与底色的设置
dinan9786的博客
03-03 512
写在前面的话： 　　在实际应用中，我们常常遇到背景图片与颜色叠加效果的设计图，如以下效果的： 　　 这个我试过： 　　background：URL(); 　　background-color: rgba( ); 只要 color 写在后面是可以实现的： <!DOCTYPE html> <html lang="en"> <head>...
vue-cli中单独设置body页面背景颜色
lqx_520的博客
01-04 3223
又见面了，今天用vue练习项目，遇到一个问题迟迟不能解决，因为对这个框架确实也不太熟悉，问在这里插入代码片题描述： 问题1：vue-cli结合mint-ui框架，在用到tab切换时，需求是点击导航按钮时要切换页面，而mint-ui中有点击事件，因此在此时添加点击事件并无作用，此时此刻，我们应该如何做呢，如下图代码： 图中方式就可解决； ***问题2***想要在一个页面级的组件内修改body的背景...
vue-cli为页面设置body背景颜色
omg_lwf的博客
06-16 1万+
1.直接在当前的page内设置如下： mounted() { document.querySelector('body').setAttribute('style', 'background-color:#f8f8f8') }, beforeDestroy() { document.querySelector('body').removeAttribute('styl...
document.querySelector()方法
热门推荐
huangbaokang的博客
03-22 15万+
HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。 获取文档中id=”container”的元素 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;ti
vue框架中单页面文件更改body，html页面背景颜色
weixin_40716786的博客
10-13 5541
单页面应用中，在全局body设置了背景颜色和背景图片。但是想要修改其中的一个页面如'/result'这个文件,而又不影响其他的样式，以前看到有例子用position:fixed来修改背景，我个人认为这个仅仅适用于页面篇幅不大，一屏足以显示的页面。可以在‘/result’这个css加上scoped 然后在js的部分加以下代码。亲自试验很有效果。。。 beforeCreate () { ...
vue学习笔记1
08-08
- 在设置登录页面背景色时，发现报错提示缺少`less-loader`。这是因为Vue CLI默认未安装此依赖，需要手动通过npm或yarn安装，并且应当安装在开发依赖中。 - 同时，因为`less-loader`依赖于`less`，也需要安装`less...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值