4.介绍一下自定义属性？

GLYB－85

已于 2022-07-28 23:18:49 修改

阅读量135

点赞数

分类专栏：面试题文章标签：前端面试

于 2022-07-11 23:01:04 首次发布

本文链接：https://blog.csdn.net/weixin_45888283/article/details/125732263

版权

面试题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. data- 和dataset

在html5中，我们使用 data- 来定义自定义属性，语法如下：

<element data-*="value">

使用dataset.name 访问自定义属性：

<body>
    <ul>
        <li data-id="1">点我试试</li>
        <li data-id="2">点我试试</li>
        <li data-id="3">点我试试</li>
    </ul>
    <script>
        // 利用事件委托注册事件
        let ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // 使用dataset访问自定义id属性
            cosole.log(`我是第${e.target.dataset.id}个li`)
        })
    </script>
</body>

在这里插入图片描述

使用元素.dataset 可获得一个自定义属性集：

<input type="text" data-name="user" data-id="9785">
<script>
    const input = document.querySelector('input')
    console.log(input.dataset)
</script>

在这里插入图片描述

使用 data- 自定义属性的好处：绑定 DOM 强相关数据，js 传递数据。

2. setAttribute() 和 getAttribute()

使用 setAttribute() 创建或改变某个新属性，语法如下：

element.setAttribute('name','value')

使用 getAttribute () 访问自定义属性：

<body>
    <input type="text" name="uname" id="inpt">
    <button id="btn">提交</button>
    <script>
        // 使用setAttribute()创建/修改属性
        document.getElementById('btn').setAttribute('name', 'uploadBtn')
        document.getElementById('inpt').setAttribute('name', 'username')

        window.addEventListener('click', function (e) {
            console.log(e.target.getAttribute('name')) // uploadBtn、username
            console.log(e.target.getAttributeNode('name')) // name="uploadBtn"、name="username"
        })

    </script>
</body>

使用 data- 属性方法比 setAttribute() 方法简便，页面交互效果更好。

GLYB－85

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.介绍一下自定义属性？

1. data- 和dataset在html5中，我们使用 data- 来定义自定义属性，语法如下：<element data-*="value">使用dataset.name 访问自定义属性：<body> <ul> <li data-id="1">点我试试</li> <li data-id="2">点我试试</li> <li data-id="
复制链接

扫一扫