JavaScript案例学习3
2016-06-20 13:14
555 查看
个人博客:http://vuejs.pub
JavaScript 案例7
通过参数来修改div 的长宽和背景色 。。。主要学习参数的使用和属性的操作方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第二种操作属性的方法</title> <style> #div1{ width: 100px; height: 100px; background: red; } </style> </head> <body> <input type="button" value="变长" onclick="changeStates('width','300px')"> <input type="button" value="变高" onclick="changeStates('height','300px')"> <input type="button" value="变色" onclick="changeStates('background','green')"> <div id="div1"> </div> <script> function changeStates(name, value) { var oDiv = document.getElementById('div1'); oDiv.style[name] = value; } /** * 第一种操作属性的方法( 通过 . 来操作 ) * var oDiv = document.getElementById('div1'); * oDiv.style.width = '300px'; * * 第二种操作属性的方法( 通过 [] 来操作 ) * var oDiv = document.getElementById('div1'); * oDiv.style['width'] = '300px'; * * 第二种更适合通过参数来操作 * */ </script> </body> </html>
JavaScript 案例8
匿名函数的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>匿名函数</title> <style> #div1{ width:100px; height: 100px;border: 1px solid red} </style> </head> <body> <input type="button" id="btn1" value="按钮"> <div id="div1"></div> <script> var oBtn = document.getElementById('btn1'); oBtn.onclick = function () { document.getElementById('div1').style.background = 'green'; } </script> </body> </html>
JavaScript 案例9
window.onload 的使用。。。避免当js放在head 里面的时候页面还没加载 js执行报错问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window.onload</title> <style> #div1{ width:100px; height: 100px;border: 1px solid red} </style> <script> // var oBtn = document.getElementById('btn1'); // oBtn.onclick = function () {//直接执行会报错,页面还没有加载完成 , 所以无法找到 btn1 // document.getElementById('div1').style.background = 'green'; // } window.onload = function () { var oBtn = document.getElementById('btn1'); oBtn.onclick = function () {//直接执行会报错,页面还没有加载完成 , 所以无法找到 btn1 document.getElementById('div1').style.background = 'green'; } } /** * window.onload 当页面html文档全部加载完成,再执行 * JavaScript代码*/ </script> </head> <body> <input type="button" id="btn1" value="按钮"> <div id="div1"></div> </body> </html>
JavaScript 案例10
getElementsByTagName 的使用。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>getElementsByTagName</title> <style> div{ width: 100px; height: 100px; border: 1px solid red; margin: 10px; float: left; } </style> <script> window.onload = function () { var oDiv = document.getElementsByTagName('div'); /** * oDiv 此时是一个数组 */ alert(oDiv.length);//获取数组长度 for(var i = 0 ; i <= oDiv.length ; i++){ oDiv[i].style.background = 'gray'; } } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享