【JavaScript】017.常用内置对象

最新推荐文章于 2020-08-24 11:36:38 发布

Spade_

最新推荐文章于 2020-08-24 11:36:38 发布

阅读量257

点赞数 5

分类专栏： JavaScript 文章标签： javascript html5 css

本文链接：https://blog.csdn.net/Spade_/article/details/105904040

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.目的

JavaScript常用内置对象

    // 1. document
    //     document.getElementById  // 通过id获取元素
    //     document.getElementsByTagName  // 通过标签名获取元素
    //     document.referrer // 获取上一个跳转页面的地址(需要服务器环境)
    // 2. location
    //     window.location.href  // 获取或者重定url地址
    //     window.location.search  // 获取地址参数
    //     window.location.hash // 获取页面锚点或者哈希值

2.示例代码

图片及源码的github链接
017.常用内置对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>017.常用内置对象</title>
    <script type="text/javascript">
        // 1. document
        //     document.getElementById  // 通过id获取元素
        //     document.getElementsByTagName  // 通过标签名获取元素
        //     document.referrer // 获取上一个跳转页面的地址(需要服务器环境)
        // 2. location
        //     window.location.href  // 获取或者重定url地址
        //     window.location.search  // 获取地址参数
        //     window.location.hash // 获取页面锚点或者哈希值

        // 3.document.referrer使用参考
        // window.onload = function () {
        //     // 储存上一个页面的地址
        //     // var sUrl = document.referrer;
        //     var oBtn = document.getElementById('btn1');
        //     oBtn.onclick = function () {
        //         // window.location.href = sUrl;
        //         window.location.href = 'http://www.baidu.com';
        //     }
        // }

        // 4.window.location.search使用参考
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var sData = window.location.search;

            if(sData !== ''){
                var aRr = sData.split("="); // 以"="划分参数
                var iNum = aRr[1];  // aRr[0]为?, aRr[1]才是参数

                if(iNum == 1){
                    oDiv.style.backgroundColor = 'gold';
                }
                else if(iNum == 2){
                    oDiv.style.backgroundColor = 'green';
                }
                else if(iNum == 0){
                    oDiv.style.backgroundColor = 'red';
                }
                else{
                    oDiv.style.backgroundColor = 'pink';
                }
            }
        }

    </script>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            position: center;
            top: 100px;
            border: 1px solid #000;
        }
    </style>

</head>
<body>
    <input type="button" name="" value="跳转页面1" id="'btn1">
    <div id="div1" ></div>
    <a href="017.常用内置对象.html?aa=1">金色</a>
    <a href="017.常用内置对象.html?aa=2">绿色</a>
    <a href="017.常用内置对象.html?aa=0">红色</a>
    <a href="017.常用内置对象.html?aa=4">粉色</a>
</body>
</html>