JavaScript 操作内联样式，图片切换，全选练习和div盒子跟随鼠标移动
一、操作内联样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box1{ width: 150px; height: 150px; background-color: red; } </style> <script type="text/javascript"> window.onload = function(){ // 点击按钮以后修改box1的大小 // 获取box1 var box1 = document.getElementById("box1"); // 为按钮绑定点击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 修改box1的宽度 // 通过js修改元素样式 // 语法:元素.style.样式明=样式值 // 我们通过style属性设置的样式都是内联样式 // 而内联样式有较高的优先级,所以通过js修改的样式往往会立即显示 // 但是如果在样式中写了!important,则此时样式会有最高的优先级 // 即使通过js也不能覆盖改样式 box1.style.width = "300px"; box1.style.height = "300px"; // 注意:如果CSS的样式中含有 - 号 // 这种名称在js中是不合法的,比如background-color // 我们需要将这种样式名修改为驼峰命名法 // 方法:去掉 - 号,然后将 - 号后的字母大写 box1.style.backgroundColor = "yellowgreen"; }; // 点击按钮以后读取box1的样式 // 获取box1 var box1 = document.getElementById("box1"); // 为按钮绑定点击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 使用style只能读取内联样式的属性样式 // 语法:元素.style.样式明,例box1.style.width // 获取元素当前显示的样式 // 语法:元素.currentStyle.样式名 // 它可以用来读取当前元素正在显示的样式 // currentStyle只有IE浏览器支持,其他的都不支持 alert(box1.currentStyle.width); // 在其他浏览器中可以使用getComputedStyle()来获取元素当前样式 // 这个方法是window的方法,可以直接使用 // 需要两个参数 // 第一个:要获取样式的元素 // 第二个:可以传递一个伪元素,一般都传null // 该方法会返回一个对象对象中封装了当前元素对应的样式 // 可以通过对象.样式名来读取样式 // 如果获取的样式没有设置,则会获取到真实的值,而不是默认值 // 比如:没有设置width,他不会获取到auto,而是一个长度 alert(getComputedStyle(box1,null).width); // 但是该方法不支持IE8及以下的浏览器 }; }; // 其他样式的相关属性！！！ // clientWidth和clientHeight // 这两个属性可以获取元素的可见宽度和高度(包括内容区和内边距) // 这些属性都是不带px的,返回的都是数字,可以直接进行计算 // offsetWidth和offsetHeight // 获取元素整个的宽高大小,包括内容区、内边距和边框 // offsetParent // 可以用来获取当前元素的定位父元素 // 会获取到离当前元素最近的开启了定位的祖先元素 // offsetLeft 当前元素相对于其定位元素的水平偏移量 // offsetTop 当前元素相对于其定位元素的垂直偏移量 // scrollWidth和scrollHeight // 可以获取元素整个滚动区域的宽度和高度 // scrollLeft // 可以获取水平滚动条滚动的距离 // scroolTop // 可以获取垂直滚动条滚动的距离 // 当满足scrollHeight - scrollTop == clientHeight // 说明垂直滚动条滚动到底了 // 当满足scrollWidth - scrollLeft == clientWidth // 说明水平滚动条滚动到底了 // onscroll // 该事件会在元素的滚动条滚动时触发 </script> </head> <body> <button id="btn01">点我一下</button> <br /><br /> <div id="box1"></div> </body> </html>
二、图片的切换练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } div img{ width: 500px; height: 400px; } #outer{ width: 500px; margin: 50px auto; padding: 10px; background-color: greenyellow; /* 设置文本居中 */ text-align: center; } </style> <script type="text/javascript"> window.onload = function(){ // 点击按钮切换图片 // 获取两个按钮 var prev = document.getElementById("prev"); var next = document.getElementById("next"); // 获取img标签 var img = document.getElementsByTagName("img")[0]; // 创建一个数组保存图片路径 var imgArr = ["images/img1.jpg","images/img2.jpg","images/img3.jpg","images/img4.jpg","images/img5.jpg"]; // 创建一个变量,来保存当前正在显示的图片的索引 var index = 0; // 获取id为info的p元素 var info = document.getElementById("info"); // 设置提示文字 info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张"; // 分别为两个按钮绑定单击响应函数 prev.onclick = function(){ // 要切换到上一张,索引自减 index --; // 判断index是否小于0 if (index < 0){ index = imgArr.length - 1; } img.src = imgArr[index]; // 当点击按钮后,重新设置信息 info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张"; }; next.onclick = function(){ // 要切换到下一张,索引自增 index ++; if (index > imgArr.length - 1){ index = 0; } // 切换图片就是要修改img标签的src属性 // 要修改一个属性的元素,属性=属性值 img.src = imgArr[index]; // 当点击按钮后,重新设置信息 info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张"; }; }; </script> </head> <body> <div id="outer"> <p id="info"></p> <img src="images/img1.jpg" alt="鹿"> <button id="prev">上一张</button> <button id="next">下一张</button> </div> </body> </html>
三、全选练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ // 获取四个多选框items var items = document.getElementsByName("items"); // 全选,为id为checkedAllBtn的函数绑定一个点击响应函数 var checkedAllBtn = document.getElementById("checkedAllBtn"); checkedAllBtn.onclick = function(){ // 遍历items for(var i=0 ; i<items.length ; i++){ // 通过多选框的checked属性可以来获取或设置多选框的选中状态 // 设置四个多选框变成选中状态 items[i].checked = true; } }; // 全不选,为id为checkedNoBtn的函数绑定一个点击响应函数 var checkedNoBtn = document.getElementById("checkedNoBtn"); checkedNoBtn.onclick = function(){ // 遍历items for(var i=0 ; i<items.length ; i++){ // 通过多选框的checked属性可以来获取或设置多选框的选中状态 // 设置四个多选框变成没选中状态 items[i].checked = false; } }; // 反选 var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function(){ // 遍历items for(var i=0 ; i<items.length ; i++){ // 判断多选框状态 // if(items[i].checked){ // 证明多选框已选中，则设置为没选中状态 // items[i].checked = false; // }else{ // 证明多选框没选中，则设置为选中状态 // items[i].checked = true; // } // 等于下面的式子(更简单) items[i].checked = !items[i].checked; } }; // 提交,为sendBtn绑定点击响应函数 var sendBtn = document.getElementById("sendBtn"); sendBtn.onclick = function(){ // 遍历items for(var i=0 ; i<items.length ; i++){ // 判断多选框是否选中 if(items[i].checked){ alert(items[i].value); } } }; // 全选/全不选 var checkedAllBox = document.getElementById("checkedAllBox"); checkedAllBox.onclick = function(){ // alert(this === checkedAllBox); // 在事件的响应函数中,响应函数是给谁绑定的this就是谁 // 所以this 和 checkedAllBox全等,可以替换 // 设置多选框的选中状态 for(var i=0 ; i<items.length ; i++){ items[i].checked = this.checked; } }; // 如果四个多选框全都选中,则checkedAllBox也应该选中 // 如果四个多选框没都选中,则checkedAllBox也应该不选中 // 为四个多选框分别绑定点击响应函数 for(var i=0 ; i<items.length ; i++){ items[i].onclick = function(){ // 将checkedAllBox设置为选中状态 checkedAllBox.checked = true; for(var j=0 ; j<items.length ; j++){ // 判断四个多选框是否全选 // 只要有一个没选,就不是全选 if(!items[j].checked){ // 一旦进入判断,则证明不是全选状态 // 将checkedAllBox设置为没选中状态 checkedAllBox.checked = false; // 一旦进入判断,则已经得出结果,不用在继续循环 break; } } }; } }; </script> </head> <body> <form method="post" action="">你爱好的运动是？ <input type="checkbox" id="checkedAllBox" />全选/不选 <br/> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br/> <input type="button" id="checkedAllBtn" value="全 选" /> <input type="button" id="checkedNoBtn" value="全不选" /> <input type="button" id="checkedRevBtn" value="反 选" /> <input type="button" id="sendBtn" value="提 交" /> </form> </form> </body> </html>
四、div盒子跟随鼠标移动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box1{ width: 150px; height: 150px; background-color: gold; /* 开启box1的绝对定位 */ position: absolute; } </style> <script type="text/javascript"> window.onload = function(){ // 使div可以跟随鼠标移动 // 获取box1 var box1 = document.getElementById("box1"); // 绑定鼠标移动事件 document.onmousemove = function(event){ console.log(); // 解决兼容问题 event = event || window.event; // 获取鼠标的坐标 // clientX和clientY用于获取坐标在当前可见窗口的坐标 // div的偏移量是相对于整个页面的 var left = event.clientX; var top = event.clientY; // pageX和pageY可以获取鼠标相对于当前页面的坐标 // var left = event.pagetX; // var top = event.pagetY; // 设置div偏移量 box1.style.left = left + "px"; box1.style.top = top + "px"; }; }; </script> </head> <body> <div id="box1"></div> </body> </html>
