1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js动画</title> 6 <style type="text/css"> 7 .box { 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 transition: .3s; 12 } 13 .box.r { 14 border-radius: 50%; 15 } 16 .box.h { 17 height: 400px; 18 } 19 </style> 20 </head> 21 <body> 22 <button class="btn1">变长</button> 23 <button class="btn2">切换宽度</button> 24 <button class="btn3">切换边界圆角</button> 25 <button class="btn4">切换高度</button> 26 <button class="btn5">变短</button> 27 <div class="box"></div> 28 </body> 29 <script type="text/javascript"> 30 var box = document.querySelector('.box'); 31 var b1 = document.querySelector('.btn1'); 32 b1.onclick = function () { 33 box.style.width = "400px"; 34 } 35 var b5 = document.querySelector('.btn5'); 36 b5.onclick = function () { 37 box.style.width = "200px"; 38 // console.log(box.style.width); 39 } 40 41 var b2 = document.querySelector('.btn2'); 42 var b3 = document.querySelector('.btn3'); 43 var b4 = document.querySelector('.btn4'); 44 45 b2.onclick = function () { 46 var width = getComputedStyle(box, null).width; 47 if (width.match("200px")) { 48 box.style.width = "400px"; 49 } else { 50 box.style.width = "200px"; 51 } 52 } 53 54 b3.onclick = function () { 55 var c_name = box.className; 56 console.log(c_name); 57 // 可能是'box' | 'box h' | 'box r' | 'box h r' 58 59 // if (c_name == 'box') { 60 if (!c_name.match("r")) { 61 box.className += " r"; 62 } else { 63 // 不是直接切回box 64 // box.className = "box"; 65 // 而且去掉r 66 box.className = c_name.replace(" r", ""); 67 } 68 } 69 70 b4.onclick = function () { 71 var c_name = box.className; 72 // 没有h类名, 单独添加h类名,反之去除h类名 73 if (!c_name.match("h")) { 74 box.className += " h"; 75 } else { 76 box.className = c_name.replace(" h", ""); 77 } 78 } 79 80 81 </script> 82 </html>