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 语法高亮实现. 先 ...
随机推荐
- c++学生信息管理系统(window控制台实现鼠标点击操作）
翻起大一时写过的作业代码--一个学生信息管理系统,当时不会使用QT,不会MFC等库,只会c++,但是又想做一个有界面的,能够实现鼠标操作的程序.于是绞尽脑汁查资料,自己造轮子,最终写出来了下面的这个现 ...
- divisors 数学
divisors 数学 给定\(m\)个不同的正整数\(a_1, a_2,\cdots, a_m\),请对\(0\)到\(m\)每一个\(k\)计算,在区间\([1, n]\)里有多少正整数是\(a\ ...
- CF809E 【Surprise me!】
我们要求的柿子是张这样子的: \[\frac{1}{n * (n - 1)} * \sum_{i = 1}^n\sum_{j = 1}^{n}\phi(a_i*a_j)*dis(i, j)\] 其中\ ...
- 服务器之poll
poll服务器方法采用将监听端口用数组存放起来,这样就不需要轮询的监听整个文件描述符了 #include <poll.h> int poll(struct pollfd *fds, nfd ...
- mysqlslap压力测试时出现"Can't connect to MySQL server"
mysqlslap -utest -h 192.168.1.12 -p'test' --concurrency=100 --iterations=500 --create-schema='my_db' ...
- Codeforces - 2019年11月补题汇总
大概目标是补到 #500 为止的 Div. 2 ,先定个小目标,寒假开始前补到 #560 为止 Codeforces Round #599 (Div. 2) 5/6 备注:0-1BFS(补图连通块) ...
- codeforces#1228E. Another Filling the Grid（容斥定理，思维）
题目链接: https://codeforces.com/contest/1228/problem/E 题意: 给n*n的矩阵填数,使得每行和每列最小值都是1 矩阵中可以填1到$k$的数 数据范围: ...
- Linux之jq
什么是jq?jq是Linux下面把文本字符串格式化成json格式的工具 系统环境:centos 7 一.安装 (1)yum安装 a.安装epel源 # wget http://dl.fedorapro ...
- 2018-2019-2 20165312《网络攻防技术》Exp7 网络欺诈防范
2018-2019-2 20165312<网络攻防技术>Exp7 网络欺诈防范 目录 一.相关知识点总结 二.实验内容 三.实验步骤 四.实验总结及问题回答 五.实验中遇到的问题及解决方法 ...
- Delphi BASE64单元EncdDecd的修改
Delphi BASE64单元EncdDecd的修改 EncdDecd.pas两个函数声明: procedure EncodeStream(Input, Output: TStream);proced ...