js关于dom的常用操作

紫微前端

于 2022-05-27 14:02:07 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

分类专栏：常用代码片段文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125002712

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

本文主要探讨JavaScript中对DOM（文档对象模型）的常见操作，包括元素的选择、添加、删除、属性修改以及事件处理等，旨在提升前端开发中的交互实现能力。内容覆盖了Vue.js框架下DOM操作的特性和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


const trim = function (string) {
    return (string || "").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, "");
};

/*获取当前元素的偏移（相对于整个document）
 *   offsetTop：元素最顶端距离文档顶端的距离，包含滚动条
 *   offsetleft：元素最左侧距离文档左侧的距离，包含滚动条
 *   left：元素最左侧距离文档左侧的距离，不包含滚动条
 *   top:元素最顶端距离文档顶端的距离，不包含滚动条
 *   right:元素最右侧距离文档右侧的距离，不包含滚动条
 *   bottom：元素最底端距离文档底端的距离，不包含滚动条
 *   right2：元素最左侧距离文档右侧的距离，不包含滚动条
 *   bottom2：元素最底端距离文档最底部的距离，不包含滚动条
 * */
export function getViewportOffset(triggerEl) {
    var doc = document.documentElement,
        box =
            typeof triggerEl.getBoundingClientRect !== "undefined"
                ? triggerEl.getBoundingClientRect()
                : 0,
        scrollLeft =
            (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
        sc

了解本专栏