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 语法高亮实现. 先 ...
随机推荐
- js 读xml文件
参考 http://www.w3school.com.cn/xmldom/dom_document.asp A.xml <?xml version="1.0" encodin ...
- python 的单例
例子 class Singleton(object): _instance = None def __new__(cls, *args, **kw): if not cls._instance: cl ...
- JavaScript 字符串转数字（整数，浮点数，进制转换）
下面是使用parseFloat()方法的示例: parseFloat("1234blue"); //returns 1234.0 parseFloat("0xA" ...
- kvm 学习（三）存储池
创建kvm存储池 1.查看系统已经存储的存储池 [root@runstone ~ ::]#virsh pool-list Name State Autostart ------------------ ...
- swoole的websockte例子
服务器的环境,建议用bt.cn的一键环境 服务端: <?php /** * Created by PhpStorm. * User: Administrator * Date: 2019\5\2 ...
- LightGBM与评分卡
调参策略 最大化 off_ks + 0.8(off_ks-train_ks) import pandas as pd from sklearn.metrics import roc_auc_score ...
- IO之Socket网络编程
一.Socket Socket不是Java中独有的概念,而是一个语言无关标准.任何可以实现网络编程的编程语言都有Socket. 1,Socket概念 网络上的两个程序通过一个双向的通信连接实现数据的交 ...
- vue - 设置全局html背景
需求 有时候有些组件需要全局设置body背景,有些不需要在组件中设置就行了 解决思路 1. 全局设置可以是html,body,这里大家可以试一下,这两个只要其中一个设置了background,另一个的 ...
- Java并发包之线程池概述
前言 线程池的作用就是将线程的管理.创建.销毁等操作与线程需要执行的任务隔离开来,从而避免线程频繁的创建与销毁,以及大量的线程的上下文切换造成的资源损耗.关于Java并发包中的线程池部分,我把它们分为 ...
- Web安全测试检查点
Web安全测试检查点 上传功能 1.绕过文件上传检查功能 2.上传文件大小和次数限制 注册功能 1.注册请求是否安全传输 2.注册时密码复杂度是否后台检验 3.激活链接测试 4.重复注册 5.批量注册 ...