/*
1. 变量
2. 事件
3. 函数
4. 属性
*/
目前,关于事件我们只学了一个点击事件。
如果觉得前边获取元素时写的 document.getElement(s).. 太长了,那么可以通过声明变量来简化它
例如:
可以看到利用 js 可以通过点击其他位置控制另一个元素样式的变化
利用这一点,我们做了一个小东西,以下是代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <link rel="stylesheet" href="../CSS/index.css" />
- </head>
- <body>
- <div id="main">
- <div id="word">
- <span>请为下边的DIV设置样式:</span>
- <button id="set">点击设置</button>
- </div>
- <div id="box"></div>
- </div>
- <div id="bg">
- <div id="center">
- <div id="color">
- <span>请选择背景色:</span>
- <button id="red">红</button>
- <button id="yel">黄</button>
- <button id="blue">蓝</button>
- </div>
- <div id="width">
- <span>请选择宽度:</span>
- <button id="w200">200</button>
- <button id="w300">300</button>
- <button id="w400">400</button>
- </div>
- <div id="height">
- <span>请选择高度:</span>
- <button id="h200">200</button>
- <button id="h300">300</button>
- <button id="h400">400</button>
- </div>
- <div id="choose">
- <button id="reg">恢复</button>
- <button id="sure">确定</button>
- </div>
- </div>
- </div>
- <script>
- var set = document.getElementById ('set');
- var box = document.getElementById ('box');
- var bg = document.getElementById ('bg');
- var red = document.getElementById ('red');
- var yel = document.getElementById ('yel');
- var blue = document.getElementById ('blue');
- var w200 = document.getElementById ('w200');
- var w300 = document.getElementById ('w300');
- var w400 = document.getElementById ('w400');
- var h200 = document.getElementById ('h200');
- var h300 = document.getElementById ('h300');
- var h400 = document.getElementById ('h400');
- var reg = document.getElementById ('reg');
- var sure = document.getElementById ('sure');
- set.onclick = function(){
- bg.style.display = 'block';
- }
- red.onclick = function(){
- box.style.background = '#f50b42';
- }
- yel.onclick = function(){
- box.style.background = '#f9e74f';
- }
- blue.onclick = function(){
- box.style.background = '#84a8f1';
- }
- w200.onclick = function(){
- box.style.width = '200px';
- }
- w300.onclick = function(){
- box.style.width = '300px';
- }
- w400.onclick = function(){
- box.style.width = '400px';
- }
- h200.onclick = function(){
- box.style.height = '200px';
- }
- h300.onclick = function(){
- box.style.height = '300px';
- }
- h400.onclick = function(){
- box.style.height = '400px';
- }
- reg.onclick = function(){
- box.style.width = '142px';
- box.style.height = '142px';
- box.style.background = '#fff';
- }
- sure.onclick = function(){
- bg.style.display = 'none';
- }
- </script>
- </body>
- </html>
从这里,我初次感受到了 js 的灵活,好多东西还没见识到,要继续努力才是。
来源: http://www.bubuko.com/infodetail-2451093.html