前端开发之javascript BOM篇
主要内容：
前情提要： 何谓BOM?
所谓 BOM 指的就是浏览器对象模型 Browser Object Model，它的核心就是浏览器。
一、BOM输出
主要输出方式有以下几种：
二、BOM的对象
1、open和close方法 --- 打开和关闭网页的几种方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>open_close方法</title>
</head>
<body>
<!--open打开方法-->
<button onclick="window.open('https://www.cnblogs.com/schut/')">暮光微凉</button> <button onclick="openHtml()">点击打开</button> <button>打开博客</button> <!--close关闭方法,不需要参数，直接关闭当前网页-->
<button onclick="window.close()">关闭页面</button> <button>关闭页面</button> </body>
<script type="text/javascript">
// open方法
function openHtml(){
window.open("https://www.cnblogs.com/schut/")
} var openBtn = document.getElementsByTagName('button')[2];
openBtn.onclick = function(){
// open('https://www.cnblogs.com/schut/') // 此处window可省略
open('about:blank',"_self") // 打开一个空页面
} // close方法
var closeBtn = document.getElementsByTagName('button')[4];
closeBtn.onclick = function(){
if(confirm('是否确认关闭？')){
close();
}
}
</script>
</html>
2、BOM的其他对象方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM的其他对象</title>
</head>
<body> </body>
<script type="text/javascript">
// 返回浏览器的用户设备信息
console.log(window.navigator.userAgent); // location方法
console.log(window.location);
window.location.href = 'https://www.cnblogs.com/schut/'; //全局刷新（尽量少用） ===》 局部刷新
// window.location.reload(); // 不间断全局刷新
setTimeout(function(){
window.location.reload();
},3000) // 每隔3秒刷新一次
</script>
</html>
三、client的相关属性
1、client的相关属性有如下几个：
clientTop 上边框的高度 clientLeft 左侧边框的宽度 clientWidth 内容区域+左右padding（即可视宽度） clientHeight 内容区域+上下padding（即可视高度）
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>client相关属性解读</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.box{
width:200px;
height:150px;
margin:30px 10px;
position:absolute;
border:5px solid royalblue;
padding:10px 20px; }
</style>
</head>
<body>
<div class="box"> </div>
</body>
<script type="text/javascript">
var Box = document.getElementsByClassName('box')[0]; console.log(Box.clientTop) // 5 对应上边框的高度
console.log(Box.clientLeft) // 5 对应左侧边框的宽度
console.log(Box.clientWidth) // 240 内容区域+左右padding 可视宽度
console.log(Box.clientHeight) // 170 内容区域+上下padding 可视高度
</script>
</html>
2、屏幕的可视区域
注意：此处的屏幕可视区域指的是浏览器中页面内容的可视区。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屏幕的可视区域</title>
</head>
<body> </body>
<script type="text/javascript">
window.onload = function () {
// onload表示加载
console.log("屏幕可视宽度：",document.documentElement.clientWidth);
console.log("屏幕可视高度：",document.documentElement.clientHeight);
} window.onresize = function () {
// 实时显示屏幕可视区域大小
console.log("屏幕实时可视宽度：",document.documentElement.clientWidth);
console.log("屏幕实时可视高度：",document.documentElement.clientHeight);
}
</script>
</html>
四、offset的相关属性
offset的相关属性有以下几个：
offsetTop :如果盒子没有设置定位，到浏览器的顶部距离；设置定位后，以父盒子的位置为基准 offsetLeft :如果盒子没有设置定位，到浏览器的左部距离；设置定位后，以父盒子的位置为基准 offsetWidth:内容+padding+border offsetHeight:内容+padding+border
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset系列</title>
<style type="text/css">
#box1{
position:relative; // 设置定位
background-color: #b3d7ff;
}
#box2{
width:200px;
height:200px;
border:1px solid green;
padding:10px;
margin:10px;
position:absolute; // 设置定位
background-color: #b1dfbb;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"> </div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box2');
console.log(box.offsetTop); // 未设置定位：10 设置定位后 ：10
console.log(box.offsetLeft); // 未设置定位：18 设置定位后 ：10
console.log(box.offsetWidth);// 未设置定位：222 设置定位后 ：222
console.log(box.offsetHeight);// 未设置定位：222 设置定位后 ：222 }
</script>
</html>
五、scroll相关属性
scroll 的相关属性有以下几个：
scrollTop 距离浏览器内容区顶端的距离 scrollLeft 距离浏览器内容区左端的距离 scrollWidth 内容的宽度+padding(注意：不包含边框) scrollHeight 内容的高度+padding(注意：不包含边框)
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll系列</title>
<style type="text/css">
*{
padding:0;
margin:0;
} </style>
</head>
<body>
<div style="width:100%;height:1200px;">
<div style="height:200px;background-color: palevioletred;"></div>
<div style="height:200px;background-color: orange;"></div>
<div style="height:200px;background-color: gold;"></div>
<div style="height:200px;background-color: greenyellow;"></div>
<div style="height:200px;background-color: cornflowerblue;"></div> <div id='scroll' style="height:150px;width:300px;border:3px solid mediumspringgreen;overflow: auto">
<p>我是一个小标签</p>
<p>我是一个小标签</p>
<p>我是一个小标签</p>
<p>我是一个小标签</p>
<p>我是一个小标签</p>
<p>我是一个小标签</p>
<p>我是一个小标签</p>
<p>我是一个小标签</p>
<p>我是一个小标签</p>
<p>我是一个小标签</p>
<p>我是一个小标签</p>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
// 实施监听滚动事件
window.onscroll= function(){
// 浏览器页面的滚动监听
console.log('------------------------------------');
console.log("上"+document.documentElement.scrollTop);
console.log("左"+document.documentElement.scrollLeft);
console.log("宽"+document.documentElement.scrollWidth);
console.log("高"+document.documentElement.scrollHeight);
} // 盒子内容滚动监听
var s = document.getElementById('scroll');
s.onscroll = function(){
// scrollHeight:内容的高度+padding（注意：不包含边框）
console.log('----------------------');
console.log('上'+s.scrollTop);
console.log('左'+s.scrollLeft);
console.log('宽'+s.scrollWidth);
console.log('高'+s.scrollHeight);
}
}
</script>
</html>
前端开发之javascript BOM篇的更多相关文章
- 前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
- 前端开发之JavaScript基础篇三
主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证 一.创建对象的几种方式 1 ...
- 前端开发之JavaScript基础篇四
主要内容: 1.定时器 2.正则表达式入门 3.元字符 4.正则表达式实战运用 一.定时器 javaScript里主要使用两种定时器,分别是:setInterval()和setTimeout(). 1 ...
- 前端开发之JavaScript基础篇二
主要内容: 1.流程控制条件语句和switch语句 2.for循环和while循环 3.Break语句和Continue语句 4.数组和数组常用方法 5.函数 6.对象 一.流程控制条件语句和swit ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- 前端开发之JavaScript HTML DOM实战篇
实战案例一: “灯泡发光” <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 前端开发之JavaScript HTML DOM理论篇二
主要内容: 1.HTML DOM元素 2.HTML DOM事件 一.DOM元素 主要操作有添加.删除和替换HTML元素 1.创建新的HTML元素 (1)方法一: appendChild() 追加 如 ...
- 前端开发之JavaScript HTML DOM理论篇一
主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改 一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTM ...
- 前端开发之JavaScript
JavaScript JS是一种脚本语言,浏览器执行,用于渲染HTML网页,实现网页的动画效果. JavaScript的引用方式: 1,在HTML文件中script标签中写JS代码 <scrip ...
随机推荐
- Machine Schedule（二分图匹配之最小覆盖点，匈牙利算法）
个人心得:二分图啥的一点都不知道,上网借鉴了下,请参考http://blog.csdn.net/thundermrbird/article/details/52231639 加上自己的了解,二分图就是 ...
- 《selenium2 python 自动化测试实战》（18）——自动化测试模型（一）
线性测试 已经被淘汰了:线性测试就是一个脚本完成一个场景,代码基本没有复用,每一个脚本都要从头开始写——这哪行. 模块化与类库 这个就是分模块:有点类似面系那个对象,把功能(比如登录)单独拿出来,当下 ...
- Codeforces Round #249 (Div. 2)-D
这场的c实在不想做,sad. D: 标记一下每个点8个方向不经过黑点最多能到达多少个黑点. 由题意可知.三角形都是等腰三角形,那么我们就枚举三角形的顶点. 对于每个定点.有8个方向能够放三角形. 然后 ...
- 开始创建一个 Vue 项目
开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...
- CentOS 6.5 下MySql主从、主主配置
参考网站: http://blog.csdn.net/faye0412/article/details/6280761 http://blog.csdn.net/kk185800961/article ...
- php端安装rabbitmq-c
php端安装rabbitmq-c url:https://github.com/alanxz/rabbitmq-c cd rabbitmq-c**** ./configure --prefix=/us ...
- angular的继承作用域通信
本人学了一段时间的angular,angular之间怎样通信,我就总结以下几点,如果有哪位大神认为不对,敬请赐教. 1.父子之间的作用域进行通信 html <div ng-controller= ...
- mysql server id一样导致报错
(root@localhost) 16:03:38 [(none)]> show slave status \G; Last_IO_Errno: 1593 Last_IO_Error: Fata ...
- CentOS7 安装Chrome
1. 下载Chrome浏览器的rpm包 https://www.chrome64bit.com/index.php/google-chrome-64-bit-for-linux 2. 安装Chrome ...
- 浅析ECMP等价路由
1.ECMP简介 Equal-CostMultipathRouting,等价多路径.即存在多条到达同一个目的地址的相同开销的路径.当设备支持等价路由时,发往该目的 IP 或者目的网段的三层转发流量就可 ...