获取div的自定义属性值

项目中用到了antD的穿梭框, 自定义左右两侧样式时, 需要区分方向, 用class或者id取感觉都不够语义化, 所以想到了自定义属性, 下面来看看怎么实现。

学习了一下jq怎么实现:

<div id="test" width="50">测试</div>

int w = $("#test").attr("width");

console.log(w); // 50

再看一下js如何实现: (单个的)

<div id="xxx" customAttr="test">测试</div>

const a = document.getElementById("xxx").attributes["customAttr"].value;

alert(a);    // 测试

这个只是单个的, 因为项目中选中的是多个div, 拿到的是个数组, 所以想到了H5新增获取自定义属性的方法  (有兼容性问题，IE11以上支持), 遍历一下获取所有:

语法: HTMLElement.dataset.属性 || HTMLElement.dataset['属性'];

说明: 1). H5新增的获取自定义属性的方法, 它只能获取data- 开头的;

         2). dataset是一个集合, 里面存放了所有以data- 开头的自定义属性;

         3). 建议以后设置自定义属性时, 不管用哪种方式, 属性名以data- 开头, eg: data-direction; 

         4). 如果自定义属性里面有多个- 链接的单词, 我们获取的时候采取驼峰命名法, eg: data-list-name, 取的时候就是 HTMLElement.dataset.listName 或 HTMLElement.dataset['listName'] 。

<div className="container">
      {sourceData.map(item => (
            <div
              className="custom-item"
              data-direction='left'
              key={item.key}
            >
            {item.name}
            </div>
        ))
      }
      {targetData.map(item => (
            <div
              className="custom-item"
              data-direction='right'
              key={item.key}
            >
            {item.name}
            </div>
         ))
       }
</div>

 看一下打印结果:

 可以看到, 能够拿到自定义的属性值, 所以根据不同的属性值继续写逻辑就行啦!

参考: https://www.csdn.net/tags/MtjaEg1sNTE3NDEtYmxvZwO0O0OO0O0O.html