记录一次data-*自定义属性的使用

h5为我们提供了一个data属性,"data-*"作为前缀,可以让所有的html元素都支持自定义的属性

设置属性:document.getElementById('aa').setAttribute("data-*", true)

获取属性:document.getElementById('aa').getAttribute("data-*")

问题:react中组件嵌套层级,鼠标移入dom给dom添加一个悬停样式,最初使用mouseover触发dispatch一个action记录当前的hover控件id,在控件再次render时,判断当前的hover id和选中id是否相同并添加class。因为频繁的操作dom导致性能问题

解决:当mouseover时为dom添加自定义的属性data-hover,通过类选择器中的属性选择添加样式

// js
onMouseOver = (e) => { this.dom.setAttribute('data-hover', true) }

// css [data
-hover='true'] { outline: 1px dashed rgba(40,114,252,1) !important ; outline-offset: -1px; background:rgba(40,114,252,0.05); }

猜你喜欢

转载自www.cnblogs.com/shuhaonb/p/13385676.html
今日推荐