js基础4 使用dom操作/getStyle/scrollHeight/协议滚动禁用例子/div随鼠标移动/冒泡/事件的委派/事件的绑定

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/123671886

使用dom操作

<!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>使用dom操作css</title>
    <script type="text/javascript">
        window.onload=function(){
            /*点击按钮，修改box1的大小*/
            //获取box1
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            btn01.onclick=function(){
                /*通过js修改元素的样式
                元素。style.样式名=样式值
                        注意：如果样式名中有-，是不合法的，
                        去掉-，把-后的第一个字母大写
                        驼峰大写
                通过style属性设置的样式都是内联样式 
                而内联样式有较高的优先级，所以通过js修改的样式往往都立即显示
                在样式中 写了！important，最高优先级，会使修改的样式失效
                */
               box1.style.width="300px";
               box1.style.backgroundColor="yellow" ;
            }

            var btn02=document.getElementById("btn02");
            btn02.onclick=function(){
                 /*通过js修改元素的样式
                    方法:元素。style.样式名
                通过style属性读取和设置的都是内联样式
                无法读取样式表中的样式
                */
              alert(box1.style.height);
            }
        }
    </script>
</head>

<style>
    #box1{
        width: 200px;
        height: 200px;
        background-color: #bfa !important;
    }
</style>
<body>
    <button id="btn01">点我一下</button>
    <button id="btn02">读取样式</button>
    <div id="box1"></div>
</body>
</html>

getStyle方法

<!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 () {
            /*点击按钮以后，读取box1中的样式*/
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                /*获取元素当前显示的样式
                语法： 元素.currentStyle.样式名(只在IE9+中支持)
                alert(box1.currentStyle.width);
               alert(box1.currentStyle.backgroundColor);

               在其他浏览器中，我们可以使用getComputedStyle（）获取当前样式
                    这是window的方法，可以直接使用(不兼容IE8)
                    参数：1.要获取样式的元素 2.可以传递一个伪元素，一般传null
                    如果获取的值没有设置，会获取屏幕真实值（1520px），而不是auto（上一个方法）
                            var obj=getComputedStyle(box1,null);
                            alert(obj.width);
                以上两种方法都是只读的，只能通过style更改
                */


                /*自行定义函数，获取现在的样式
                变量用【】声明
                */

                function getStyle(obj, name) {
                    if (window.getComputedStyle) {

                        //正常浏览器
                        return getComputedStyle(obj, null)[name];
                    }
/*因为本来是想把name作为一个参数使用，name是一个变量，因此.name这种形式只会在getComputedStyle(obj , null）生成的对象中创建一个为name的属性，并不是作为传递进去的实参读取属性。只有[]这种形式既可以使用字符串也可以变量或表达式创建属性或者读取属性。*/
                    else {//IE8的方式
                        return obj.currentStyle[name];

                    }

                }

                alert(getStyle(box1, "width"));

            }

        }
    </script>
</head>

<style>
    #box1 {
        /* width: 
        100px; */
        height: 100px;
        background-color: #bfa;
    }
</style>


<body>
    <button id="btn01">点我一下</button>
    <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>其他样式的相关属性</title>
    <script type="text/javascript">
        window.onload = function () {
            var btn01 = document.getElementById("btn01");
            var box1 = document.getElementById("box1");
            btn01.onclick = function () {
                /*
                clientHeight clientWidth返回可见框的宽度
                    这些属性的返回值都是不带px的，返回的数字
                    获取宽度高度，包括内容区和内边距（padding）
                这些属性都是只读的，不能修改
                    alert(box1.clientHeight);
                */

                /*
                    offsetWidth，offsetHeight 
               获取元素的整个宽度和高度，包括内容区内边距和边框
                    alert(box1.offsetHeight);
                */
                /*   offsetParent 可以获取当前元素的定位父元素
                它会获取到离当前元素最近的 开启了定位的 祖先元素 
                如果所有的祖先元素都没有开启定位，返回body
                        var op = box1.offsetParent;
                        alert(op.id);
                */
                /*
                offsetLeft offsetTop当前元素相对于定位父元素的水平 垂直偏移量
                (现在定位父元素是box2,所以值是0)
                alert(box1.offsetLeft);
                */

                /*scrollHeight 可以获取元素滚动区域的高度
                  scrollWidth 滚动区域的宽度
                  scrollLeft 获取水平滚动条移动的距离
                  scrollTop  获取垂直滚动条滚动的距离
                        alert(box4.scrollHeight)

                当满足scrollHeight-scrollTop=clientHeight
                证明垂直滚动条滚到底了
                */
               




            }
        }
    </script>
</head>
<style>
    #box1 {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        padding: 10px;
        border: 10px solid yellow;
    }

    #box4 {
        width: 200px;
        height: 300px;
        background-color: antiquewhite;
        /*溢出了，所以给这个地方设置hidden或者auto*/
        overflow: scroll;
    }

    #box5 {
        width: 150px;
        height: 350px;
        background-color: aquamarine;

    }
</style>

<body>
    <button id="btn01">我是一个按钮</button>
    <div id="box3" style="position: relative;">
        <div id="box2" style="position: relative;">
            <div id="box1"></div>
        </div>
    </div>

    <div id="box4">
        <div id="box5"></div>
    </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>
    <script type="text/javascript">

        window.onload=function(){
            /* 当垂直滚动条滚动到底时，表单项可以用
            onscroll 该事件会在元素的滚动条滚动时触发
            滚动条是p标签的，所以绑定给p标签

            */
        
           var info=document.getElementById("info");
           var input=document.getElementsByTagName("input");
           info.onscroll=function(){
            //    alert("我开始滚动了");
            //滚动条滚动的时候，我们检查是否滚动到底了
            if(info.scrollHeight-info.scrollTop==info.clientHeight){
                /* alert("我已经到底了!");
                   disabled属性设置元素是否禁用
                        false设置不禁用
                        true设置禁用
                */
                input[0].disabled=false;
                input[1].disabled=false;
            }
            
           }

        }
    </script>
</head>

<style>
#info{
    width: 300px;
    height: 500px;
    background-color: #bfa;
    overflow: auto;
}
</style>
<body>
    <h3>欢迎亲爱的用户注册</h3>
    <p id="info">

        亲爱的用户，请仔细阅读以下协议，如果不阅读，不要注册。
        编曲：钟宗豪 / Jiano冼嘉宁

        现在的你

        还做着儿时的梦吗

        摘一颗最亮的星回家

        时间像沙

        不觉中慢慢的长大

        懂得除了童话还有伤疤

        孩子啊别怕

        天黑我们去看烟花

        勇气有多大

        喜欢自己其实并不复杂

        你不要在意

        生命里无解的问题

        去相信

        乌云渐渐散尽会出现奇迹

        翻过山顶

        遇见更多彩的风景

        无所畏

        世界并不完美

        有你会更美

        渺小的你

        是否在意别人想法

        为何低下头不肯说话

        不想孤单

        周围却热闹得可怕

        分辨不出眼神真实虚假

        孩子啊别怕

        天黑我们去看烟花

        勇气有多大

        喜欢自己其实并不复杂

        你不要在意

        生命里无解的问题

        去相信

        乌云渐渐散尽会出现奇迹

        翻过山顶

        遇见更多彩的风景

        无所畏

        世界并不完美

        有你更美

        不要在意

        生命里无解的问题

        去相信

        乌云渐渐散尽出现奇迹

        翻过山顶

        遇见更多彩的风景

        无所畏

        世界并不完美

        有你会更美

        现在的你

        还做着儿时的梦吗

        music.163.com
        不完美的她英文插曲叫什么 不完美的她英文歌曲名字及歌词 ...

        2022年1月31日 不完美的她预告中英文歌曲也太好听了吧?很多网友都在求不完美的她英文插曲,如果你不知道不完美的她英文歌曲资源的话,可以看看本站提供的不完美的她英文插曲叫什么,希望你们会喜欢。 ...
        www.tuke8.com/article/8f476452...
        
        百度快
        编曲：钟宗豪 / Jiano冼嘉宁

        现在的你

        还做着儿时的梦吗

        摘一颗最亮的星回家

        时间像沙

        不觉中慢慢的长大

        懂得除了童话还有伤疤

        孩子啊别怕

        天黑我们去看烟花

        勇气有多大

        喜欢自己其实并不复杂

        你不要在意

        生命里无解的问题

        去相信

        乌云渐渐散尽会出现奇迹

        翻过山顶

        遇见更多彩的风景

        无所畏

        世界并不完美

        有你会更美

        渺小的你

        是否在意别人想法

        为何低下头不肯说话

        不想孤单

        周围却热闹得可怕

        分辨不出眼神真实虚假

        孩子啊别怕

        天黑我们去看烟花

        勇气有多大

        喜欢自己其实并不复杂

        你不要在意

        生命里无解的问题

        去相信

        乌云渐渐散尽会出现奇迹

        翻过山顶

        遇见更多彩的风景

        无所畏

        世界并不完美

        有你更美

        不要在意

        生命里无解的问题

        去相信

        乌云渐渐散尽出现奇迹

        翻过山顶

        遇见更多彩的风景

        无所畏

        世界并不完美

        有你会更美

        现在的你

        还做着儿时的梦吗

        music.163.com
        不完美的她英文插曲叫什么 不完美的她英文歌曲名字及歌词 ...

        2022年1月31日 不完美的她预告中英文歌曲也太好听了吧?很多网友都在求不完美的她英文插曲,如果你不知道不完美的她英文歌曲资源的话,可以看看本站提供的不完美的她英文插曲叫什么,希望你们会喜欢。 ...
        www.tuke8.com/article/8f476452...
        
        百度快
    </p>
<!-- 如果为表单项添加disabled属性，那么表单项将会编程不可用的状态 -->
    <input type="checkbox" disabled="disabled">我已经仔细阅读协议，一定遵守
    <input type="submit" value="注册" id=""disabled="disabled">
</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>
    <script type="text/javascript">

        window.onload = function () {
            var areadiv = document.getElementById("areadiv");
            var showmsg = document.getElementById("showmsg");
            /*onmousemove该事件会在鼠标在元素中移动是被触发
            */
        
                /*
                    在IE8中，响应函数被触发时，浏览器不会传递事件对象
                    在IE8以及以下的浏览器中，是将事件对象作为window对象的属性保存的
                */
                /* 
                     --事件对象
                     当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
                            在事件对象中，封装了当前事件相关的一切信息，比如 鼠标的坐标 键盘的哪个按键 鼠标滚轮的方向
                            var x = window.event.clientX;//ie支持的(event不存在，所以要加上window)
                            var x =event.clientX;//火狐支持的
                     在showmsg中显示坐标

                     clientX clientY获取鼠标的水平垂直坐标
             */
                areadiv.onmousemove = function (event) {
                    // if(!event){//如果event不存在
                    //     event=window.event;
                    // }
                    //这样写也行
                    event=event||Window.event;

                   
                    var x = event.clientX;
                    var y = event.clientY;
                    showmsg.innerHTML = "x:" + x + ", y:" + y;
                }
            
        }
    </script>

</head>
<style>
    #areadiv {
        width: 200px;
        height: 100px;
        border: 5px solid black;
    }

    #showmsg {
        width: 200px;
        height: 100px;
        border: 2px solid black;
    }
</style>

<body>
    <div id="areadiv"></div>
    <div id="showmsg"></div>
</body>

</html>

请添加图片描述

clientX、offsetX、screenX、pageX的区别

链接

div随鼠标移动

<!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 () {
            /*希望div随着鼠标的移动而移动*/
            //获取box1
            var box1 = document.getElementById("box1");
            document.onmousemove = function (event) {
                /*获取鼠标坐标，从而改变div位置
                    clientX,clientY获取鼠标在窗口的大小
                    pageX pageY相对于当前页面的坐标（IE8不支持）

                */
                //解决兼容问题
                event = event || window.event;

                /*获取滚动条滚动的距离
                        兼容性可以这样写，
                        var st=document.body.scrollTop||document.documentElement.scrollTop;
                        var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
                */
                var st = document.documentElement.scrollTop;
                var sl = document.documentElement.scrollLeft;
                var x = event.clientX;
                var y = event.clientY;
                //设置div的偏移量
                box1.style.left = x + sl + "px";
                box1.style.top = y + st + "px";
            }
        }
    </script>
</head>
<style>
    #box1 {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        /*要是向设置left top之类的位置，要设置位置*/
        position: relative;
    }
</style>

<body>
    <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>冒泡</title>
    <script type="text/javascript">

        window.onload = function () {

            /*事件的冒泡
            所谓的冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
            如果不希望发生事件冒泡可以通过事件对象来取消冒泡
            */


            //为s1绑定一个单击响应函数
            var s1 = document.getElementById("s1");
            s1.onclick = function () {
                alert("span");
                //取消冒泡
                event.cancelBubble = true;
            }

            //为box1绑定一个单击响应函数
            var box1 = document.getElementById("box1");
            box1.onclick = function () {
                alert("div");
            }

            //为body绑定一个单击响应函数

            document.body.onclick = function () {
                alert("body");
            }



        }
    </script>
</head>
<style>
    #box1 {
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
    }

    span {
        background-color: aquamarine;
    }
</style>

<body>
    <div id="box1">
        我是box1
        <span id="s1">我是div中的span</span>
    </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>事件的委派</title>
    <script type="text/javascript">
        window.onload = function () {


            var btn01 = document.getElementById("btn01");
            var ul = document.getElementById("u1");
            btn01.onclick = function () {

                var li = document.createElement("li");
                li.innerHTML = "<a href='javascript:; 'class='link'>新建的超链接</a>";
                u1.appendChild(li);
            }
            /*为每一个超链接都绑定一个点击响应函数
                       获取所有的a
          
                        var allA=document.getElementsByTagName("a");
                      for(var i=0;i<allA.length;i++){
                          allA[i].οnclick=function(){
                              alert("我是a的单击响应函数!");
                          }
                         
                      }
          
          
                //为每一个超链接都绑定一个单击响应函数比较麻烦
                而且只能为已有的设置，无法为新添加的超链接有事件
            
                    我们希望只绑定一次事件，就可以应用到元素上，即使元素是后添加的
                    
            事件的委派
                    我们可以尝试将属性绑定给元素的共同的父元素ul，
                    当后代元素上的事件被触发时，会一直冒泡到祖先元素
                通过委派，可以减少事件绑定的次数，
                 */
            ul.onclick = function (event) {

                /*如果触发事件的对象是我们期望的，就执行，否则不执行
                alert("我的");
                        事件给谁绑定的，谁就是this
                        event事件的target表示的是触发事件的对象
                */
                //解决兼容性
                event = event || window.event;
                // alert(event.target);
                if(event.target.className=="link"){
                    alert("我的");
                }


            }


        }
    </script>
</head>

<style>
    #u1 {
        background-color: antiquewhite;
    }
</style>

<body>

    <button id="btn01">我是超链接</button>

    <ul id="u1">

        <li><a href="javascript:;" class="link">超链接1</a></li>
        <li><a href="javascript:;" class="link">超链接2</a></li>
        <li><a href="javascript:;" class="link">超链接3</a></li>
    </ul>
</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>事件的绑定</title>
	<script type="text/javascript">
		window.onload = function () {
			var btn01 = document.getElementById("btn01");
			/*为btn01绑定多个单击响应函数，只有最后一个会生效
			btn01.οnclick=function(){	
			}
	
			addEventListener 通过这个方法可以同时绑定多个响应函数
				当事件被触发时，会按照绑定顺序执行
				1.事件的字符串 不要on
				2.回调函数，当事件触发时，该函数会被调用
				3.是否在捕获阶段触发事件，需要Boolean值，一般为false
				不支持IE8和↓
							btn01.addEventListener("click",function(){
							alert("1");
						},false);
						btn01.addEventListener("click",function(){
							alert("2");
						},false);

			attachEvent()在IE8支持，
				参数:
				1.事件的字符串，要on
				2.回调函数
								btn01.attachEvent("onclick", function () {
							alert("1");
						});

			*/

			/*定义函数，用来为指定元素绑定响应函数
			参数： obj要绑定事件的对象
				   eventStr事件的字符串（不要on，需要的时候手动加上）
				   callback回调函数

			addEventListener()中的this，是绑定事件的对象
			attachEvent（）中的this，是window
			需要统一两个方法的this
				
			*/

			bind(btn01, "click", function () {
				alert("1");
			});
			bind(btn01, "click", function () {
				alert("2");
			});

			function bind(obj, eventStr, callback) {
				if (addEventListener) {
					//大部分浏览器兼容
					obj.addEventListener(eventStr, callback, false);
				}
				/*this是谁由调用方式决定
				callbacj.call(obj); call方法，第79集
				*/
				else {
					//ie8和以下
					obj.attachEvent("on" + eventStr, function () {

						//在匿名函数里调用回调函数
						callback.call(obj);
					});
				}
			}


		}
	</script>
</head>

<body>
	<button id="btn01">我是按钮</button>
</body>

</html>