Xin's blog Xin's blog
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

Xin

英雄可不能临阵脱逃啊~
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • HTML

  • CSS

  • JavaScript

    • 知识点

    • 方法

      • js能力提升1
      • js能力提升2
      • JS随机打乱数组
      • 判断是否为移动端浏览器
      • 将一维数组按指定长度转为二维数组
      • 防抖与节流函数
      • JS获取和修改url参数
      • js常用方法
        • js数据类型及类型判断
        • 用最简洁的代码去实现indexOf
        • 清空数组的方法
        • filter()方法过滤时如何保留假值?
        • 监听img元素是否加载完成
        • 树形结构转一维数组
        • 过滤数两个数组中重复的元素
        • 因为数据类型导致的排序错乱问题
    • Vue

    • 组件与插件

    • css扩展语言

    • 学习笔记

    • 前端
    • JavaScript
    • 方法
    ctrlwin
    2021-03-24

    js常用方法

    # 1.回到页面指定位置

    # (1)scrollTo()

    scrollTo() 方法可把内容滚动到指定的坐标。

    语法:

    scrollTo(xpos,ypos)
    
    1

    此 api 需要传递 DOM元素相对于window的 left 和 top 的距离。 它还有一个 behavior 参数,将其设置为 smooth 后,将会出现滑动的动画效果。步骤如下:

    1. 计算目标元素距离顶部的距离
    2. 通过事件触发
    const backTop2 = document.getElementById("backTop2")
    const TOP = document.getElementById("top")
    const y = TOP.offsetTop
    const backTop3 = document.getElementById("backTop3")
    backTop3.addEventListener("click", function (e) {
        window.scrollTo({ top: y, left: 0, behavior: 'smooth' })
    })
    
    1
    2
    3
    4
    5
    6
    7

    # (2)scrollIntoView()

    Element接口的scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。

    语法

    element.scrollIntoView(); // 等同于element.scrollIntoView(true)
    element.scrollIntoView(alignToTop); // Boolean型参数
    element.scrollIntoView(scrollIntoViewOptions); // Object型参数
    
    1
    2
    3

    该 api 相较于上一个,节点信息更加的明确,操作方法也更加的简洁,更利于后续的维护 代码如下

        const backTop2 = document.getElementById("backTop2")
        const TOP = document.getElementById("top")
        backTop2.addEventListener("click", function (e) {
            TOP.scrollIntoView({ behavior: "smooth" })
        })
    
    1
    2
    3
    4
    5

    # 2.获取dom元素样式的三种方法

    # (1)Style对象

    style读取样式

    语法:元素.style.样式名

    还可以设置通过style属性设置的样式

    语法:元素.style.样式=样式值

    注意:如果Css的样式值含有-,这种名称在JS中是不合法的,比如background-color;

    我们在使用是要把这样的名称修改为驼峰命名法去掉-,然后将-号后的字母大写

    注意:通过style属性设置和读取的都是内联样式,无法读取样式表中的样式。

    例:

    box1.style.width
    
    1

    # (2)currentStyle对象

    currentStyle是获取元素当前显示的样式

    语法:元素.currentStyle.样式名

    注意:只有IE和Opera支持使用CurrentStyle获取的元素计算后的样式

    未设置的属性值,currentStyle 会读取浏览器默认值

    	alert(box1.currentStyle.width);
    	alert(box1.currentStyle.backgroundColor);
    
    1
    2

    # (3)getComputedStyle()方法

    getComputedStyle() 这个方法来获取元素当前的样式 这个方法是window的方法,可以直接使用

    需要两个参数 第一个:要获取样式的元素 第二个:可以传递一个伪元素,一般都传null

    该方法会返回一个数组对象,对象中封装了当前元素对应的样式 可以通过对象,样式名来读取样式 如果获取的样式没有设置,则会获取到真实的值,而不是默认值 比如:没有设置width,它不会获取到auto 而是一个长度

    但是该方法不支持IE9以下的浏览器

    alert(getComputedStyle(box1,null).width)
    
    1

    # (4)解决兼容性问题

    以上的三种方法都存在缺陷,style它只能获取到内联样式中的属性值,currentStyle它由于兼容性不好,使用起来有很大的问题。getComputedStyle()方法,也不能完美兼容,只支持IE9+以上的浏览器。

    自定义一个函数,判断使用那种方法:

      /*
          obj 要获取样式的元素
          name 要获取的样式名
          */
    function getStyle(obj,name){
      if(window.getComputedStyle){
     	 //正常浏览器的方式,具有getComputedStyle()方法
     	 return getComputedStyle(obj,null)[name];
       }else{
    	//IE8的方式,没有getComputedStyle()方法
    	return obj.currentstyle[name];
       }
    //与上面的if作用一样 
    //return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentstyle[name];
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    # 4.获取dom元素到页面顶部的距离

    **Element.getBoundingClientRect()**方法返回元素的大小及其相对于视口的位置。

    tBoundingClientRect().left); // 元素左边距离页面左边的距离

    alert(box.getBoundingClientRect().top);     // 元素上边距离页面上边的距离
    
    alert(box.getBoundingClientRect().right);    // 元素右边距离页面左边的距离
    
    alert(box.getBoundingClientRect().bottom);    // 元素下边距离页面上边的距离
    
    alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离
    
    1
    2
    3
    4
    5
    6
    7

    jQuery.offset()函数

    offset()函数用于设置或返回当前匹配元素相对于当前文档的偏移,也就是相对于当前文档的坐标。该函数只对可见元素有效。

    该函数返回一个坐标对象(Object),该对象有一个left属性和top属性。属性值均为数字,它们都以像素(px)为单位。

    与position() (opens new window)不同的是:offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标。

    该函数属于jQuery对象(实例)。

    语法

    elem.offset().top
    
    1

    #

    在GitHub上编辑 (opens new window)
    #js
    上次更新: 2/23/2022, 5:36:03 PM

    ← JS获取和修改url参数 js数据类型及类型判断→

    最近更新
    01
    createElement函数创建虚拟DOM
    05-26
    02
    clipboard 剪切板属性
    05-26
    03
    vue的权限管理
    05-16
    更多文章>
    Theme by Vdoing | Copyright © 2021-2022 Xin | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    ×