JavaScript基础回顾知识点记录6-操作元素样式和事件对象，介绍基本使用
- js 中 操作元素样式
- 通过js修改元素内联样式（设置和读取的都是内联样式）
- 获取当前元素显示的样式
<html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #box1 { width: 200px; height: 200px; background-color: aquamarine; } </style> <body> <button type="button" >点我下1</button> <button type="button" >点我下2</button> <button type="button" >点我下3</button> <br><br> <div > </div> </body> <script type="text/javascript"> window.onload = function() { var btn01 = document.getElementById("btn1"); var box01 = document.getElementById("box1"); btn01.onclick = function() { /* 通过js修改元素内联样式: 语法: 元素对象.style.样式名 = 样式值 样式名： background-color 是不符合的， 需要改为驼峰命名： backgroundColor 注意： 这种方法设置和读取的都是内联样式 */ box01.style.width = "400px"; box01.style.height = "400px"; box01.style.backgroundColor = "red"; } /* 获取当前元素显示的样式： 语法: 元素对象.currentStyle.样式名 。 此方法只有IE浏览器支持 其他浏览器获取样式： getComputedStyle(元素对象,null).样式名 ; */ var btn2 = document.getElementById("btn2"); btn2.onclick = function() { alert(box01.currentStyle.width); } var btn3 = document.getElementById("btn3"); btn3.onclick = function() { var style_obj = getComputedStyle(box1, null); alert(style_obj.width); } } </script> </html>
- js 中 事件对象
- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
- 在这个事件对象中封装了当前事件相关的一切信息（鼠标的坐标、键盘那个键被按下，鼠标滚动的方向等）
- 注意: 在ie8及以下浏览器中，响应函数触发时，不会传递事件对象。 事件对象是作为window对象的属性来存储的。
- 以一个鼠标移入某个区域后显示x、y坐标为例子
<html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #areaDiv { width: 200px; height: 100px; border: black 3px solid; margin-bottom: 10px; } #showMsg { width: 200px; height: 30px; border: black 3px solid; } </style> <body> <div ></div> <div ></div> </body> <script type="text/javascript"> var areaDiv = document.getElementById('areaDiv'); var showMsg = document.getElementById('showMsg'); /* onmousemove 事件： 鼠标在元素中移动时触发 事件对象： 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数 在这个事件对象中封装了当前事件相关的一切信息（鼠标的坐标、键盘那个键被按下，鼠标滚动的方向等） note: 在ie8及以下浏览器中，响应函数触发时，不会传递事件对象。 事件对象是作为window对象的属性来存储的。 */ areaDiv.onmousemove = function(e) { // 解决事件对象兼容性问题： 两种写法： // if (!e) { // e = window.e; // } e = e || window.e; showMsg.innerHTML = 'x坐标：' + e.clientX + ',y坐标：' + e.clientY; } areaDiv.onmouseout = function() { showMsg.innerHTML = ''; } </script> </html>
- 鼠标移动事件，实现某个div跟随鼠标移动（复制代码运行直接看效果更直观）
<html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #box { position: absolute; width: 50px; height: 50px; background-color: #7FFFD4; } </style> <body > <div > </div> </body> <script type="text/javascript"> /* clientX 和 clientY 是获取当前可见页窗口的坐标 pageX 和 pageY 是获取相对当前页面的坐标 （当页面可以往下滚动时，需要使用这个获取坐标）,但是在IE8中不支持 */ document.onmousemove = function(e) { /* 获取滚动条高度 IE和火狐不识别滚动条属于body的， 谷歌、edge可以识别。 IE和火狐认为滚动条属于html的。documentElement，但是edge识别不了html的滚动条 */ var st = document.body.scrollTop || document.documentElement.scrollTop; e = e || window.e; var box = document.getElementById('box'); box.style.left = e.clientX + 'px'; box.style.top = e.clientY + st + 'px'; } </script> </html>
- 上一篇 »javascript 基础知识点
- 下一篇 »JavaScript语言基础知识点图示，转