[JS]导航栏中Button返回按钮

最新推荐文章于 2021-12-11 16:10:52 发布

风浅月明

最新推荐文章于 2021-12-11 16:10:52 发布

阅读量605

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/wsyx768/article/details/110390437

版权

Web 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript创建并调整网页导航栏的背景样式，包括设置背景颜色、图片、位置和重复性，以及实现返回按钮的垂直居中对齐。通过对`background`属性的详细解析，展示了如何精细化控制网页元素的视觉效果。

摘要由CSDN通过智能技术生成

默认样式

样式调整

属性background

导航添加的返回按钮

默认样式

var tempNav = document.createElement("div");
tempNav.style.backgroundColor = "#2049a7";
tempNav.style.width = "100%";
tempNav.style.height = "64px";
tempNav.style.position = "sticky";
tempNav.style.top = "0px";
baseDiv.appendChild(tempNav);

var tempReturn = document.createElement("button");
tempReturn.style.background = "url(img/fanhui.png)";
tempReturn.style.width = "44px";
tempReturn.style.height = "44px";
tempReturn.style.border = "none";
tempNav.appendChild(tempReturn);

默认样式如下：

样式调整

var tempReturn = document.createElement("button");
// tempReturn.style.background = "url(img/fanhui.png) no-repeat center center";
tempReturn.style.background = "url(img/fanhui.png)";    // 背景图片
tempReturn.style.backgroundPosition = "center center";  // 图片位置 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％
tempReturn.style.backgroundRepeat = "no-repeat";        // 设置背景图片不重复
tempReturn.style.outline = "none";                      // button去掉点击时的边框
tempReturn.style.width = "44px";
tempReturn.style.height = "44px";
tempReturn.style.border = "none";                       // 去掉边框
tempReturn.style.position = "relative";                 // 垂直居中
tempReturn.style.top = "50%";                           // 垂直居中
tempReturn.style.transform = "translateY(-50%)";        // 垂直居中
tempNav.appendChild(tempReturn);

调整后样式如下：

属性background

语法： background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background-color	指定要使用的背景颜色
background-position	指定背景图像的位置
background-size	指定背景图片的大小
background-repeat	指定如何重复背景图像
background-origin	指定背景图像的定位区域
background-clip	指定背景图像的绘画区域
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动
background-image	指定要使用的一个或多个背景图像