sf-utils2 sf-utils2
版本v3.3.3-beta1
首页
  • 01.快速开始 🔥
  • 02.基础-Base
  • 03.对象-Object
  • 04.数组-Array
  • 05.方法-Function
  • 06.字符串-String
  • 07.数学-Math
  • 08.dom
  • 09.拓展
  • webpack5.x教程学习 (opens new window)
  • 例子
  • 教程 🔥
  • 例子配置
企业级后台模版 (opens new window)
版本v3.3.3-beta1
首页
  • 01.快速开始 🔥
  • 02.基础-Base
  • 03.对象-Object
  • 04.数组-Array
  • 05.方法-Function
  • 06.字符串-String
  • 07.数学-Math
  • 08.dom
  • 09.拓展
  • webpack5.x教程学习 (opens new window)
  • 例子
  • 教程 🔥
  • 例子配置
企业级后台模版 (opens new window)
  • 快速开始

  • 基础-Base

  • 对象-Object

  • 数组-Array✨✨✨

  • 方法-Function

  • 字符串-String

  • 数学-Math

  • 文件-Buffer

  • 节点-dom

    • 序言 👏
      • _constant
      • getHttpBlob【获取远程二进制数据流】
      • downloadFile【http下载文件】
      • loadJsSync【单个加载js文件】
      • loadJsOrCssMulSync【批量加载远程css和js文件】
      • getAbsOffsetTop【距离父滚动区域顶部绝对距离】 🔥
      • getParentScrollElement【获取父元素滚动元素】 🔥
      • isScroll【是否是滚动容器】
      • scrollToX【水平滚动到某个具体位置】 🔥
      • scrollToY【垂直滚动到某个具体位置】 🔥
      • scrollToElement【滚动到某个dom元素】 🔥
      • isElementInContainer【元素是否整体在容器内】
      • batchElsPosInContainer【批量 dom 元素在 父的滚动视图位置】 🔥
      • isElementVisibleInViewport【是否可见在某个股东元素上】 🔥
      • observerElementMutation【监听dom元素属性变化】 🔥
      • print【打印】 🔥
      • partialCb【分片加载】
      • domUtils【dom方法操作基础】 🔥
    • 拓展

    • nodejs

    目录

    序言 👏

    描述

    主要提供大量对 dom 操作的封装。

    # npm 使用方式

    const { Dom } = 'sf-utils2'
    
    // 不推荐使用 解构函数, 因为会里面逻辑大量用了this,如果解构了,this会导致指向错误问题
    // 如下例子
    const { downloadFile } = Dom // 这样方式
    const url = 'https://info.compassedu.hk/ad/225/1637553399694.png?imageView2/3/q/100|imageslim'
    Dom.downloadFile({ url, filename: `${Date.now()}.png` }).then(() => {
      alert('下载成功!')
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

    提示

    不推荐使用 解构函数, 因为会里面逻辑大量用了 this,如果解构了,this 会导致指向错误问题

    # cdn 使用方式

    <script src="https://cdn.jsdelivr.net/npm/sf-utils2/lib/b-utils.min.js"></script>
    <script>
      const Dom = window.sfutils.Dom // 这样方式
      const url = 'https://info.compassedu.hk/ad/225/1637553399694.png?imageView2/3/q/100|imageslim'
      Dom.downloadFile({ url, filename: `${Date.now()}.png` }).then(() => {
        alert('下载成功!')
      })
    </script>
    
    1
    2
    3
    4
    5
    6
    7
    8
    上次更新: 2025/07/01, 14:52:29
    textToBlob【文本转成Blob对象】
    _constant

    ← textToBlob【文本转成Blob对象】 _constant→

    Theme by Vdoing | Copyright © 2022-2025 bianpengfei
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    ×