JS -a标签和this在DOM的使用、使用DOM完成点击按钮操作div块和获取div块的CSS样式

a标签的索引问题和this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()
    {
        //点击超链接以后，删除点击的员工的信息
        //获取所有的超链接
        var allA=document.getElementsByTagName("a");
        //为每一个超链接绑定一个单机响应函数
        for(var i=0;i<allA.length;i++)
        {
            alert("for循环正在执行"+i);

            allA[i].onclick=function()
            {
                alert("响应函数正在执行"+i)
                //此处this不能换为allA[i]
                //for循环会在页面加载完成后立即执行
                //而响应函数会在超链接被点击时才执行，也就是for循环先于函数执行
                //当响应函数执行时。for循环早已执行完毕
                //即i的值最终会变成3，所以allA[i]中的i最终得到的只会是3
                //可通过数据执行来验证

                //首先得到tr，也就是a的父节点的父节点
                var tr = this.parentNode.parentNode;
                //var name=tr.getElementsByTagName("td")[0].innerHTML;
                var name=tr.children[0].innerHTML;
                console.log(tr);
                console.log(name);
                //在删除之前设置弹出一个弹框
                var flag=confirm("确认删除"+name+"吗？");
                if(flag == true)
                {
                    //删除tr
                    tr.parentNode.removeChild(tr);
                }
                //此处可以使用this来进行操作
                //点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
                //但我们此时不允许出现此默认行为,可以通过在响应函数的最后return false来取消默认行为
                return false;
            };
        }
    };
    </script>
</head>
<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="javascript:;">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

使用DOM完成点击按钮操作div块和获取div块的CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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绑定单击响应函数
        btn01.onclick=function()
        {
            //修改box1的宽度
            //通过JS修改元素的央视
            //语法 元素.style.样式名=样式值
            //如果css的样式名中含有-，这种名称在JS中是不合法的
            //修改方法是去掉-，并且后面的第一个字母大写
            box1.style.width="300px";//修改宽度
            box1.style.height="300px";//修改高度
            box1.style.backgroundColor="yellow";

            //通过style属性设置的样式都是内联样式
            //内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
            //如果在样式中写了!important，这此时样式会有最高的优先级
            //即使通过JS也不能覆盖样式，此时将会导致JS修改样式失败

        };

        //点击按钮二以后，读取元素的样式
        var btn02=document.getElementById("btn02");
        btn02.onclick=function()
        {
            console.log(box1.style.width);
            console.log(box1.style.height);
            console.log(box1.style.backgroundColor);
            //通过style属性设置和读取的都是内联样式
            //无法读取样式表中的样式
            //所以需要先点击摁钮一，然后才能顺利读取
        }
    }
    </script>
</head>
<body>
    <button id="btn01">按钮一</button>
    <button id="btn02">按钮二</button>
    <br><br>
    <div id="box1"></div>
</body>
</html>

使用DOM读取元素的CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #box1
    {
        width:100px;
        height:100px;
        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的宽度,样式表里的样式
            //获取元素的当前显示的样式
            //语法 元素.currentStyle.样式名
            //他可以用来读取当前元素正在显示的样式
            //alert(box1.currentStyle.height);
            //此方法适用的浏览器很少，但是IE适用

            //在其他浏览器中可以使用
            //getComputedStyle()这个方法来获取元素当前的样式
            //这个方法是window的方法，可以直接使用
            //需要两个参数，第一个是获取样式的元素，第二个可以传递一个伪元素，比如null
            //如果获取的样式没有设置值，则获取到的是真实的值（会随着浏览器实际大小变化），而不是默认值
            //比如没有设置width，那么获取到的不是auto，而是一个真实的像素值
            /**
            var box10bj=getComputedStyle(box1,null);
            console.log(box10bj.width);
            console.log(box10bj.height);
            console.log(box10bj.backgroundColor);
            **/

            console.log(getStyle(box1,"height"));
            console.log(getStyle(box1,"width"));
            console.log(getStyle(box1,"backgroundColor"));
        };

        
    };
    //定义一个函数，用来获取指定元素的当前的样式
    //所需参数：
    //obj 要获取样式的元素
    //name 要获取的样式名
    function getStyle(obj,name)
    {
        if(window.getComputedStyle)
        //在全局作用域中找此方法时，此方法就是个属性，如果找寻不到，系统不会报错
        {
            //正常浏览器的方式，具有getComputedStyle()方法
            return getComputedStyle(obj,null)[name];//用中括号来声明name是个变量
        }
        else
        {
            //IE8的方式中，没有getComputedStyle()方法
            //也可以用obj.currentStyle()
            return obj.currentStyle[name];//这是IE8的方式
        }    
    };

    //通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改
    //如果需要修改必须通过style属性
    </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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #box1
    {
        width: 100px;
        height: 100px;
        background-color:red;
        padding: 10px;
        border:10px solid yellow;
        /*margin: auto;*/
    }
    #box2
    {
        padding:100px;
        background-color: #bfa;
    }
    #box4
    {
        width: 200px;
        height: 300px;
        background-color: #bfa;
        overflow: auto;
        /*在内部box5的大小溢出的情况下，把overflow设置为hidden，那么就可以制止内部像素的超出*/
        /*如果设置为auto，那么就可以呈现滚动条。如果宽度和高度都超出，那么两个边界都会出现滚动条*/
    }
    #box5
    {
        width: 400px;
        height: 600px;/*如果把高度像素值设置的比外部box4大，那么就会超出*/
        background-color: yellow;
    }
    </style>
    <script type="text/javascript">
    window.onload=function()
    {
        var box1=document.getElementById("box1");
        var btn01=document.getElementById("btn01");
        var box3=document.getElementById("box3");
        var box4=document.getElementById("box4");
        btn01.onclick=function()
        {
            //clientWidth
            //clientHeight
            //这两个属性可以获取元素的可见宽度和高度，不包括边框
            //这些属性都是不带px的，都是数值，可以直接进行计算
            //这些属性都是只读的，不能进行修改
            console.log(box1.clientWidth);
            console.log(box1.clientHeight);
            //返回的都是实际宽度和高度

            //offsetWidth
            //offsetHeight
            //可以获取,包括内容区，内边距和边框
            console.log(box1.offsetHeight);
            console.log(box1.offsetWidth);

            //offsetParent
            //可以用来获取当前元素的定位父元素
            //会获取离当前元素最近的开启了定位的祖先元素(即position的值不是static)
            //如果所有的祖先元素都没有开启定位，则默认返回body
            var op=box1.offsetParent;
            console.log(op);
            console.log(op.id);

            //offsetLeft
            //当前元素相对于其定位元素的水平偏移量
            //offsetTop
            //当前元素相对于其定位父元素的垂直偏移量
            //offsetTop用法与上面的类似
            console.log(box1.offsetLeft);
            //console.log(box3.offsetLeft);

            //scrollWidth
            //scrollHeight
            //可以获取整个滚动区域的高度和宽度,不同于clientHeight只能获取可见的那一块区域的像素大小
            console.log(box4.clientHeight);//控制台输出300px，也就是设定的300px(可见)
            console.log(box4.scrollHeight);//控制台输出600px，也就是可见的滚动区域的600px

            //scrollLeft可以获取水平滚动条滚动的距离
            //scrollTop可以获取垂直滚动条滚动的距离
            console.log(box4.scrollLeft);
            console.log(box4.scrollTop);

            //当满足scrollHeight - scrollTop == clientHeight
            //说明垂直滚动条滚到底了
            console.log(box4.clientHeight);
            alert(box4.scrollHeight - box4.scrollTop);

            //当满足scrollWidth - scrollLeft ==clientWidth(部分)
            //说明水平滚动条滚动到底了
            console.log(box4.clientWidth);
            alert(box4.scrollWidth - box4.scrollLeft);
            //部分浏览器可能会出现相减的值小于的情况

            
        };
    };
    </script>
</head>
<body id="ls">
    <button id="btn01">功能一</button>
    <br><br>
    <div id="box4">
        <div id="box5"></div>
    </div>
    <br><br>
    <div id="box2" style="position: relative;">
        <div id="box1"></div>
    </div>
    </div>
</body>
</html>