javascript实现控制div颜色


Posted in Javascript onJuly 07, 2015

js控制div颜色

<html>
<head>
</head>
<style>
#div1{width:400px;height:400px;background-color:red;}
</style>
<script>
function blue(){
div1=document.getElementById('div1');
div1.style.backgroundColor='blue';
}
function pink(){ 
div1=document.getElementById('div1');
div1.style.backgroundColor='pink';
}
function black(){
div1=document.getElementById('div1');
div1.style.backgroundColor='black';
}

</script>
<body>
<button onclick='wr();'>生成文字</button>
<button onclick='blue();'>blue</button>
<button onclick='pink();'>pink</button>
<button onclick='black();'>black</button>
<div id='div1'>
</div>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
JavaScript数组方法总结分析
May 06 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
js实现橱窗展示效果
Jan 11 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 #Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 #Javascript
javascript中数组方法汇总
Jul 07 #Javascript
jQuery原型属性和原型方法详解
Jul 07 #Javascript
在JavaScript中访问字符串的子串
Jul 07 #Javascript
jQuery.each使用详解
Jul 07 #Javascript
JavaScript中字符串拼接的基本方法
Jul 07 #Javascript
You might like
PHP详细彻底学习Smarty
2008/03/27 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
php函数连续调用实例分析
2015/07/30 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
js实现验证码功能
2020/07/24 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python字典快速保存于读取的方法
2018/03/23 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
python:动态路由的Flask程序代码
2019/11/22 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
餐饮加盟计划书
2014/01/10 职场文书
倡议书格式模板
2014/05/13 职场文书
白血病募捐倡议书
2014/05/14 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python