Question

我正在写一个js文件，这就是我的按钮的样子

var myButton = $('<button type="button" style="display:inline">Translate Right</button>');
    myButton.css({"margin-top":"5px", "float":"left"});

现在我想用图标替换“Translate right”文本。我试过了：

   var myButton = $('<button type="button" style="display:inline">Translate Right</button>');
       myButton.css({"margin-top":"5px", "float":"left"});
       $('body').append(myButton); 
      myButton.html('<img src="path\to\image">'); // backslash because I'm using windows

但它不起作用。我有一个空按钮。我有这个错误：不允许加载本地资源。我用src更改了url（我不确定我是否允许这样做），我没有错误，但按钮仍然是空的

ps：在我的代码中，我以另一种方式将myButton附加到正文，因为我正在编写的文件不是我的索引文件，但问题不在这里（我已经尝试过使用不同的src {{ 3}}）它起作用了。你能帮帮我吗？

由于

Answer 1

我会使用psuedo元素，在此处记录：http://css-tricks.com/pseudo-element-roundup/

另外，我建议不要将你的css放在你的javascript中，而只是通过javascript更改类名，如下所述：http://smacss.com/book/state

即：


.myButton:after{
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: (myIcon.png);
}

编辑：

我认为你的代码在尝试各种事情之间出了问题。这个JSFiddle适合我：http://jsfiddle.net/4C6e3/

Answer 2

您可以尝试以下方式：

var myButton = $('<button type="button" style="display:inline">Translate Right</button>');
myButton.css({"margin-top":"5px", "float":"left"});

然后：

myButton.html('<img src="path/to/icon" />');

但你应该使用<button>这个方法......

JSBin Demo

如何将本地图像加载到按钮中

2 个答案: