JS改变页面颜色源码分享
更新时间：2018年02月24日 09:22:21 作者：彬菌
本篇文章是JS的一个网页制作小技巧，应用在很多地方，通过JS改变HTML页面的颜色，有兴趣的学习下。
我们先来看下具体的演示效果图
以下就是完整的HTML页面代码，大家可以测试下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.big_box{
width: 500px;
height: 500px;
border: 1px solid black;
}
.big_box input{
margin-left: 60px;
}
</style>
<script>
function Change_red(){
var Red=document.getElementById("change_style");
Red.style.backgroundColor="red";
}
function Change_blue(){
var Blue=document.getElementById("change_style");
Blue.style.backgroundColor="blue";
}
function Change_green(){
var Green=document.getElementById("change_style");
Green.style.backgroundColor="green";
}
</script>
</head>
<body>
<div class="big_box" id="change_style">
<input type="button" value="变为红色" onclick="Change_red()">
<input type="button" value="变为蓝色" onclick="Change_blue()">
<input type="button" value="变为绿色" onclick="Change_green()">
</div>
</body>
</html>
相关文章
如何使用bootstrap框架 bootstrap入门必看!
如何使用bootstrap？这篇文章就是告诉大家如何使用bootstrap框架，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了微信小程序checkbox组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
window.addEventListener是JavaScript中用于添加事件监听器的方法,允许在发生特定事件时执行函数,本文给大家介绍js window.addEventListener 是什么,感兴趣的朋友一起看看吧2024-09-09
我们在编写 JS 代码时,经常会遇到逻辑判断复杂的情况,这篇文章主要给大家介绍了关于JavaScript如何优化逻辑判断代码的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了js实现拾色器插件ColorPicker，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
用最简单的方法判断JavaScript中this的指向(推荐)
都说 JavaScript 是一种很灵活的语言，这其实也可以说它是一个混乱的语言,下面通过本文给大家分享JavaScript中this的指向知识，感兴趣的朋友一起看看吧2017-09-09
js跟随滚动条滚动浮动代码，对于firefox不兼容。2009-12-12
本篇文章主要介绍了理解javascript async的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
无缝滚动在制作一些图片展示的时候还是蛮有用的，下面与大家分享下javascript实现的可改变滚动方向的无缝滚动，具体实现如下，感兴趣的朋友可以参考下哈2013-06-06
最近项目中遇到些字符串乱码问题，解决后有些心得，记录于此。2009-12-12
最新评论