1. 修改样式属性（小）
修改样式属性有两种方式，改动小的话直接就是.style进行修改就可以了，改动大的话，就是用类选择器进行修改。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; margin: 100px auto; background-color: pink; } </style> </head> <body> <div></div> <script> var div = document.querySelector('div'); div.onclick = function() { this.style.backgroundColor = 'black' ; } </script> </body> </html>
2. 淘宝关闭二维码案例
点击二维码的关闭按钮之后，将样式display：none 就可以了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { cursor: pointer; } </style> </head> <body> <div class="box"> <img src="./images/taobao.png" alt=""> <i class="close">关闭</i> </div> <script> // 获取元素 var box = document.querySelector('.box'); var close = document.querySelector('.close'); close.onclick = function() { box.style.display = 'none' ; } </script> </body> </html>
3. 循环精灵图
改变精灵图的位置就可以实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; } .box { width: 250px; margin: 100px auto; } .box li { float: left; width: 24px; height: 24px; background-color: pink; margin: 15px; background: url(images/sprite.png) no-repeat; } </style> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> var lis = document.querySelectorAll('li'); for ( var i = 0 ; i < lis.length ; i ++ ) { var index = i * 44 ; lis[i].style.backgroundPosition = '0 -'+ index+'px'; } </script> </body> </html>
4. 显示隐藏文本框内容案例
文本框里面的文字全是value属性，所以只要是修改value里面的内容就可以，使用到的技术就是获得焦点和失去焦点这两个属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input { color: #999; } </style> </head> <body> <input type="text" value="手机"> <script> // 获取元素 var text = document.querySelector('input') ; // 注册事件 得到焦点 text.onfocus = function () { // console.log('得到了焦点'); if (text.value == '手机') { this.value = '' ; } // 获得焦点需要把文本框里面的文字颜色变黑 this.style.color = '#333' ; } // 注册事件 失去焦点 text.onblur = function () { // console.log('失去了焦点'); if (text.value == '') { this.value = '手机' ; } this.style.color = '#999' ; } </script> </body> </html>
5. className修改样式属性
如果样式多的话，就不利于我们直接使用.style来进行修改，所以这个就是直接等价于给某个盒子加上了一个类名 等价于 class = “xxx” ，区别就是这个不显示，只有触发事件时候才进行显示。注意的是，如果只写一个新的类名的话，就得样式就会消失，只存在一个类名效果，如果想层叠的话，就是将两个类名都写到。
<!-- calssName 就相当于给盒子加了一个类名一样。区别就是在于需要绑定操作进行触发之后才能显示效果 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } .change { width: 300px; height: 300px; background-color: black; } </style> </head> <body> <div>你好</div> <script> var change = document.querySelector('div'); change.onclick = function () { // 单独写一个的话会层叠掉原先的属性 this.className = 'change' ; // 旧的和新的写到一起的话就会使得属性进行叠加处理 this.className = 'first change' ; } </script> </body> </html>
6. 密码框提示信息案例
效果就是当输入完密码，失去焦点的时候，就会进行一个判断，使用input.value.length判断密码的长度大小，并且使用类名修改属性，使用.innerHTML修改文字属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 12px; color: #999; background: url(images/mess.png) no-repeat left center; padding-left: 20px; } .wrong { color: red; background-image: url(images/wrong.png); } .right { color: green; background-image: url(images/right.png); } </style> </head> <!-- 大体就是失去焦点之后，要进行判断密码的value的length是否满足需求，然后更改相应的样式 更改样式的时候使用的是className --> <body> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6~16位密码</p> <script> var ipt = document.querySelector('.ipt'); var message = document.querySelector('.message'); ipt.onblur = function () { if (this.value.length < 6) { message.className = 'message wrong'; message.innerHTML = '您输入的位数不对，要求是6~16位'; } else { message.className = 'message right'; message.innerHTML = '您输入的正确'; } } </script> </div> </body> </html>
7. 京东关闭广告案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { position: relative; } .luzhou { width: 100%; } .close { position: absolute; top: 0px; right: 0px; width: 30px; } </style> </head> <body> <div class="box"> <img src="./images/luzhou.jpg" alt="" class="luzhou"> <img src="./images/close.jpg" alt="" class="close"> </div> <script> var box = document.querySelector('.box') ; var close = document.querySelector('.close') ; close.onclick = function() { box.style.display = 'none' ; } </script> </body> </html>
8. 开关灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button >开关灯</button> <script> // 获取元素 var btn = document.querySelector('button'); var body = document.body; // 注册 + 函数 var flag = 0 ; btn.onclick = function () { if( flag == 0 ) { body.style.backgroundColor = 'black' ; flag = 1 ; } else { body.style.backgroundColor = 'white' ; flag = 0 ; } } </script> </body> </html>
9. 世纪佳缘案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .psw { color: #999999; } .dianji { border: 1px solid pink; outline: none; } .shiqu { border: 1px solid #aaa; outline: none; color: #999999; } </style> </head> <body> <input type="text" class="psw" value="邮箱/ID/手机号"> <script> // 获取元素 var psw = document.querySelector('input') ; psw.onfocus = function () { console.log('获得焦点'); this.value = '' ; psw.className = 'dianji' ; } psw.onblur = function () { console.log('失去焦点'); this.className = 'shiqu' ; if(this.value == '') { this.value = '邮箱/ID/手机号' ; } } </script> </body> </html>
