JS中的BOM应用(2)

<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;} body {height:2000px;} </style> <script> window.onscroll=function () { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var oDiv=document.getElementById('div1'); oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px'; }; </script> </head> <body> <div></div> </body></html>

效果如下:

JS中的BOM应用

可以看到我们的div块有轻微的抖动,因为onscroll函数一直在发生,每发生一次便会调用一次,所以会发生这种情况。此外还存在一个更严重的情况:如果我们改变窗口大小,div块并不会跟着走而是保持在原地,因此我们还要用到另一个事件——

window.onresize(页面大小改变时触发的事件:):

window.onscroll=window.onresize=function (){...}

最后我们来说说几个常用的系统对话框:

alert("内容") 警告框,没有返回值

confirm("提问的内容") 选择框,会给确定或取消选项,返回一个boolean

prompt("提示文字","默认文字") 会弹出一个可输入的文本框,返回值为输入的文本内容(字符串),不输入则为null

总结

以上所述是小编给大家介绍的JS中的BOM应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ppjdd.html