javascript_BOM基础_ZHOU125disorder_

最新推荐文章于 2024-07-30 10:56:44 发布

zjing125

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量120

点赞数

分类专栏： javascript基础文章标签： js javascript

本文链接：https://blog.csdn.net/ZHOU125disorder/article/details/113201301

版权

javascript基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

BOM基础

`window`

screen存放浏览器的屏幕信息
navigator描述当前的浏览器
locationwindow对象的一部分，可以判断历史记录数量
history保存浏览器历史记录信息
frames窗口或框架内的结构

`BOM`

BOM (Browser Object Model)     浏览器对象模型
操作浏览器         js对浏览器的各种操作的对象

open()方法打开指定窗口

		window.open("https://www.baidu.com","_self","width=456,height=456,top=0,left=0");
		window.open("路径","打开方式","窗口的大小和位置");//当打开方式为_self时窗口的大小和位置没用
		打开的方法和a标签的target一样为（_self或_blank）`默认为新窗口打开`

close()关闭关闭指定的窗口

	new_window = window.open("https://www.baidu.com","_self","width=456,height=456,top=0,left=0");
	new_window.close();

`navigator对象`

        // navigator对象
        console.log("浏览器代码名称:"+navigator.appCodeName);
        console.log("浏览器名称:"+navigator.appName);
        console.log("浏览器版本:"+navigator.appVersion);

`screen对象`

        //  screen对象
        //  获取屏幕信息
        //  screen屏幕的宽高
        console.log(screen.width);
        console.log(screen.height);
        //  screen屏幕的宽高    avail不包括窗口任务栏
        console.log(screen.availHeight);
        console.log(screen.availWidth);

`History对象`

        //History对象
        history.forward();//下一页
        history.back();//上一页
        history.go(0);//刷新
        history.go(1);//下一页
        history.go(-1);//上一页
        history.go(2)//下二页
        history.go(-2)//上二页

`location对象`

    // location对象   获取当前页面的地址,并把浏览器重新定向到一个新的页面;
    //人话：就是进行赋值，和open类似;

window.location.href = "https://www.baidu.com";

刷新页面

            // window.location.href = window.location.href;
            // window.location.reload();

`工作区域尺寸`

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作区域尺寸</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    div{
        width: 256px;
        height: 256px;
        overflow: auto;
    }
    </style>
</head>
<body>
    <div>
        卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西
        卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西
        卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西
        卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西
        卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西
        卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西
        卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西
        卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西
        卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西
        卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西卡卡西
    </div>

    <script>
        var div=document.getElementsByTagName("div")[0];
        // client系列   可以理解为可视区域宽高          不把滚动条和边框算在内
        console.log(div.clientWidth);
        console.log(div.clientHeight);
        // offset系列   width+padding+border           包含边框和滚动条
        console.log(div.offsetWidth);
        console.log(div.offsetHeight);
        // scroll系列   不包含滚动条和border            实际的宽高,包括隐藏元素的宽高
        console.log(div.scrollWidth);
        console.log(div.scrollHeight);
        // 获取浏览器窗口的尺寸     不包括控制台
        console.log(window.innerWidth);
        console.log(window.innerHeight);
        // HTML文档所在窗口宽高
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);
        //兼容写法
        // document.body.clientWidth
        // document.body.clientHeight
        var width=document.documentElement.clientWidth||document.body.clientWidth;
        var height=document.documentElement.clientHeight||document.body.clientHeight;
        console.log(width);
        console.log(height);
        // onscroll滚动条事件
        // scrollTop到顶部的距离
        // scrollLeft到左边的距离
        div.onscroll=function(){
            console.log(div.scrollTop);
            console.log(div.scrollLeft);
        }
    </script>
</body>
</html>

offset与定位父级的距离;

        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .father{
            width: 456px;
            height: 456px;
            background-color: #ddd;
            position: relative;
            top: 20px;
            left: 20px;
        }

        .son{
            width: 256px;
            height: 256px;
            position: absolute;
            background-color: #096;
            top: 100px;left: 100px;
        }

    <div class="father">
        <div class="son"></div>
    </div>

    <script>
        var son=document.getElementsByClassName("son")[0];
        console.log(son.offsetLeft);
        console.log(son.offsetTop);
    </script>

zjing125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript_BOM基础_ZHOU125disorder_

BOM基础windowscreen存放浏览器的屏幕信息navigator描述当前的浏览器locationwindow对象的一部分，可以判断历史记录数量history保存浏览器历史记录信息frames窗口或框架内的结构BOMBOM (Browser Object Model) 浏览器对象模型操作浏览器 js对浏览器的各种操作的对象open()方法打开指定窗口open(路径，指定窗口(新窗口，旧窗口)，窗口大小和位置)...
复制链接

扫一扫

专栏目录