zoukankan      html  css  js  c++  java
  • element

    element对象对应于网页的HTML标签元素,每一个HTML标签元素,在DOM树上都会转化为一个element节点对象。

    相关遗漏知识点

    1、element.tagName
    返回指定元素的大写标签名,与nodeName属性的值相等


    2、element.innerHTML
    !如果插入的文本包括HTML标签,会被解析为节点插入对象DOM,但如果插入script标签,会生成script标签,但并不会执行。


    3、elemente.classList与element.className
    Element.classList返回一个类似数组的对象,element.className返回一个由该element各class属性值组成的字符串,其中每个class用空格分隔。
    className和classList方法的异同——添加和删除某个类

    Var box=document.getElementById('box');
    //添加
    a、box.className+='bold';
    b、box.classList.add('bold');
    //删除
    a、box.className=box.className.replace(/^bold$/,'')
    b、box.classList.remove('bold');

    盒模型相关属性


    4、client系列
    1)element.clientHeight,element.clientWidth
    返回元素节点可见部分的宽高,即包括padding和width但不包括滚动条边框和margin的值
    对于整张网页来说,当前可见高度,即视口高度要从document.documentElement对象上获取。

    //没有滚动条时
    document.documentElement.clientHeight==window.innerHeight;//true
    //有滚动条时
    document.documentElement.clientHeight<=window.innerHeight;//true,此时等于window.innerHeight减去水平滚动条的高度

    !注意不能用document.body.clientHeight或clientWidth,因为document.body会返回body节点,与视口大小无关。
    2)、element.clientLeft,element.clientTop
    返回元素节点上边框及左边框的宽度值,单位为像素,这两个属性包括滚动条的宽度,但不包括margin及padding。
    !如果元素的显示设为display:inline,其clientLeft属性一律为0


    5、scroll系列
    1)、Element.scrollHeight,element.scrollWidth分别返回某个网页元素的总高度总宽度,包括由于存在滚动条而不可见的部分,默认情况下,他们包括padding,但不包括border和margin

    //不存在溢出
    Box.scrollHeight==box.clientHeight//true
    //存在溢出,且滚动条滚动到内容底部。
    Box.scroolHeight-box.scrollTop==box.clientHeight//true

    如果滚动条没有滚动到内容底部,上面的表达式为false,该特性结合onscroll事件,可用于判断用户是否滚动到了指定元素的底部,比如向用户展示某个内容区块时,判断用户是否滚动到了区块的底部。

    box.onscroll=function(){
    If(this.scrollHeight-this.scrollTop==this.clientHeight{console.log('谢谢阅读')}
    else{console.log('您还未读完')}
    }

    2)、element.scrollLeft,element.scrollTop
    表示网页元素的水平滚动条向右侧、下侧滚动的像素数量,若没有滚动,这俩属性值则为0
    !若要查看整张网页的水平的和垂直的滚动举例,要行document.body元素上读取。
    Document.body.scrollLeft

    6、offset系列
    1)element.offsetHeight,elementoffsetWidth
    这两个属性分别返回元素的垂直高度、水平宽度,这两个属性包括padding和border以及滚动条,注意与element.clientHeight、element.clientWidth区分开,如果没有滚动条,element.offsetHeight只比element.clientHeight多了边框border的高度。

    !整张网页的高度,可以在document.documentElement和document.body上读取。
    2)、element.offsetLeft,element.offsetTop返回当前元素相对于其父节点的水平or垂直位移。
    如何求元素左上角相对于整张网页的坐标呢?

    var getPos=function(e){
    var posX=0,posY=0;
    while(e!=null){
    posX+=e.offsetLeft;
    posY+=e.offsetTop;
    e=e.offetParent;
    }
    console.log({'posX':posX,'posY':posY})
    return;
    }//这样求,前提是均设置相关position
  • 相关阅读:
    CodeForces Gym 100500A A. Poetry Challenge DFS
    CDOJ 486 Good Morning 傻逼题
    CDOJ 483 Data Structure Problem DFS
    CDOJ 482 Charitable Exchange bfs
    CDOJ 481 Apparent Magnitude 水题
    Codeforces Gym 100637G G. #TheDress 暴力
    Gym 100637F F. The Pool for Lucky Ones 暴力
    Codeforces Gym 100637B B. Lunch 找规律
    Codeforces Gym 100637A A. Nano alarm-clocks 前缀和
    TC SRM 663 div2 B AABB 逆推
  • 原文地址:https://www.cnblogs.com/MelodysBlog/p/10449429.html
Copyright © 2011-2022 走看看