一,js盒模型
1、width | height - parseInt(getComputedStyle(ele, null).getPropertyValue('width')) - parseInt(getComputedStyle(ele, null).getPropertyValue('height')) 2、padding + width | padding + height - clientWidth - clientHeight 3、border + padding + width | border + padding + height - offsetWidth - offsetHeight 4、结合绝对定位,距离最近定位父级的Top | Left - offsetTop - offsetLeft
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JS盒模型</title> <style> .sup { width: 200px; height: 200px; padding: 30px; border: 5px solid black; background-color: orange; margin: 20px; position: relative; } .sub { width: 100px; height: 100px; padding: 20px; border: 5px solid black; background-color: blue; position: absolute; top: 0; left: 20px; } </style> </head> <body> <div class="sup"> <div class="sub"></div> </div> </body> <script> var sup = document.querySelector('.sup'); //盒子content宽 var width = parseInt(getComputedStyle(sup, null).width); console.log(width) //盒子padding+width ==> 子级的可活动范围 var p_width = sup.clientWidth; console.log(p_width); //盒子border+padding+width ==> 可视区域 var b_p_width = sup.offsetWidth; console.log(b_p_width); //盒子距离定位父级的top left var sup_top = sup.offsetTop; var sup_left = sup.offsetLeft; console.log(sup_top); console.log(sup_left); var sub = document.querySelector('.sub'); // 父级定位(relative)后,子级活动区域为父级的client(padding+width)区域 var sub_top = sub.offsetTop; var sub_left = sub.offsetLeft; console.log(sub_top); console.log(sub_left); </script> </html>
二,js动画
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js动画</title> <style> .box { width: 200px; height: 200px; background-color: pink; transition: .5s; } .box.r { border-radius: 50%; } .box.h { height: 400px; } </style> </head> <body> <button class="button1">変长</button> <button class="button2">切换宽度</button> <button class="button3">切换边界圆角</button> <button class="button4">切换高度</button> <button class="button5">变短</button> <div class="box"></div> </body> <script> var box = document.querySelector('.box'); var b1 = document.querySelector('.button1'); var b2 = document.querySelector('.button2'); var b3 = document.querySelector('.button3'); var b4 = document.querySelector('.button4'); var b5 = document.querySelector('.button5'); b1.onclick = function() { box.style.width = '400px'; } b5.onclick = function() { box.style.width = '200px'; } b2.onclick = function() { var width = getComputedStyle(box,null).width; if (width.match('200px')) { box.style.width = '400px'; } else { box.style.width = '200px'; } } b3.onclick = function() { var c_name = box.className; console.log(c_name) // 可能是'box' | 'box h' | 'box r' | 'box h r' // if (c_name == 'box') { if (!c_name.match("r")) { box.className += " r"; } else { // 不是直接切回box // box.className = "box"; // 而且去掉r box.className = c_name.replace(" r", ""); } } b4.onclick = function () { var c_name = box.className; // 没有h类名, 单独添加h类名,反之去除h类名 if (!c_name.match("h")) { box.className += " h"; } else { box.className = c_name.replace(" h", ""); } } </script> </html>
三,DOM树结构关系
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>DOM树结构关系</title> </head> <body> <h1>DOM树结构关系</h1> <hr> <div class="sup"> <div class="sub1"></div> <div class="sub2"></div> <div class="sub3"></div> </div> </body> <script> var body = document.querySelector('body'); console.log(body); </script> <script> var sub2 = document.querySelector('.sub2'); //sub2的父级标签 console.log('sub2父标签',sub2.parentElement); //sub2的上一个标签 console.log('sub2的上兄弟标签',sub2.previousElementSibling); //sub2的下一个标签 console.log('sub2的下兄弟标签',nextElementSibling); var sup = document.querySelector('.sup'); //sup下面的所有子标签 console.log('sup的所有子标签',sup.children); //sup的第一个子标签 console.log("sup第一个子标签:", sup.firstElementChild); // sup的最后一个子标签 console.log("sup最后一个子标签:", sup.lastElementChild); </script> </html>
四DOM操作
1,创建标签只能由document来调用执行
2,一次创建只产生一个标签对象,该标签对象只能存在最后一次操作的位置<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Dom操作</title> <style> .box { width: 200px; height: 200px; background-color: red; } .p { width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="box">boxboxboxob</div> <button class="b1">添加到box中</button> <button class="b2">添加到body中</button> <button class="b3">添加到body下Box之前</button> <button class="b4">将body下的box替换为p</button> <button class="b5">删除box</button> </body> <script> var body = document.querySelector('body'); var box = document.querySelector('.box'); var b1 = document.querySelector('.b1'); var b2 = document.querySelector('.b2'); var b3 = document.querySelector('.b3'); var b4 = document.querySelector('.b4'); var b5 = document.querySelector('.b5'); //创建p标签 var p = document.createElement('p'); console.log(p); //设置标签样式 p.className = 'p'; //添加到指定区域 b1.onclick = function() { var res = box.appendChild(p); console.log(res);//自身 } b2.onclick = function() { body.appendChild(p); } //插入到指定区域 b3.onclick = function() { //将p查到box之前(前者插到后者之前) var res = body.insertBefore(p,box); console.log(res); //box } b4.onclick = function() { //由父级删除制定子级 // var res = body.removeChild(box); //获取父级来删除自身 var res = box.parentElement.removeChild(box); console.log(res); //boy setTimeout(function() { //删除后,标签对象依然可以被js保存,继而可以重新添加到页面 body.appendChild(res); },1000) } </script> </html>
五,Bom操作
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>BOM</title> </head> <body> <button class="b1">open</button> <button class="b2">前进</button> <button class="b3">浏览器信息</button> </body> <!-- open --> <script type="text/javascript"> var b1 = document.querySelector('.b1'); b1.onclick = function () { // 新tag打开目标地址 // window.open("http://www.yahoo.com"); // 自身tag转跳目标地址 // open("http://www.yahoo.com", '_self'); // 自定义窗口打开目标地址 open("http://www.yahoo.com", '_blank', 'width=300, height=300'); } </script> <script type="text/javascript"> var b2 = document.querySelector('.b2'); b2.onclick = function () { // 历史后退 // history.back(); // 历史前进 history.forward(); // history.go(num) } </script> <script type="text/javascript"> var b3 = document.querySelector('.b3'); b3.onclick = function () { console.log(navigator.userAgent); if (navigator.userAgent.match("Chrome")) { alert("谷歌浏览器") } } </script> <script type="text/javascript"> // 协议 console.log(location.protocol); // 服务器 console.log(location.hostname); // 端口号 console.log(location.port); // 参数拼接 console.log(location.search); </script> </html>