zoukankan      html  css  js  c++  java
  • 返回顶部

    Dom
    1、找到标签
    获取单个元素 document.getElementById('i1')
    获取多个元素(列表)document.getElementsByTagName('div')
    获取多个元素(列表)document.getElementsByClassName('c1')
    a. 直接找
    document.getElementById 根据ID获取一个标签
    document.getElementsByName 根据name属性获取标签集合
    document.getElementsByClassName 根据class属性获取标签集合
    document.getElementsByTagName 根据标签名获取标签集合

    b. 间接
    tag = document.getElementById('i1')

    parentElement // 父节点标签元素
    children // 所有子标签
    firstElementChild // 第一个子标签元素
    lastElementChild // 最后一个子标签元素
    nextElementSibling // 下一个兄弟标签元素
    previousElementSibling // 上一个兄弟标签元素

    2、操作标签

    a. innerText

    获取标签中的文本内容
    标签.innerText

    对标签内部文本进行重新赋值

    标签.innerText = ""

    b. className
    tag.className =》 直接整体做操作
    tag.classList.add('样式名') 添加指定样式
    tag.classList.remove('样式名') 删除指定样式
    tag.classList.contains('样式名') 判断是否存在这个样式结果为布尔值
    PS:

    <div onclick='func();'>点我</div>
    <script>
    function func(){
    
    }
    
    </script>

    c. checkbox
    获取值
    checkbox对象.checked
    设置值
    checkbox对象.checked = true

    返回顶部:

    function GoTop() {
    // 返回顶部
    window.scrollTo(0,0);
    console.log('瞬间返回顶部')
    }
    function GoTop1() {

    //返回顶部动画版本

    var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
    window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
    window.clearInterval( scrollToTop );
    }
    }, 16);
    console.log('返回顶部动画版本')
    }

    //返回顶部流畅版本

    function GoTop2() {
    //返回顶部流畅版本
    (function smoothscroll() {
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
    window.requestAnimationFrame(smoothscroll);
    window.scrollTo(0, currentScroll - (currentScroll / 5));
    }
    })();
    console.log('返回顶部流畅版')
    }



  • 相关阅读:
    highlight testing
    Oracle内部错误:ORA07445[_memcpy()+52] [SIGSEGV]一例
    Welcome to Nexus S?
    Script:AWR Trending
    Exadata上的分页查询性能测试
    Mysql:日志管理:汇总
    Oracle 11gR2:40几个初始化参数的有效枚举值list
    Oracle:11gR2的安装后看”基本的初始化参数“
    Linux:sed:面向字符流(行)的编辑器
    Sqlite:学习下
  • 原文地址:https://www.cnblogs.com/zhangmingda/p/12447121.html
Copyright © 2011-2022 走看看