dojoボタンの背景を非表示にするか、削除しますか？

Question

ドゥーボタンの代わりにイメージを入れようとしています。背景として画像を追加できますが、ボタンの輪郭が見えます。私はイメージを表示するだけです。私は何をすべきか？

私のコードは以下のとおりです。

CSS：

.EditButtonWidgetImage { 
    background-image: url("EditButton/images/edit.png"); 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 25px; 
    width: 25px; 
} 

ではJavaScript：

var infoTableContainer = dojo.create("div", null, map.container); 

    var x = 200 - map.position.x; 
    var y = 50 - map.position.y; 

    this.InfoTable = new FloatingPane({ 
     title : "<b>Editor</b>", 
     resizable: true, 
     doLayout: true, 
     dockable: false, 
     closable: true, 
     //constrainToContainer: true, 
     'class': "EditWidgetContainer", 
     style: "left:"+x+"px;top:"+y+"px;padding:0px" 
    }, infoTableContainer); 
    //dojo.attr(infoTable, 'class', 'TableInfoWidgetContainer'); //ie8에서 class 예약어 처리로 인해 변경 

    dojo.connect(this.InfoTable, 'close', lang.hitch(this, function() { 
     //this.InfoTable.destroy(); 
     //console.log('infoGrid (infotable.destroy)=',this.InfoGrid); 
     if (this.InfoGrid) { 
      //this.InfoGrid.destroyRecursive(true); 
      this.InfoGrid.destroy(); 
      this.InfoGrid = null; 
      this.InfoGrid = undefined; 
     } 

     this.InfoTable = null; 
     this.InfoTable = undefined; 
    })); 

    //Border생성 
    var border = new BorderContainer({ 
     gutters: false, 
     design: 'headline', 
     style: "height:100%;width:100%;" 
    }) 

    //검색옵션 생성 
    var cpT = ContentPane({ 
     region: "top", 
     title: "검색 옵션", 
     style: "height:auto;width:100%;" 
    }); 

    this.cboService = new ComboBox({ 
     title: '서비스 : ', 
     searchAttr: "SVC_NM", 
     style: "width:120px;" 
    }); 

    this.cboLayer = new ComboBox({ 
     searchAttr: "LYR_NM", 
     style: "width:120px;" 
    }); 

    var btnResult = new Button({ 
     iconClass : "EditButtonWidgetImage", 
     style: "width:40px;margin-left:4px;" 
    }); 
    dojo.place('<label class="widget_field_label" style=width:70px; >편집대상 :&nbsp;</label>', cpT.domNode); 
    cpT.addChild(this.cboService); 
    dojo.place('<label class="widget_field_label" style=width:80px;>참조레이어 :&nbsp;</label>', cpT.domNode); 
    cpT.addChild(this.cboLayer); 
    cpT.addChild(btnResult); 

    border.addChild(cpT); 

    border.placeAt(this.InfoTable.containerNode); 
    border.startup(); 

    this.InfoTable.startup(); 

Answer 1

私は私のために働いたソリューションはdijitButtonNodeクラスを削除することでした、似たように直面していました。しかし、それはあなたにイメージとそれがボタンであるという指示を残すでしょう。あなたが本当に欲しいのはそれですか？

domClass.remove(btnResult.domNode.childNodes[0], "dijitButtonNode") 

また、簡単なアドオンとimgタグができ、それにクリックイベントを追加します。

Answer 2

"dijit/form/Button"を使用している場合は、次のクラスだけが表示され、その結果が表示されます。

ここで私はボタンクラスをオーバーライドしました。スコープを特定のボタンのみに制限してください。

.claro .dijitButton .dijitButtonNode { 
    background-color: transparent; 
    border: none; 
    box-shadow: none; 
} 

Answer 3

基本的には、（この場合はクラロ中）道場のテーマからクラス.dijitButtonNodeを上書きする必要があります。

あなたは出発点として、以下のCSSを使用することができます。

https://jsfiddle.net/zzot4zur/

.claro .dijitButton .dijitButtonNode { 
    background-color: transparent; 
    border: none; 
    box-shadow: none; 
    background-image: url("http://www.nuflowwidebay.com.au/wp-content/uploads/2015/10/expences-button-png-hi.png"); 
    background-size: 75px 30px; 
    background-repeat: no-repeat; 
    width: 75px; 
    height: 30px; 
} 

---

require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom) { 
    // Create a button programmatically: 
    var myButton = new Button({ 
    label: "Click me!", 
    onClick: function() { 
     // Do something: 
     dom.byId("result1").innerHTML += "Thank you! "; 
    } 
    }, "progButtonNode").startup(); 
}); 

---

<button id="progButtonNode" type="button"></button> 
<div id="result1"></div>