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 语法高亮实现. 先 ...
随机推荐
- __stdcall、Q_DECL_IMPORT、Q_DECL_EXPORT
https://www.cnblogs.com/songfeixiang/p/3733661.html 在C语言中,假设我们有这样的一个函数:int function(int a,int b)调用时只 ...
- Centos 如何扩充/增加磁盘
1:使用背景 废话不多说,磁盘空间不足,增加磁盘,然后扩充现有不足空间磁盘. 本次以Vmware进行测验. 2:我们本次要增加的就是这个 3:我们先添加一个磁盘,20G,添加过程不在赘述 4:添加完成 ...
- NodeJS基础知识
console.log方法: console.log("This is a test string"); node app.js 使用重定向标准输出流: node app.js 1 ...
- 好久木来了，一直忙于项目（加懒惰），今天讲讲vuecli3.0的使用
vue更新换代很快,马上vue都要出3.0了,这是一个巨大的变革,不过今天讲的是vuecli3.0,里面使用的vue仍然是2的,所有可以放心大胆使用. Vue CLI 是一个基于 Vue.js 进行快 ...
- docker部署vue前端
1.下载安装nginx image docker pull nginx:latest 2.准备将编译后的代码上传到主机上 3.编写dockerfile, nginx conf,并创建镜像 Docker ...
- Java学习日记基础篇（八) —— 二进制、位运算、位移运算
二进制 二进制是逢2进位的进位置,0,1是基本算符 原码反码补码 在基本数据类型那里,有详细解释 二进制的最高位数是符号位:0表示整数,1表示负数 正数的原码,反码,补码都一样 负数的反码 = 它的原 ...
- [PKUSC2018]最大前缀和——状压DP
题目链接: [PKUSC2018]最大前缀和 设$f[S]$表示二进制状态为$S$的序列,任意前缀和都小于等于$0$的方案数. 设$g[S]$表示二进制状态为$S$的序列是整个序列的最大前缀和的方案数 ...
- Centos7 安装Redis，报错[adlist.o] Error jemalloc/jemalloc.h: No such file or directory
redis官网 https://redis.io/download 安装 $ wget http://download.redis.io/releases/redis-5.0.4.tar.gz $ t ...
- BeanFactory 简介以及它 和FactoryBean的区别
BeanFacotry是spring中比较原始的Factory.如XMLBeanFactory就是一种典型的BeanFactory.原始的BeanFactory无法支持spring的许多插件,如AOP ...
- C语言中的指针笔记
C语言指针 得到变量的地址 可以使用&运算符找到变量保存在内存中的位置 int x = 1; printf("x的内存地址是"%p\n",&x) %p格式 ...