标签：function console log documentElement js window client BOM document
day04 js 匿名函数 BOM中的操作 client offset scroll 一.匿名函数 1.匿名函数的自执行 1.1.在js中叫做闭包, 和python中的闭包不是一个事 1.2.为什么要用这个? 解决了全局污染的问题 1.3.什么是全局污染? 如果两个相同名字的变量a是两个js文件中的两个不同的功能, 我想同时使用这两个不同功能的a,就会出现压盖现象(就是全局污染) 1.4.语法: (function(){ ... })() (function (window) { var a = 111; window.$1 = a; })(window); (function (window) { var a = 222; window.$2 = a; })(window); console.log(window.$1); console.log(window.$2); 1.5.有个问题: 全局污染貌似不是函数的自执行解决的,而是相同名字不同功能的a重新赋值给了其他变量解决的 2.单例模式 单例模式: 当多个文件导入同一个模块时, 这个模块只会在内存中创建一次, 多个文件里的这个模块使用的是同一个内存地址: 如python中的导入模块 非单例模式: 如js中的new 二. BOM中的操作 1.client 客户端: 1.1.内容的可视区域:盒子里的内容区域 objDiv = document.getElementById('box'); //获取的是盒子(标签)的对象 objDiv.clientTop 边框的高度 //border-top objDiv.clientLeft 边框的宽度 //border-left objDiv.clientWidth 边框里的宽度,不包含边框 objDiv.clientHeight 边框里的高度,不包含边框 <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ height: 200px; width: 200px; border: 1px solid green; padding: 10px; } </style> </head> <body> <div id="box"></div> <script> var objDiv = document.getElementById('box'); console.log(objDiv.clientTop); //1 console.log(objDiv.clientLeft); //1 console.log(objDiv.clientWidth); //220 console.log(objDiv.clientHeight); //220 </script> </body> 1.2.屏幕的可视区域: 浏览器中DOM的可视部分,即html展示的区域 document.documentElement.clientWidth; //获取的是浏览器对应的html可视的宽度 document.documentElement.clientHeight; //获取的是浏览器对用的html可视的高度 检测屏幕可视区域变化的函数:window.onresize = function () { ... } window.onload = function () { console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); window.onresize = function () { console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); } } 2.offset 偏移量 var objBox = document.getElementById('box'); objBox.offsetTop; 有定位时,偏移量的值: 参考点取决于父盒子是否有定位: 父有定位以父为参考,否则以body为参考点 //top objBox.offsetLeft; 有定位时,偏移量的值: 参考点取决于父盒子是否有定位: 父有定位以父为参考,否则以body为参考点 //left objBox.offsetWidth; 盒模型的宽 objBox.offsetHeight; 盒模型的高 <head> <style> *{ margin: 0; padding: 0; } </style> </head> <body style="height: 2000px;"> <div> <div id="wrap" style="width: 300px; height: 300px; "> <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top: 50px;left: 30px;"> </div> </div> </div> <script> window.onload = function () { var objBox = document.getElementById('box'); console.log(objBox.offsetTop); //50 console.log(objBox.offsetLeft); //30 console.log(objBox.offsetWidth); //210 内容+padding+border console.log(objBox.offsetHeight); //210 内容+padding+border } </script> </body> 3.scroll: 滚动 3.1.屏幕的滚动
document.documentElement.scrollTop; 屏幕向上滚动的距离
document.documentElement.scrollLeft; 屏幕向左滚动的距离 document.documentElement.scrollWidth; DOM的宽,即html的宽 document.documentElement.scrollHeight; DOM的高,即html的高
检测屏幕可视区域滚动的函数:
window.onscroll = function () { ... } <head> <style> *{ margin: 0; padding: 0; } </style> </head> <body style="width: 2000px; height: 2000px;"> <div style="height: 200px; "></div> <div style="height: 200px; "></div> <div style="height: 200px; "></div> <div style="height: 200px; "></div> <div style="height: 200px; "></div> <div style="height: 200px; "></div> <script> window.onload = function () { window.onscroll = function () { console.log(document.documentElement.scrollTop); //如果只是复制这段代码到浏览器上时, 这个高度获取不到,是因为省略了 <html> console.log(document.documentElement.scrollLeft); console.log(document.documentElement.scrollWidth); console.log(document.documentElement.scrollHeight); }
}; </script> </body> 3.2.盒子里的滚动条 var objScroll = document.getElementById('scroll'); //获取的是盒子(标签)对象 objScroll.scrollTop; 滚动条向上滚动的距离 objScroll.scrollLeft; 滚动条向左滚动的距离 objScroll.scrollWidth; 滚动源的宽度 objScroll.scrollHeight; 滚动源的高度
<head> <style> *{ margin: 0; padding: 0; } </style> </head> <body> <div id="scroll" style="width: 200px;height: 200px;border: 1px solid red; overflow: auto;padding: 10px;margin: 5px 0 0 0;"> <p> 八戒爱谁谁*100,让此字段超出盒子大小,形成滚动条样式 </p> </div> <script> window.onload = function () { var objScroll = document.getElementById('scroll'); objScroll.onscroll = function () { console.log(objScroll.scrollTop); console.log(objScroll.scrollLeft); console.log(objScroll.scrollWidth); console.log(objScroll.scrollHeight); } } </script> </body> 4.scroll 和 offset 综合练习 固定搜索栏开始的时候是隐藏的, 当滚动到某一个位置时,固定搜索栏显示在顶部 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .header{ width: 100%; height: 80px; } .content{ width: 100%; height: 2000px; } .input{ width: 400px; height: 60px; position: absolute; left: 50%; margin-left: -200px; top: 200px; } .fixTop{ width: 100%; height: 80px; position: fixed; top: 0; left: 0; display: none; /*固定搜索栏开始的时候是隐藏的*/ z-index: 666; } </style> </head> <body> <div class="header"> </div> <div class="content"> <div class="input"> </div> </div> <div class="fixTop"> </div> <script> window.onload = function () { var inputTop = document.getElementsByClassName('input')[0].offsetTop; //获取你想要的偏移量 var objFix = document.getElementsByClassName('fixTop')[0]; //获取固定搜索栏标签的对象 window.onscroll = function () { //检测屏幕滚动 var scrollTop = document.documentElement.scrollTop; //获取滚动距离 if(scrollTop >= inputTop){ //滚动距离和之前获取的偏移量比较 objFix.style.display = 'block'; //固定搜索栏显示出来 objFix.style.opacity = 0.5; //透明度: 方便测试观察而加的属性 淡入淡出:可以用定时器和透明度完成 }else{ objFix.style.display = 'none'; } } } </script> </body> </html>
标签：function,console,log,documentElement,js,window,client,BOM,document 来源： https://www.cnblogs.com/aiaii/p/12233238.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。