下面是关于JS动态修改网页body的背景色实例代码的完整攻略:
步骤一:准备html与css代码
首先,我们需要准备一个HTML页面以及相应的CSS样式表。下面是一个简单的HTML页面,其中在body标签中设置了一个CSS类名为"bg-color":
<!DOCTYPE html>
<html>
<head>
<title>JS动态修改网页body的背景色实例代码</title>
<style>
.bg-color {
background-color: #ccc;
}
</style>
</head>
<body class="bg-color">
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
步骤二:编写JS代码
接下来,我们需要编写一个JavaScript函数,用于动态修改网页的背景色。代码如下:
function changeBgColor(color) {
document.body.style.backgroundColor = color;
}
该函数接受一个参数color,用于指定要设置的背景色。在函数内部,我们通过document.body来获取网页的body元素,并设置其backgroundColor属性为传入的color值。
步骤三:调用JS代码
最后,在HTML页面中添加一个按钮,并在按钮的click事件中调用changeBgColor函数来改变页面的背景色。具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>JS动态修改网页body的背景色实例代码</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<button onclick="changeBgColor('#f00')">红色背景</button>
<button onclick="changeBgColor('#0f0')">绿色背景</button>
<button onclick="changeBgColor('#00f')">蓝色背景</button>
<script>
function changeBgColor(color) {
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>
在该示例代码中,我们添加了三个按钮,分别调用changeBgColor函数并传入不同的颜色值来改变背景色。用户可以通过点击按钮来切换不同的背景色。
另外,我们也可以通过在文本框中输入颜色值来触发JS代码,从而实现更加灵活的页面背景色切换。具体操作方法可以参考下面的示例:
<!DOCTYPE html>
<html>
<head>
<title>JS动态修改网页body的背景色实例代码</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<input type="text" id="bg-color" placeholder="输入背景色">
<button onclick="changeBgColor()">切换背景色</button>
<script>
function changeBgColor() {
var color = document.getElementById('bg-color').value;
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>
在该示例代码中,我们添加了一个文本框和一个按钮,当用户在文本框中输入颜色值并点击按钮时,JS代码将获取文本框中输入的值,并将其设置为页面的背景色。通过此种方式,用户可以直接输入颜色值来快速切换背景色。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS动态修改网页body的背景色实例代码 - Python技术站