项目中用到了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