zoukankan      html  css  js  c++  java
  • 记录一次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); }
  • 相关阅读:
    作为产品经理为什么选择开源GIS
    arcpy自动发布服务02
    rclone
    MinIO+Keepalived+Nginx
    Mysql-用户管理
    docker-compose
    docker-制造镜像
    docker-数据卷
    docker-容器操作
    docker-镜像操作
  • 原文地址:https://www.cnblogs.com/shuhaonb/p/13385676.html
Copyright © 2011-2022 走看看