javascript - Cytoscape 在事件发生时从元素中删除样式

Question

当我有一个元素时，我会在鼠标悬停时添加一些边框，以指示将要单击哪个项目:

// cy an instance of a cytoscape object
cy.on('tap',function(event){
      var evtTarget = event.target;

      if( evtTarget === cy ){
        console.log('tap on background');
        $("#nodes").hide();
        $("#no_selected").show();
      } else {
        console.log("Display Info")
        displayInfo(evtTarget._private.data.properties);
      }
    }).on('mouseover',function(event){
      var evtTarget = event.target;

      if( evtTarget !== cy ){
        console.log("Mouse Over");
        evtTarget.style('border-width','2px').style('border-color',"#AF0000");
      }
    }).on('mouseout',function(event){
      var evtTarget = event.target;
      if( evtTarget !== cy ){
        console.log("Fired");
        evtTarget.style('border-width',null).style('border-color',null);
      }
    });

所以我想要实现的是当 mouseout 事件发生时从节点移除边框。到目前为止，我无法弄清楚如何做到这一点，并且在上面的代码中没有发生。您知道如何从节点或边中删除 style 属性吗？

Answer 1

在您的情况下，当 mouseout 事件发生时，只需将 border-width 设置为 0px:

// In your case just chain it with other `on methods`
cy.on('mouseout',function(event){
      var evtTarget = event.target;
      if( evtTarget !== cy ){
        console.log("Fired");
        evtTarget.style('border-width','0px);
      }
    });

据我所知，您只需将属性值重置为您在 style 部分为边缘或节点设置的默认值。 有时只需设置一个默认值(例如，对于尺寸 0px 就足以不被显示)可以为最终用户实现预期的效果。