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>
相关文章
大家都知道js是单线程的，执行起来是顺序的，在顺序的业务逻辑中当然没有问题，如果遇到可以并发执行的业务逻辑，再排队就很低级了！所以这里我们再来简单的谈谈JS中的异步以及如何异步。2016-08-08
这篇文章主要给大家介绍了使用canvas实现鲤鱼跃龙门的动画效果,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,感兴趣的小伙伴可以自己动手尝试一下2024-02-02
这篇文章主要介绍了JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法,详细分析了弹出遮罩层效果的实现方法以及完整的实例代码,需要的朋友可以参考下2014-12-12
这篇文章介绍了js全屏显示显示代码的三种方法，有需要的朋友可以参考一下2013-11-11
JSDoc 是一种 JavaScript 文档注释规范,它允许开发者为 JavaScript 代码添加注释,下面就跟随小编一起来学习一下它的具体使用吧2024-02-02
最长公共子序列（longest common sequence）和最长公共子串（longest common substring）不是一回事儿，下面这篇文章主要给大家介绍了关于javascript实现最长公共子序列的相关资料，需要的朋友可以参考下。2018-02-02
这篇文章给大家介绍IE6兼容透明背景图片以及在IE6中的透明图片不是透明显示的解决方案,有需要的朋友可以参考下2015-08-08
本文介绍了JavaScript中的this关键字在各种情况下的含义，实例都很简单，这样更能有助于加深理解。虽然这只是js中一个很小的概念，但借此我们可以了解js中函数的执行环境，充分掌握this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。2016-12-12
这篇文章主要介绍了Uniapp中使用Echarts的示例详解这里只举例折线图，介绍了uni-app微信小程序使用echarts的方法,下载echart组件，可以先随便建个文件夹，然后 npm init，接着下载依赖，需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了javascript简易画板开发代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
最新评论