zoukankan      html  css  js  c++  java
  • DOM盒子模型

    获取行间样式

    style.height     //获取行间样式高度
    xx.currentStyle.height   //计算后的样式高度 IE低版本
    getComputedStyle().height  //获取计算后的样式高度(不支持padding) 谷歌高版本(只可读不可改)

    设置行间属性

    设置自定义属性
    xx.setAttribute('index','i'); //属性名,属性值
    
    获取自定义属性
    xx.getAttribute('index');//得到属性值
    
    删除自定义属性
    xx.removeAttribute('index');

    client系列(可视区域)

    clientWidth、clientHeight //获取可视区域的宽高(支持padding,不支持border)
    clientLeft//获取元素边框的左边框宽度
    clientTop//获取元素边框的上边框宽度

     offset系列(偏移量)

    使用时候要有定位,而且设置初始值;如果没有父级定位会跟着父级走

    offsetWidth/offsetHeight //获取容器宽高(在client的基础上,支持border)
    offsetLeft //获取当前元素的左外边框到定位的父级左内边框的距离
    //如果没有定位父级或者祖先级,那么就应该跟html走
    offsetTop //指元素的边框的外边缘距离与已定位的父容器(offsetparent)的上边距离(不包括元素的边框和父容器的边框)
    offsetaParent //定位父级
    //(在没有任何定位的情况下它走的是body(在chrome中实测是走html))

    scroll系列(滚动)

    scrollWidth/scrollHeight //获取元素本身的宽高 (被内容撑开的尺寸,不管加不加固定尺寸,都会获取出来)
    scrolltop //获取或设置一个元素的内容垂直滚动的像素数
    scrollLeft //获取或设置一个元素的内容水平滚动的像素数

    getBoundingClientRect() 获取元素位置

    • 获得页面中某个元素的左,上,右,下分别相对浏览器视窗的位置
    • 指DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)
    • 返回一个object对象
    • 有left,top.right,bottom,width,height六个值
    var box=document.getElementById('box');         // 获取元素
    
    alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离
    
    alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离
    
    alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离
    
    alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离
  • 相关阅读:
    说说oracle分页的sql语句
    在desk于webi中资料查询不一致
    hql语句查询实体类采用list方法的返回结果集
    Come and join us at English corner
    一个失败项目引发的思考
    Use excel Macro export data from database
    Mark
    恭送功臣
    整理下心情
    Insert data from excel to database
  • 原文地址:https://www.cnblogs.com/theblogs/p/9947441.html
Copyright © 2011-2022 走看看