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 语法高亮实现. 先 ...
随机推荐
- Centos7 安装php7.3 并扩展 MySQL、postgresql
首先是安装需要的扩展文件 yum -y install freetype-devel yum -y install libpng-devel yum -y install libjpeg-devel ...
- jQuery多选和单选下拉框插件select.js
一.插件描述 可通过参数设置多选或者单选,多选返回数组结果,单选返回字符串,如图: 下载地址:https://pan.baidu.com/s/1JjVoK89_ueVVpfSlMDJwUQ 提取码 ...
- （7）打鸡儿教你Vue.js
计算属性 computed <div id="app"> {{ message.split('').reverse().join('') }} </div> ...
- 小程序for循环
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html 在什么情况下要自定义? 当上一个循环的数据 ...
- JVM的内存配置参数
JVM的结构问题:JVM分两块:PermanentSapce和HeapSpace, HeapSpace = [old + new{=Eden,from,to}] PermantSpace主要负责存放加 ...
- 《Glibc内存管理》笔记DAY1
目录 x86_64栈和mmap固定映射地址 内存的延迟分配 内核数据结构 mm_struct Heap 操作相关函数 Mmap 映射区域操作相关函数 内容来源 x86_64栈和mmap固定映射地址 ...
- js 检测链接是否有效（包含跨域）
const checkUrl = function (url) { const promise = new Promise(function (resolve, reject) { if (!url) ...
- linux listen()
listen(等待连接) 相关函数 socket,bind,accept,connect表头文件 #include<sys/socket.h>定义函数 int listen(int s,i ...
- nginx -- 设置单点登录 sso oidc oauth
这个开源项目可以找到你想要的: https://github.com/vouch/vouch-proxy
- [Java]两个将秒数转化为日时分秒形式的函数
比如900秒要反应一下,说15分就直观了.下面两个函数性能差不多,大家任意取用. 代码: import java.util.concurrent.TimeUnit; public class Test ...