JavaScript复习第二天js小特效练习
来源:互联网 发布:淘宝卖衣服图片怎么弄 编辑:程序博客网 时间:2024/06/06 01:48
注意,驼峰命名法,parseInt转换整数,类对象集合等细节。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript"> var demo = document.getElementsByClassName('demo'); function clickDemo(){ if(demo[0].style.background.indexOf('red') >=0){ demo[0].style.background="green"; }else{ demo[0].style.background="red"; } console.log(demo[0].style.width);//控制台显示width字符串 console.log(demo[0].style.height);//控制台显示height字符串 console.log(demo[0].style.borderBottomWidth);//控制台显示borderBottom字符串 demo[0].style.width = parseInt(demo[0].style.width)+5+'px'; demo[0].style.height = parseInt(demo[0].style.height)+5+'px'; demo[0].style.borderBottomWidth = parseInt(demo[0].style.borderBottomWidth)+5+'px'; } </script> <style type="text/css"> </style></head><body> <!-- 点击div 背景红绿交替,宽高增加5px,下边框增加1px --> <div class="demo" onclick = "clickDemo();" style ="width:300px;height:300px;background:red;border-bottom:1px solid purple;"></div></body></html>
0 0
- JavaScript复习第二天js小特效练习
- js特效复习
- sql复习小练习
- javascript复习第二天查找DOM对象
- javascript复习第二天删除元素节点
- javascript图片小特效
- 【HTML】小练习,复习巩固
- JavaScript小特效---关闭窗口
- javascript复习第二天经典灯泡开关案例
- js中变色小特效
- 2017.7.11学习记录 复习js第二天
- JS,JavaScript HTML页面特效
- javascript简单特效,js学习
- javascript小练习
- javascript小练习
- JavaScript小练习
- JavaScript选项小练习
- JavaScript :几个小练习
- JDK1.5,Switch中使用Enum
- JAVA 笔记(一)
- 时间戳转成字符串时间或者日期
- 用AndroidStudio导入github项目
- PAT乙级1012-D进制的A+B (20)
- JavaScript复习第二天js小特效练习
- C++中的const限定词总结
- JavaScript实现Java的List功能
- SQL查询语句通配符与ACCESS模糊查询like的解决方法
- Cannot read property 'add' of null
- 画饼状图一
- 在linux下制作静态库和动态链接库的方法
- 122 - Trees on the level(模拟内存池解法)
- JQuery的jquery.min.js与jquery.js