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>