js获取元素属性及事件

沐沐185

已于 2022-12-07 15:53:30 修改

阅读量2.9k

点赞数 1

分类专栏： JS 文章标签： javascript

于 2022-06-29 20:11:28 首次发布

本文链接：https://blog.csdn.net/weixin_67642008/article/details/125528302

版权

JS 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

一、HTML中元素属性

1.offsetLeft ：返回当前元素左边界到它上级元素的左边界的距离，只读属性；

注意：获取的是（ left 值 + 本身margin的值）

2.offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性；

获取的是（top值 + 本身margin的值）

3.offsetHeight 返回元素的高度

注意：元素的高度 = 本身高度Height + padding值*2 + border值*2

4.offsetWidth 返回元素的宽度

注意：元素的宽度 = 本身宽度Width + padding值*2 + border值*2

5.offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用

有position的话就找到他的父级定位,返回他的父级,如果没有就返回body,以浏览器窗口为定位,

当元素是固定定位fixed 时，element.offsetParent 返回值是null;

6.clientWidth 返回元素的可见宽度属性本身的宽度+padding,与 offsetWidth区别在于clientWidth 不包含border值

7.clientHeight 返回元素的可见高度属性本身的高度+padding,与 offsetHeight区别在于clientHeight不包含border值

<script>
        //offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，是只读属性
        var osl = document.querySelector(".son");
        console.log(osl.offsetLeft); //-->155px= left:150px + .son.margin:5px
        //offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
        console.log(osl.offsetTop); //-->105px = top:100px + .son.margin:5px
        //offsetWidth 返回元素的宽度 = width + border + padding (注意：不包括margin)
        console.log(osl.offsetWidth); //-->210px = width:200px + (padding:3px)*2 +         
        (border:2px)*2
        //offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
        //当子盒子是固定定位时，返回null因为子盒子不相对偏移
        console.log(osl.offsetParent); //返回父盒子 .father

        //clientWidth	返回元素的可见宽度(不包括border 和 margin)
        console.log(osl.clientWidth); //--->206px = width:200px + (padding:3px)*2
        //clientHeight	返回元素的可见高度
 </script>

二、滚动条属性

1.scrollTop 返回匹配元素的滚动条的垂直位置

2.scrollLeft 返回匹配元素的滚动条的水平位置

元素属性应用

标准浏览器(谷歌 / IE9以上浏览器)语法：

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

低版本IE浏览器使用语法：

document.body.scrollTop;

document.body.scrollLeft;

兼容写法如下：

var topSize=document.documentElement.scrollTop || document.body.scrollTop;

3.滚动事件： window.onscroll = function () {};

 <script>
        var son = document.querySelector(".son");
        var father = document.querySelector(".father");
        //注意：window.getComputedStyle(son, null).top 返回的是xxpx字符串类型
        //用parseInt()转换为数字型
        var topSize = parseInt(window.getComputedStyle(son, null).top);
        var leftSize = parseInt(window.getComputedStyle(son, null).left);
        console.log(topSize);
        window.onscroll = function () {
            var topScorll1 = document.documentElement.scrollTop;
            var leftScorll1 = document.documentElement.scrollLeft;
            son.style.top = topSize + topScorll1 + "px";
            son.style.left = leftSize + leftScorll1 + "px";
            console.log(topScorll1);
        }
</script>

三、类名样式操作方法

第一种:className类名样式操作

可以修改元素的样式,适合样式较多的元素类名属性,会覆盖以前的类名

如果想保留两个类名,就直接写两个类名

第一种:classList.add()追加样式,这种方法就解决了单独加样式会覆盖的问题,推荐使用

classList.remove()删除样式

classList.replace()替换样式,两个值,第一个是找到已存在要替换的样式,第二个是替换的样式

<style>
        .p {
            width: 200px;
            height: 200px;
            background: #ccc;
            border: 2px solid red;
            border-radius: 3px;
            font-size: 18px;
            color: red
        }

        .col {
            background-color: pink;
            font-size: 25px;
            font-weight: 700;
        }

        .bh {
            color: green;
        }
    </style>
</head>

<body>
    <!-- 修改/添加类名的方式 -->
    <div class="p" style="color: pink;">123</div>
    <script>
        var div = document.querySelector("div");
        // //1.修改className 需要添加类名，不可覆盖
        // div.className = "p col"
        //2.追加类名的方式；.classList.add("类名")
        div.classList.add("p");
        div.classList.add("col");
        div.classList.add("bh");
        div.classList.remove("bh");
        // console.log(div.classList);
        //获取样式
        //1.使用行内样式的时候
        console.log(div.style.color); //--->pink
        //2.使用内部样式，或者外部样式时 采用   getComputedStyle(元素, null)."需要获取的样式属性"
        // var cols = document.defaultView.getComputedStyle(div, null).color;
        // console.log(cols);

        //或者直接调用
        var col = getComputedStyle(div, null).color;
        console.log(col);
        //兼容性问题,ie8以下不兼容 getComputedStyle(元素, null)方法
        //ie8 以下使用 元素.currentStyle属性
    </script>
</body>

四、鼠标事件

1.onclick 当用户单击某个对象时调用事件

2.onmouseover 鼠标移到某元素之上

3.onmouseout 鼠标从某元素移开

4.onmousedown 鼠标按钮被

5.onmouseup 鼠标按钮抬起事件

<body>
    <div onmouseover="over()" onmouseout="out()">123</div>
    <script>
        var div = document.querySelector("div");
        //鼠标经事件
        div.onmouseover = function () {
            div.style.background = "pink";
        }
        div.onmouseout = function () {
            div.style.background = "green";
        }
        div.onmousedown = function () {
            div.innerHTML = "你开始点我啦"
        }
        div.onmouseup = function () {
            div.innerHTML = "你点完啦"
        }
        //也可以在行内写事件调用函数；
        function over() {
            div.style.background = "pink";
        }
    </script>
</body>