JS的BOM操作语法

整理了一下JS的BOM操作语法，这里记录一下。
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>js的BOM操作</title>
  6     <style type="text/css">
  7         #dv3{
  8             width: 300px;
  9             height: 200px;
 10             background-color: yellow;
 11         }
 12 
 13         #dv4{
 14             width: 300px;
 15             height: 200px;
 16             background-color: green;
 17             overflow-y: auto;
 18             overflow-x: auto;
 19         }
 20 
 21         #dv5{
 22             width: 100px;
 23             height: 200px;
 24             background-color: gray;
 25             overflow-y: auto;
 26         }
 27 
 28         .head{
 29             width: 100%;
 30             height: 120px;
 31             background-color: #808080;
 32         }
 33 
 34         .menu{
 35             width: 100%;
 36             height: 40px;
 37             background-color: #f00;
 38         }
 39         .main{
 40             width: 100%;
 41             height: 1000px;
 42             background-color: #ff6a00;
 43         }
 44         .top{
 45             position: fixed;
 46             top: 0px;
 47         }
 48 
 49         #dv9{
 50             width: 300px;
 51             height: 200px;
 52             background-color: red;
 53         }
 54     </style>
 55 </head>
 56 <body>
 57     <div>
 58         <p>js的BOM操作模块</p>
 59     </div>
 60     <input type="button" name="" value="点击" id="btn1">
 61 
 62     <input type="button" name="" value="页面跳转到百度" id="btn2">
 63     <input type="button" name="" value="通过历史记录跳转到百度" id="btn3">
 64 
 65     <input type="button" name="" value="停止计时器" id="btn4">
 66 
 67     <div style="width: 300px;height: 200px;background-color: red" id="dv1"></div>
 68     <input type="button" name="" value="div背景色渐变" id="btn5">
 69 
 70     <div style="width: 400px;height: 300px;background-color: blue" id="dv2"></div>
 71     <input type="button" name="" value="div宽度渐变" id="btn6">
 72 
 73     <div id="dv3"></div>
 74     <input type="button" name="" value="offset获取dv3的属性值" id="btn7">
 75 
 76     <div id="dv4">aasdfadsfasdfasdfasdfasdfasdfasdfasdfasdfasd</div>
 77     <input type="button" name="" value="scroll获取dv4的属性值" id="btn8">
 78 
 79     <div id="dv5">阿斯顿福建阿斯顿福建安利的时间发打飞机阿道夫阿道夫奥德asdf adfasdf dfasdf asdf asdf asdf asd赛法开始法律上的发送到发送地方</div>
 80 
 81     <div class="head" id="dv6"></div>
 82     <div class="menu" id="dv7"></div>
 83     <div class="main" id="dv8"></div>
 84 
 85     <div id="dv9"></div>
 86     <input type="button" name="" value="确认" id="btn9">
 87     <script type="text/javascript">
 88         //页面加载完出现弹窗
 89         window.onload=function(){
 90             alert("我是js的最后一大模块");
 91         }
 92 
 93         //location
 94         console.log(window.location);    //获取当前页面的URL
 95         console.log(window.location.host);    //获取当前RUL的主机名
 96         console.log(window.location.port);    //获取当前RUL的端口号
 97         console.log(window.location.pathname);    //获取当前RUL指向的文件的路径
 98 
 99         //使用链接进行页面跳转（可以返回前一页面）
100         document.getElementById("btn1").onclick=function(){
101             window.location.href="http://www.baidu.com";
102         }
103 
104         //使用方法进行页面跳转（可以返回前一页面）
105         document.getElementById("btn1").onclick=function(){
106             window.location.assign("http://www.baidu.com");
107         }
108 
109         //使用方法进行页面跳转（不可以返回前一页面）
110         document.getElementById("btn1").onclick=function(){
111             window.location.replace("http://www.baidu.com");
112         }
113 
114         //刷新页面
115         document.getElementById("btn1").onclick=function(){
116             window.location.reload();
117         }
118 
119         //历史记录
120         document.getElementById("btn2").onclick=function(){
121             window.location.href="http://www.baidu.com";    //页面跳转到百度
122         }
123         document.getElementById("btn3").onclick=function(){
124             window.history.forward();    //页面跳转到百度后返回，再点击这个按钮，通过历史记录又回到百度
125         }
126 
127         //获取系统和浏览器信息
128         console.log(window.navigator.userAgent);
129 
130 
131 
132         /*定时器*/
133         //循环执行的计时器
134         setInterval(function(){
135             alert("3秒出现一次")
136         },3000);    //每隔3秒钟执行一次定时器里面的代码
137 
138         //点击按钮，停止循环执行的计时器
139         document.getElementById("btn4").onclick=function(){
140             window.clearInterval(time);
141         }
142         var time=setInterval(function(){
143             alert("3秒出现一次")
144         },3000);
145 
146         //只执行一次的计时器
147         setTimeout(function(){
148             alert("2秒出现一次")
149         },2000);
150 
151         //点击按钮，停止只执行一次的计时器
152         document.getElementById("btn4").onclick=function(){
153             window.clearTimeout(time);
154         }
155         var time=setTimeout(function(){
156             alert("2秒出现一次")
157         },2000);
158 
159         //定时器实现背景色渐变
160         document.getElementById("btn5").onclick=function(){    //按钮点击事件
161             var i=10;
162             var time=setInterval(function(){
163                 i--;
164                 if(i<0){
165                     window.clearInterval(time);
166                 }
167                 document.getElementById("dv1").style.opacity=i/10;
168             },1000);
169         }
170 
171         //定时器实现div宽度渐变
172         document.getElementById("btn6").onclick=function(){
173             var wid=400;
174             var time=setInterval(function(){
175                 wid+=10;
176                 if(wid==500){
177                     window.clearInterval(time);
178                 }
179                 document.getElementById("dv2").style.width=wid+"px";    //必须拼接上px
180             },1000)
181         }
182 
183 
184 
185         /*offset属性*/
186         document.getElementById("btn7").onclick=function(){
187             console.log(document.getElementById("dv3").offsetWidth);    //获取dv3的宽
188             console.log(document.getElementById("dv3").offsetHeight);    //获取dv3的高
189 
190             console.log(document.getElementById("dv3").offsetTop);    //获取dv3的margin-top（不是相对于父级dv的margin-top，而是相对于html页面）
191             console.log(document.getElementById("dv3").offsetLeft);    //获取dv3的margin-left（不是相对于父级dv的margin-left，而是相对于html页面）
192         }
193 
194 
195 
196         /*scroll属性*/
197         document.getElementById("btn8").onclick=function(){
198             console.log(document.getElementById("dv4").scrollHeight);    //dv4里的内容为超出dv4高度时，返回dv4的高度，超出时，返回内容的高度
199             console.log(document.getElementById("dv4").scrollWeight);    //获取dv4的高度
200             console.log(document.getElementById("dv4").scrollTop);    //获取dv4里的竖直滚动条，滚动后，内容离dv4顶端的距离
201             console.log(document.getElementById("dv4").scrollLeft);    //获取dv4里的水平滚动条，滚动后，内容离dv4左边的距离
202         }
203 
204         //onscroll事件（div的滚动事件）
205         document.getElementById("dv5").onscroll=function(){
206             console.log(this.scrollTop);    //拖动竖直滚动条时，输出内容距离dv5顶端的距离
207         }
208 
209         //页面的滚动事件
210         window.onscroll=function(){
211             console.log(document.documentElement.scrollTop);    //拖动页面竖直滚动条，输出内容距离页面顶端的距离
212         }
213 
214         //固定导航栏
215         window.onscroll=function(){
216             if(document.documentElement.scrollTop>=document.getElementById("dv6").offsetHeight){
217                 //页面滚动条下拉超过一定高度，就将dv7置顶
218                 document.getElementById("dv7").className="menu top";    //可同时给元素赋多个className
219                 //上面一步会遮挡dv8里面的内容，所以将dv8的marginTop设置成dv7的宽度
220                 document.getElementById("dv8").marginTop=document.getElementById("dv7").offsetHeight;
221             }
222             else{
223                 //页面滚动条又回到原位，再将dv7还原到最初的位置
224                 document.getElementById("dv7").className="menu";
225                 //再还原dv8的marginTop
226                 document.getElementById("dv8").marginTop="0px";
227             }
228         }
229 
230 
231 
232         /*client属性*/
233         document.getElementById("btn9").onclick=function(){
234             console.log(document.getElementById("dv9").clientWidth);    //获取div可视区域的宽（不受margin、border宽度的影响）
235             console.log(document.getElementById("dv9").clientHeight);    //获取div可视区域的高（不受margin、border宽度的影响）
236             console.log(document.getElementById("dv9").clientLeft);    //获取div的border-left（不受margin、border宽度的影响）
237             console.log(document.getElementById("dv9").clientTop);    //获取div的border-top（不受margin、border宽度的影响）
238         }
239     </script>
240 </body>
241 </html>
。
posted @ 2019-11-28 21:06 打点阅读(368) 评论(0) 编辑收藏举报
刷新页面返回顶部
打点

JS的BOM操作语法

公告
