简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">

  </script>
</head>
<body>
    <button id="btn">
        我是一个按钮

    </button>
<script type="text/javascript">
    /*
        浏览器已经为我们提供文档节点对象,这个对象是window属性
            可以在页面中直接使用,文档节点代表的是整个网页
     */
//    获取到button对象
    var btn=document.getElementById("btn");
    console.log(btn);
//    修改按钮的文字
    btn.innerHTML="I'm Button";
</script>
</body>
</html>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    我们可以在事件对应的属性中设置一些js代码,
        这样当事件被触发时,这些代码将会执行
    -->
    <button id="btn" onclick="alert('讨厌你点我干嘛');">我是一个按钮

    </button>
<script type="text/javascript">
    /*
        事件,就是用户和浏览器之间的交互行为,
            比如:点击按钮,鼠标移动,关闭窗口...

        可以为按钮的对应事件绑定处理函数的形式来响应事件
     */
    // 获取按钮对象
    var btn=document.getElementById("btn")
    /*
        可以为按钮的对应事件绑定处理函数的形式来响应事件
            这样当事件被触发时,其对应的函数将会被调用
     */
    // 绑定一个单击事件
    // 像这种为单击事件绑定的函数,我们称为单击响应函数
    btn.onclick=function (){
        alert("你还点");
    };
</script>
</body>
</html>

文档的加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
            浏览器加载一个页面时,是按照自上向下的顺序加载的
                读到一行就运行一行,如果将script标签写到页面的上边
                在执行时,页面还没有加载,DOM对象也没有加载,就无法获取DOM对象

         */
        /*
            onload事件会在整个页面加载之后才触发
                为window绑定一个onload事件
                    该事件对应的响应函数会在页面加载完成之后执行
                    这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
         */
        window.onload=function (){
            // 获取id为btn的按钮
            var btn=document.getElementById("btn");
            // 为按钮绑定一个单击响应函数
            btn.onclick=function (){
                alert("hello");
            };
        };
    </script>

</head>
<body>
    <button id="btn">点我以下</button>


<script type="text/javascript">
    /*
        将js代码编写到页面的下部就是为了可以在页面加载完毕之后再执行js代码
     */
    // 获取id为btn的按钮
    //var btn=document.getElementById("btn");
    // 为按钮绑定一个单击响应函数
    //btn.onclick=function (){
      //  alert("hello");
   // };
</script>
</body>
</html>

DOM查询

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style/css.css" />
    <script type="text/javascript">

        /*
         * 定义一个函数,专门用来为指定元素绑定单击响应函数
         * 	参数:
         * 		idStr 要绑定单击响应函数的对象的id属性值
         * 		fun 事件的回调函数,当单击元素时,该函数将会被触发
         */
        function myClick(idStr , fun){
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }

        window.onload = function(){

            //为id为btn01的按钮绑定一个单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function(){
                //查找#bj节点
                var bj = document.getElementById("bj");
                //打印bj
                //innerHTML 通过这个属性可以获取到元素内部的html代码
                alert(bj.innerHTML);
            };


            //为id为btn02的按钮绑定一个单击响应函数
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function(){
                //查找所有li节点
                //getElementsByTagName()可以根据标签名来获取一组元素节点对象
                //这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
                //即使查询到的元素只有一个,也会封装到数组中返回
                var lis = document.getElementsByTagName("li");

                //打印lis
                //alert(lis.length);

                //变量lis
                for(var i=0 ; i<lis.length ; i++){
                    alert(lis[i].innerHTML);
                }
            };


            //为id为btn03的按钮绑定一个单击响应函数
            var btn03 = document.getElementById("btn03");
            btn03.onclick = function(){
                //查找name=gender的所有节点
                var inputs = document.getElementsByName("gender");

                //alert(inputs.length);

                for(var i=0 ; i<inputs.length ; i++){
                    /*
                     * innerHTML用于获取元素内部的HTML代码的
                     * 	对于自结束标签,这个属性没有意义
                     */
                    //alert(inputs[i].innerHTML);
                    /*
                     * 如果需要读取元素节点属性,
                     * 	直接使用 元素.属性名
                     * 		例子:元素.id 元素.name 元素.value
                     * 		注意:class属性不能采用这种方式,
                     * 			读取class属性时需要使用 元素.className
                     */
                    alert(inputs[i].className);
                }
            };

            //为id为btn04的按钮绑定一个单击响应函数
            var btn04 = document.getElementById("btn04");
            btn04.onclick = function(){

                //获取id为city的元素
                var city = document.getElementById("city");

                //查找#city下所有li节点
                var lis = city.getElementsByTagName("li");

                for(var i=0 ; i<lis.length ; i++){
                    alert(lis[i].innerHTML);
                }

            };

            //为id为btn05的按钮绑定一个单击响应函数
            var btn05 = document.getElementById("btn05");
            btn05.onclick = function(){
                //获取id为city的节点
                var city = document.getElementById("city");
                //返回#city的所有子节点
                /*
                 * childNodes属性会获取包括文本节点在呢的所有节点
                 * 根据DOM标签标签间空白也会当成文本节点
                 * 注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,
                 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
                 */
                var cns = city.childNodes;

                //alert(cns.length);

                /*for(var i=0 ; i<cns.length ; i++){
                    alert(cns[i]);
                }*/

                /*
                 * children属性可以获取当前元素的所有子元素
                 */
                var cns2 = city.children;
                alert(cns2.length);
            };

            //为id为btn06的按钮绑定一个单击响应函数
            var btn06 = document.getElementById("btn06");
            btn06.onclick = function(){
                //获取id为phone的元素
                var phone = document.getElementById("phone");
                //返回#phone的第一个子节点
                //phone.childNodes[0];
                //firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
                var fir = phone.firstChild;

                //firstElementChild获取当前元素的第一个子元素
                /*
                 * firstElementChild不支持IE8及以下的浏览器,
                 * 	如果需要兼容他们尽量不要使用
                 */
                //fir = phone.firstElementChild;

                alert(fir);
            };

            //为id为btn07的按钮绑定一个单击响应函数
            myClick("btn07",function(){

                //获取id为bj的节点
                var bj = document.getElementById("bj");

                //返回#bj的父节点
                var pn = bj.parentNode;

                alert(pn.innerHTML);

                /*
                 * innerText
                 * 	- 该属性可以获取到元素内部的文本内容
                 * 	- 它和innerHTML类似,不同的是它会自动将html去除
                 */
                //alert(pn.innerText);


            });


            //为id为btn08的按钮绑定一个单击响应函数
            myClick("btn08",function(){

                //获取id为android的元素
                var and = document.getElementById("android");

                //返回#android的前一个兄弟节点(也可能获取到空白的文本)
                var ps = and.previousSibling;

                //previousElementSibling获取前一个兄弟元素,IE8及以下不支持
                //var pe = and.previousElementSibling;

                alert(ps);

            });

            //读取#username的value属性值
            myClick("btn09",function(){
                //获取id为username的元素
                var um = document.getElementById("username");
                //读取um的value属性值
                //文本框的value属性值,就是文本框中填写的内容
                alert(um.value);
            });


            //设置#username的value属性值
            myClick("btn10",function(){
                //获取id为username的元素
                var um = document.getElementById("username");

                um.value = "今天天气真不错~~~";
            });


            //返回#bj的文本值
            myClick("btn11",function(){

                //获取id为bj的元素
                var bj = document.getElementById("bj");

                //alert(bj.innerHTML);
                //alert(bj.innerText);

                //获取bj中的文本节点
                /*var fc = bj.firstChild;
                alert(fc.nodeValue);*/

                alert(bj.firstChild.nodeValue);


            });

        };


    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

        <br>
        <br>

        <p>
            你喜欢哪款单机游戏?
        </p>

        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br />
        <br />

        <p>
            你手机的操作系统是?
        </p>

        <ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
    </div>

    <div class="inner">
        gender:
        <input class="hello" type="radio" name="gender" value="male"/>
        Male
        <input class="hello" type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div><button id="btn01">查找#bj节点</button></div>
    <div><button id="btn02">查找所有li节点</button></div>
    <div><button id="btn03">查找name=gender的所有节点</button></div>
    <div><button id="btn04">查找#city下所有li节点</button></div>
    <div><button id="btn05">返回#city的所有子节点</button></div>
    <div><button id="btn06">返回#phone的第一个子节点</button></div>
    <div><button id="btn07">返回#bj的父节点</button></div>
    <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    <div><button id="btn09">返回#username的value属性值</button></div>
    <div><button id="btn10">设置#username的value属性值</button></div>
    <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

全选练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function (){
            //1.#checkedAllBtn
            /*
                全选按钮
                    -点击按钮以后,四个全部选中
             */
            //为id为checkedAllBtn的按钮绑定一个单击响应函数
            var checkedAllBtn=document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick=function (){
                //获取四个多选框items
                var items=document.getElementsByName("items");
                //遍历items
                for (var i=0;i<items.length;i++){
                    //设置四个多选框变为选中状态
                    //通过多选框的checked属性可以获取或设置多选框的选中状态

                    items[i].checked=true;
                }
                //设置四个多选框变为选中状态
                // alert(items.length);
            };
            //2.#checkedNoBtn
            /*
                全不选按钮
                    -点击按钮之后,四个多选框全部取消选中
             */
            //为id为checkedNoBtn的按钮绑定一个单击响应函数
            var checkedNoBtn=document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick=function () {
                //获取四个多选框items
                var items = document.getElementsByName("items");
                //遍历items
                for (var i = 0; i < items.length; i++) {
                    //通过多选框的checked属性可以获取或设置多选框的选中状态

                    items[i].checked = false;
                }
            }
            //3.#checkedRevBtn
            /*
                反选按钮
                    -点击按钮之后,选中的变为没选中,没选中的变为选中
             */
            //为id为checkedRevBtn的按钮绑定一个单击响应函数
            var checkedRevBtn=document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick=function () {
                //获取四个多选框items
                var items = document.getElementsByName("items");
                //遍历items
                for (var i = 0; i < items.length; i++) {
                    //通过多选框的checked属性可以获取或设置多选框的选中状态
                    // if (items[i].checked ) {
                    //     items[i].checked = false;
                    // }else{
                    //     items[i].checked = true;
                    // }
                    items[i].checked = !items[i].checked;
                }
            }
            //4.#sendBtn
            /*
                提交按钮
                    -点击按钮之后,将多有选中的多选框的value属性值弹出
             */
            //为id为sendBtn的按钮绑定一个单击响应函数
            var sendBtn=document.getElementById("sendBtn");
            sendBtn.onclick=function () {
                //获取四个多选框items
                var items = document.getElementsByName("items");
                //遍历items
                for (var i = 0; i < items.length; i++) {
                 //判断多选框是否选中
                    if(items[i].checked){
                        alert(items[i].value);
                    }

                }
            };

            //5.#checkedAllBox
            /*
             * 全选/全不选 多选框
             * 	- 当它选中时,其余的也选中,当它取消时其余的也取消
             *
             * 在事件的响应函数中,响应函数是给谁绑定的this就是谁
             */
            //为checkedAllBox绑定单击响应函数
            checkedAllBox.onclick = function(){

                //alert(this === checkedAllBox);
                var items = document.getElementsByName("items");
                //设置多选框的选中状态
                for(var i=0; i <items.length ; i++){
                    items[i].checked = this.checked;
                }

            };

            //6.items
            /*
             * 如果四个多选框全都选中,则checkedAllBox也应该选中
             * 如果四个多选框没都选中,则checkedAllBox也不应该选中
             */
            var items = document.getElementsByName("items");
            //为四个多选框分别绑定点击响应函数
            for(var i=0 ; i<items.length ; i++){
                items[i].onclick = function(){

                    //将checkedAllBox设置为选中状态
                    checkedAllBox.checked = true;

                    for(var j=0 ; j<items.length ; j++){
                        //判断四个多选框是否全选
                        //只要有一个没选中则就不是全选
                        if(!items[j].checked){
                            //一旦进入判断,则证明不是全选状态
                            //将checkedAllBox设置为没选中状态
                            checkedAllBox.checked = false;
                            //一旦进入判断,则已经得出结果,不用再继续执行循环
                            break;
                        }

                    }



                };
            }


        };

    </script>
</head>
<body>
<form method="post" action="">
    你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选

    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全 选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反 选" />
    <input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>

DOM查询的其他方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function (){
            //获取body标签
            //var body=document.getElementsByTagName("body")[0];
            /*
                在document中有一个属性body,它保存的是body的引用

             */
            var body=document.body;
            /*
                document.documentElement保存的是html标签
             */
            var html=document.documentElement;
            /*
                document.all代表的是页面中所有的元素
             */
            var all=document.all;
            // for (var i=0;i<all.length;i++){
            //     console.log(all[i]);
            // }
            // all=document.getElementsByTagName("*")
            // console.log(all);
            /*
                根据元素的class属性值查询一组元素节点对象
                getElementsByClassName可以根据class属性值获取一组元素节点对象
                但是该方法不支持ie8以下的浏览器
             */
            // var box1=document.getElementsByClassName("box1");
            // console.log(box1.length);

            // 获取页面中所有的div
            //var divs=document.getElementsByTagName("div");
            //获取class为box1中的所有的div
            //.box1 div
            /*
                document.querySelector()
                    -需要一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象
                    -虽然ie8中没有getElementsByClassName,但是可以使用querySelector代替
                    -使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
            */

            // var div=document.querySelector(".box1 div");
            // console.log(div.innerHTML);

            /*
                document.querySelectorAll()
                    -该方法和querySelector用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
                    -即使符合条件的元素只有一个,它也会返回数组
             */
            var box1=document.querySelectorAll("box1");
            console.log(box1);

        }
    </script>
</head>
<body>
    <div class="box1">
        <div>我是box1中的div</div>
    </div>
<div></div>
</body>
</html>

DOM增删改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        window.onload=function (){
            //创建一个“广州”节点,添加到#city下
            myClick("btn01",function (){
            //创建广州节点
                // 创建li节点
                /*
                    createElement
                        -可以用于创建一个元素节点对象
                        -它需要一个标签名作为参数,将会根据该标签名创建元素标签节点
                            并将创建的对象作为返回值返回

                 */
                var li=document.createElement("li");
                //创建广州文本节点
                /*
                   document.createTextNode
                        -可以用来创建一个文本节点对象
                        -需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回

                 */
                var gzText=document.createTextNode("广州");
                //将gzText设置li的子节点
                /*
                    appendChild()
                        -向一个父节点添加一个新的子节点
                        -用法:父节点。appendChild(子节点)
                 */
                li.appendChild(gzText);
                //获取id为city的节点
                var city=document.getElementById("city");
                //将广州添加到city下
                city.appendChild(li);
            })
            //将“广州”节点插入到#bj前面
            myClick("btn02",function (){
                //创建一个广州
                var li=document.createElement("li");
                var gzText=document.createTextNode("广州");
                li.appendChild(gzText);
                //获取id为bj的节点
                var bj=document.getElementById("bj");
                //获取city
                var city=document.getElementById("city");
                /*
                    insertBefore()
                        -可以在指定节点前插入新节点
                        -语法:
                            父节点.insertBefore(新节点,旧节点)
                 */
                city.insertBefore(li,bj);

            })
            //使用“广州”节点替换#bj节点
            myClick("btn03",function (){
                //创建一个广州
                var li=document.createElement("li");
                var gzText=document.createTextNode("广州");
                li.appendChild(gzText);
                //获取id为bj的节点
                var bj=document.getElementById("bj");
                //获取city
                var city=document.getElementById("city");
                /*replaceChild
                    -可以使指定的子节点替换已有的节点
                    -语法:父节点.replaceChild(新节点,旧节点);

                 */
                city.replaceChild(li,bj);
            })
            //删除#bj节点
            myClick("btn04",function (){
                //获取id为bj的节点
                var bj=document.getElementById("bj");
                //获取city
                var city=document.getElementById("city");
              /*
                removeChild
                    -删除一个子节点
                    -语法 :父节点.removeChild(子节点);
               */
                city.removeChild(bj);
            })

            //读取#city的HTML代码
            myClick("btn05",function (){
                //获取city
                var city=document.getElementById("city");
                alert(city.innerHTML);
            })
            //设置#bj内的HTML代码
            myClick("btn06",function (){
                //获取id为bj的节点
                var bj=document.getElementById("bj");
                bj.innerHTML="昌平";
            })
            myClick("btn07",function (){
                //向city中添加广州
                var city=document.getElementById("city");
                /*
                    使用innerHTML也能完成增删改的一些操作
                    一般我们会两种方式结合使用
                 */
                //city.innerHTML+="<li>广州</li>";
                //创建一个li
                var li=document.createElement("li");
                //向li中设置文本
                li.innerHTML="广州";
                //将li添加到city中
                city.appendChild(li);

            })
        }
        function myClick(idStr,fun){
            var btn=document.getElementById(idStr);
            btn.onclick=fun;
        }
    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

    </div>
</div>
<div id="btnList">
    <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
    <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
    <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
    <div><button id="btn04">删除#bj节点</button></div>
    <div><button id="btn05">读取#city内的HTML代码</button></div>
    <div><button id="btn06">设置#bj内的HTML代码</button></div>
    <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>

操作的内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1{
            width:200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload=function (){
            /*
                点击按钮之后修改box1大小
             */
         //获取box1
         var box1=document.getElementById("box1");
         //为按钮绑定单击响应函数
            var btn01=document.getElementById("btn01");
             btn01.onclick=function (){
                //修改box1的宽度
                /*
                    通过JS修改元素的样式
                        语法:元素.style.样式名=样式值
                    注意:如果CSS的样式名中含有-,这种名称在JS中是不合法的
                        需要将background-color这种样式名去掉减号,把-后的字母大写

                    我们通过style属性设置的样式都是内联样式
                        而内联样式具有较高的优先级,所以通过JS修改的样式往往会立即显示

                    但是如果在样式中写了!important,则此时样式会有最高的优先级
                        即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效
                            所以尽量不要为样式添加!important





                 */
                box1.style.width="300px";
                box1.style.height="300px";
            }
            //点击按钮2以后,读取该元素的样式
            var btn01=document.getElementById("btn01");
            btn02.onclick=function (){
                //读取box1的样式
                //语法:元素.style.样式名
                //通过style属性设置和读取的都是内联样式
                alert(box1.style.width);
            }
        }
    </script>
</head>
<body>
<button id="btn01">
    点我一下
</button>
<button id="btn02">
    点我一下2
</button>
<div id="box1"></div>
</body>
</html>

读取当前样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1{
            width:200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        window.onload=function (){
            //点击按钮以后读取box1的样式
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            btn01.onclick=function (){
               //读取box1的宽度
               //alert(box1.style.width);
               /*
                    获取元素当前显示的样式
                        语法:元素.currentStyle.样式名
                    它可以用来读取当前元素正在显示的样式,
                        如果当前没有设置样式,则获取默认值
                        currentStyle只有ie浏览器支持
                */
                //alert(box1.currentStyle.width);
                /*
                    在其他浏览器可以使用getComputedStyle来获取当前元素的样式
                        这个方法时window的方法,可以直接使用
                    需要两个参数:第一个:要获取样式的元素
                               第二个:可以传递一个元素,一般都传null

                    该方法会返回一个对象,对象中封装了当前元素对应的样式
                        可以通过对象.样式名来读取样式
                       如果获取的样式没有设置,则会获取到真实的值,而不是默认值
                       比如没有设置width,它不会获取auto,而是一个长度

                    通过getComputedStyle和currentStyle读取的样式都是只读的,不能修改
                        如果修改必须通过style属性
                 */

               // alert(getComputedStyle(box1,null).width);
        var w = getStyle(box1,"width");
        alert(w);


        };

        };

        /*
         * 定义一个函数,用来获取指定元素的当前的样式
         * 参数:
         * 		obj 要获取样式的元素
         * 		name 要获取的样式名
         */

        function getStyle(obj , name){

            if(window.getComputedStyle){
                //正常浏览器的方式,具有getComputedStyle()方法
                return getComputedStyle(obj , null)[name];
            }else{
                //IE8的方式,没有getComputedStyle()方法
                return obj.currentStyle[name];
            }

            //return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];

        }

    </script>
</head>
<body>
<button id="btn01">点我一下</button>
<br><br>
<div id="box1"></div>
</body>
</html>

其他样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1{
            width:200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        window.onload=function () {

            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                /*
                    clientWidth
                    clientHeight
                        -这两个属性可以获取元素的可见宽度和高度
                        -这些属性都是不带px的,返回都是一个数字,可以直接进行计算
                        -会获取元素高度和宽度,包括内边距和内容区
                        -这些属性都是只读的,不能修改
                 */
                /*
                    offsetWidth
                    offsetHeight
                        -获取元素的整个高度和宽度,包括内容区和内边距和边框

                    offsetParent
                        -可以用来获取当前元素的定位父元素
                        -它会获取到离当前元素最近的开启了定位的祖先元素
                            如果所有的祖先元素都没有开启定位,则返回body

                    offsetLeft
                        -当前元素相对于其定位父元素的水平偏移量
                    offsetTop
                        -当前元素相对于其定位父元素的垂直偏移量
                 */
                /*
                    scrollWidth
                    scrollHeight
                        -可以获取元素的整个滚动区域的宽度和高度

                    scrollLeft
                        -可以获取水平滚动条滚动的距离

                    scrollTop
                        -可以获取垂直滚动条滚动的距离
                 */
                /*
                    当满足scrollHeight-scrollTop=clientHeight
                        证明垂直滚动条滚到底了
                        当垂直滚动条滚到底时,使表单项可用
                            onscroll,该事件会在元素的滚动条滚动时触发
                    当满足scrollWidth-scrollLeft=clientWidth
                        证明水平滚动条滚到底了
                 */

            }
        }
    </script>
</head>
<body>
<button id="btn01">点我一下</button>
<br>
<div id="box1"></div>
</body>
</html>

滚动条练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        #info{
            width: 300px;
            height: 500px;
            background-color: #bfa;
            overflow: auto;
        }

    </style>
    <script type="text/javascript">
        window.onload = function(){

            /*
             * 当垂直滚动条滚动到底时使表单项可用
             * onscroll
             * 	- 该事件会在元素的滚动条滚动时触发
             */

            //获取id为info的p元素
            var info = document.getElementById("info");
            //获取两个表单项
            var inputs = document.getElementsByTagName("input");
            //为info绑定一个滚动条滚动的事件
            info.onscroll = function(){

                //检查垂直滚动条是否滚动到底
                if(info.scrollHeight - info.scrollTop == info.clientHeight){
                    //滚动条滚动到底,使表单项可用
                    /*
                     * disabled属性可以设置一个元素是否禁用,
                     * 	如果设置为true,则元素禁用
                     * 	如果设置为false,则元素可用
                     */
                    inputs[0].disabled = false;
                    inputs[1].disabled = false;
                }

            };

        };


    </script>
</head>
<body>
<h3>欢迎亲爱的用户注册</h3>
<p id="info">
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
    亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
</p>
<!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
<input type="checkbox" disabled="disabled" />我已仔细阅读协议,一定遵守
<input type="submit" value="注册" disabled="disabled" />
</body>
</html>

Q.E.D.