vue 在 mounted 中 通过 js 修改html、body节点的样式,设置背景图片
1、在 App.vue 中加入 body 样式,并修改默认样式(使背景图片四周不留空白)2、在需要背景图的页面里加入样式3、在原有代码中的 div 外再套一层 div 并引入第二步的样式
·
在 mounted 中 通过 js 修改html、body节点的样式
this.$nextTick(() => {
const bodyStyle = document.body.style, // 获取body节点样式
htmlStyle = document.getElementsByTagName("html")[0].style, // 获取html节点样式
docEl = document.documentElement,
docBody = document.body,
winWidth = docEl.clientWidth || docBody.clientWidth, // 获取浏览器的宽度
WinHeight = docEl.clientHeight || docBody.clientHeight; // 获取浏览器的高度
bodyStyle.background = "red"; // 重置body节点的背景颜色
htmlStyle.background = "red"; // 重置html节点的背景颜色
});
在 vue 中设置背景图片
1、在 App.vue 中加入 body 样式,并修改默认样式(使背景图片四周不留空白)
#app,
body {
margin: 0;
padding: 0;
border: 0;
}
2、在需要背景图的页面里加入样式
#box {
position: fixed;
width: 100%;
height: 100%;
background: url("../assets/bg.jpg");
background-size: 100% 100%;
}
3、在原有代码中的 div 外再套一层 div 并引入第二步的样式
<template>
<div id="box">
<div>主体代码</div>
</div>
</template>
更多推荐
已为社区贡献7条内容
所有评论(0)