zoukankan      html  css  js  c++  java
  • 【javascript】DOM操作方法(6)——Element节点的方法

    (1)位置方法

    getBoundingClientRect()  
    // getBoundingClientRect返回一个对象,包含top,left,right,bottom,width,height // width、height 元素自身宽高
    // top 元素上外边界距窗口最上面的距离
    // right 元素右外边界距窗口最上面的距离
    // bottom 元素下外边界距窗口最上面的距离
    // left 元素左外边界距窗口最上面的距离
    // width 元素自身宽(包含border,padding) 
    // height 元素自身高(包含border,padding) 
    
    getClientRects()   //返回当前元素在页面上形参的所有矩形。
    
    // 元素在页面上的偏移量  
    var rect = el.getBoundingClientRect()  
    return {   
      top: rect.top + document.body.scrollTop,   
      left: rect.left + document.body.scrollLeft  
    }

    (2)属性方法

    Element.getAttribute():读取指定属性  
    Element.setAttribute():设置指定属性  
    Element.hasAttribute():返回一个布尔值,表示当前元素节点是否有指定的属性  
    Element.removeAttribute():移除指定属性
    <script>
        function myfunction(){
            document.getElementById("demo1").setAttribute("id","demo");
            document.getElementById("demo1").getAttribute("id");
        }
    </script>

    (3)查找方法·

    Element.querySelector()  
    Element.querySelectorAll()  
    Element.getElementsByTagName()  
    Element.getElementsByClassName()
  • 相关阅读:
    maven scope 作用域
    MySQL数据库时区问题导致java程序无法连接数据库
    详细地址正则表达式
    java 重新学习 (七)
    .NET 多平台应用 UI介绍
    WPF关键帧动画
    RFID EPC Gen2 搜索模式和会话
    Razor 常用语法介绍
    Blazor 数据验证(6)
    Blazor 路由与页面导航(5)
  • 原文地址:https://www.cnblogs.com/Horsonce/p/7680566.html
Copyright © 2011-2022 走看看