JS的BOM操作语法
整理了一下JS的BOM操作语法，这里记录一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的BOM操作</title>
<style type="text/css">
#dv3{
width: 300px;
height: 200px;
background-color: yellow;
} #dv4{
width: 300px;
height: 200px;
background-color: green;
overflow-y: auto;
overflow-x: auto;
} #dv5{
width: 100px;
height: 200px;
background-color: gray;
overflow-y: auto;
} .head{
width: 100%;
height: 120px;
background-color: #808080;
} .menu{
width: 100%;
height: 40px;
background-color: #f00;
}
.main{
width: 100%;
height: 1000px;
background-color: #ff6a00;
}
.top{
position: fixed;
top: 0px;
} #dv9{
width: 300px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p>js的BOM操作模块</p>
</div>
<input type="button" name="" value="点击" id="btn1"> <input type="button" name="" value="页面跳转到百度" id="btn2">
<input type="button" name="" value="通过历史记录跳转到百度" id="btn3"> <input type="button" name="" value="停止计时器" id="btn4"> <div style="width: 300px;height: 200px;background-color: red" id="dv1"></div>
<input type="button" name="" value="div背景色渐变" id="btn5"> <div style="width: 400px;height: 300px;background-color: blue" id="dv2"></div>
<input type="button" name="" value="div宽度渐变" id="btn6"> <div id="dv3"></div>
<input type="button" name="" value="offset获取dv3的属性值" id="btn7"> <div id="dv4">aasdfadsfasdfasdfasdfasdfasdfasdfasdfasdfasd</div>
<input type="button" name="" value="scroll获取dv4的属性值" id="btn8"> <div id="dv5">阿斯顿福建阿斯顿福建安利的时间发打飞机阿道夫阿道夫奥德asdf adfasdf dfasdf asdf asdf asdf asd赛法开始法律上的发送到发送地方</div> <div class="head" id="dv6"></div>
<div class="menu" id="dv7"></div>
<div class="main" id="dv8"></div> <div id="dv9"></div>
<input type="button" name="" value="确认" id="btn9">
<script type="text/javascript">
//页面加载完出现弹窗
window.onload=function(){
alert("我是js的最后一大模块");
} //location
console.log(window.location); //获取当前页面的URL
console.log(window.location.host); //获取当前RUL的主机名
console.log(window.location.port); //获取当前RUL的端口号
console.log(window.location.pathname); //获取当前RUL指向的文件的路径 //使用链接进行页面跳转（可以返回前一页面）
document.getElementById("btn1").onclick=function(){
window.location.href="http://www.baidu.com";
} //使用方法进行页面跳转（可以返回前一页面）
document.getElementById("btn1").onclick=function(){
window.location.assign("http://www.baidu.com");
} //使用方法进行页面跳转（不可以返回前一页面）
document.getElementById("btn1").onclick=function(){
window.location.replace("http://www.baidu.com");
} //刷新页面
document.getElementById("btn1").onclick=function(){
window.location.reload();
} //历史记录
document.getElementById("btn2").onclick=function(){
window.location.href="http://www.baidu.com"; //页面跳转到百度
}
document.getElementById("btn3").onclick=function(){
window.history.forward(); //页面跳转到百度后返回，再点击这个按钮，通过历史记录又回到百度
} //获取系统和浏览器信息
console.log(window.navigator.userAgent); /*定时器*/
//循环执行的计时器
setInterval(function(){
alert("3秒出现一次")
},3000); //每隔3秒钟执行一次定时器里面的代码 //点击按钮，停止循环执行的计时器
document.getElementById("btn4").onclick=function(){
window.clearInterval(time);
}
var time=setInterval(function(){
alert("3秒出现一次")
},3000); //只执行一次的计时器
setTimeout(function(){
alert("2秒出现一次")
},2000); //点击按钮，停止只执行一次的计时器
document.getElementById("btn4").onclick=function(){
window.clearTimeout(time);
}
var time=setTimeout(function(){
alert("2秒出现一次")
},2000); //定时器实现背景色渐变
document.getElementById("btn5").onclick=function(){ //按钮点击事件
var i=10;
var time=setInterval(function(){
i--;
if(i<0){
window.clearInterval(time);
}
document.getElementById("dv1").style.opacity=i/10;
},1000);
} //定时器实现div宽度渐变
document.getElementById("btn6").onclick=function(){
var wid=400;
var time=setInterval(function(){
wid+=10;
if(wid==500){
window.clearInterval(time);
}
document.getElementById("dv2").style.width=wid+"px"; //必须拼接上px
},1000)
} /*offset属性*/
document.getElementById("btn7").onclick=function(){
console.log(document.getElementById("dv3").offsetWidth); //获取dv3的宽
console.log(document.getElementById("dv3").offsetHeight); //获取dv3的高 console.log(document.getElementById("dv3").offsetTop); //获取dv3的margin-top（不是相对于父级dv的margin-top，而是相对于html页面）
console.log(document.getElementById("dv3").offsetLeft); //获取dv3的margin-left（不是相对于父级dv的margin-left，而是相对于html页面）
} /*scroll属性*/
document.getElementById("btn8").onclick=function(){
console.log(document.getElementById("dv4").scrollHeight); //dv4里的内容为超出dv4高度时，返回dv4的高度，超出时，返回内容的高度
console.log(document.getElementById("dv4").scrollWeight); //获取dv4的高度
console.log(document.getElementById("dv4").scrollTop); //获取dv4里的竖直滚动条，滚动后，内容离dv4顶端的距离
console.log(document.getElementById("dv4").scrollLeft); //获取dv4里的水平滚动条，滚动后，内容离dv4左边的距离
} //onscroll事件（div的滚动事件）
document.getElementById("dv5").onscroll=function(){
console.log(this.scrollTop); //拖动竖直滚动条时，输出内容距离dv5顶端的距离
} //页面的滚动事件
window.onscroll=function(){
console.log(document.documentElement.scrollTop); //拖动页面竖直滚动条，输出内容距离页面顶端的距离
} //固定导航栏
window.onscroll=function(){
if(document.documentElement.scrollTop>=document.getElementById("dv6").offsetHeight){
//页面滚动条下拉超过一定高度，就将dv7置顶
document.getElementById("dv7").className="menu top"; //可同时给元素赋多个className
//上面一步会遮挡dv8里面的内容，所以将dv8的marginTop设置成dv7的宽度
document.getElementById("dv8").marginTop=document.getElementById("dv7").offsetHeight;
}
else{
//页面滚动条又回到原位，再将dv7还原到最初的位置
document.getElementById("dv7").className="menu";
//再还原dv8的marginTop
document.getElementById("dv8").marginTop="0px";
}
} /*client属性*/
document.getElementById("btn9").onclick=function(){
console.log(document.getElementById("dv9").clientWidth); //获取div可视区域的宽（不受margin、border宽度的影响）
console.log(document.getElementById("dv9").clientHeight); //获取div可视区域的高（不受margin、border宽度的影响）
console.log(document.getElementById("dv9").clientLeft); //获取div的border-left（不受margin、border宽度的影响）
console.log(document.getElementById("dv9").clientTop); //获取div的border-top（不受margin、border宽度的影响）
}
</script>
</body>
</html>
。
JS的BOM操作语法的更多相关文章
- JS的DOM操作语法
整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- day45:JS中的json&JS的BOM操作和DOM操作
目录 1.补充:CSS中的弹性盒子 2.JS中json的序列化 3.JS中的BOM操作 3.1 location操作 3.2 计时器 4.JS中的DOM操作 4.1 创建标签 4.2 查找标签 4.3 ...
- JS中BOM操作知识点
JS BOM window对象 全局变量和全局方法都归在window上 alert-comfirm-prompt 让alert .confirm等弹出框上的提示文字实现换行:\n // confirm ...
- 前端js之BOM和DOM操作
目录 引入 BOM操作 window对象 history对象 location对象(重点) 弹出框 定时器 计时器相关 DOM 查找标签 直接查找 间接查找 节点操作 创建节点及添加节点 删除节点 替 ...
- 5、前端--js常量、变量、5种基本数据类型（number string boolean undefined object）、运算符、流程控制、三元运算符、函数、自定义对象、内置对象、BOM操作
变量与常量 在JS中声明变量需要使用关键字 老版本 var(全部都是全局变量) 新版本 let(可以声明局部变量) # 推荐使用let(其实问题不大) 在JS中声明常量也需要使用关键字 const # ...
- js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型
js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...
- js对象(BOM部分/DOM部分)
JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢 概念 BOM(Browser Object Model)是指浏览 ...
- JavaScript基础16——js的BOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js 正则练习之语法高亮
原文:js 正则练习之语法高亮 学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解.今天就分析下 次碳酸钴 和 Barret Lee 语法高亮实现. 先 ...
随机推荐
- 洛谷P3119草鉴定
题目 草鉴定,tarjan可以用来缩点,优化spfa的时间, 缩点之后就是一个\(DAG\)了,因此完全可以用来跑spfa上的最长路,然后枚举每条边,查看是否这条边的两个节点分别可以到达起点所在的强连 ...
- [报错解决] "MySQL server has gone away" 解决思路
大概的4个思路 1.超时,超时的阀值有wait_timeout这个参数控制 2.连接被人为的kill 3.发送的SQL语句过大超过max_allowed_packet的大小. (操作的sql语句太长了 ...
- javaee三层架构案例--简单学生管理系统
背景 学了jdbc.jsp等需要串起来,不然会忘记 项目环境 win10 jdk11 mysql8.0.13 jar包 c3p0-0.9.5.2 commons-dbutils-1.7 jstl mc ...
- 打造简单OS-总目录
1-汇编写入引导区,虚拟机启动步骤 (了解即可) 2-开机BIOS初始化与MBR操作系统引导详解 (了解即可) 3-MBR引导区转移加载简单程序(突破512限制)(了解即可) 4-loader硬盘加载 ...
- 10月清北学堂培训 Day 6
今天是黄致焕老师的讲授~ T1 自信 AC 莫名 80 pts???我还是太菜了!! 对于每种颜色求出该颜色的四个边界,之后枚举边界构成的矩阵中每个元素,如果不等于该颜色就标记那种颜色不能最先使用. ...
- 分布式锁 ----zookeeper实践 (排它锁)
排它锁概念: Exclusive Locks,被称为X锁,写锁,独占锁.如果事物T1对数据对象O1加上了排它锁,那么在整个加锁期间,只允许事务T1对O1进行读写操作,其他事务必须等到T1释放锁后才能进 ...
- Oracle plsql 触发器 查询/启用/停止
在PLSQL中查询某个表的触发器脚本 select * from user_triggers where table_name='xxx' oracle触发器的启用和停用 1.禁用 table_nam ...
- HashMap 在高并发下引起的死循环
HashMap 基本实现(JDK 8 之前) HashMap 通常会用一个指针数组(假设为 table[])来做分散所有的 key,当一个 key 被加入时,会通过 Hash 算法通过 key 算出这 ...
- beyond compare秘钥被禁
错误提示:This license key has been revoked xxxxx 即: Windows 系统: 解决方法: 删除以下目录中的所有文件即可. C:\Users\Administr ...
- Java 面向对象（四）
代码块 什么是代码块 在类中或方法当中 使用 { } 括起来的一段代码,就称它是一个代码块. 在代码块当中定义的变量我们称是局部变量,在外面是没有办法使用的.这里定义的 a 就是一个局部变量. 代码块 ...