在图像之前添加空格，javascript

Add space before image, javascript

本文关键字：空格 javascript 添加 图像      更新时间：2023-09-26

我试图在广播播放的左侧放置一些空间.gif按钮。可以向此代码添加什么来实现这一点？

谢谢！

// Last (only one on Mac) row has the VCR buttons.
//
s += '<td>';
s += '<img border="0" src="/images/dot.gif" width="81" height="' + gPreBtnVertSpace + '"><br>';
s += '<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(''playnow'')">';
if (player != 'MP3')
    s += '<img alt="STOP" src="' + imageDir + 'radio-stop.gif" width="72" border="0" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(''stop'')">';
s += '</td></tr>';
document.write(s);
// removing mute button
var myEl = document.getElementsByName("mute");
var elP = myEl[0].parentNode.parentNode;
elP.removeChild(myEl[0].parentNode);

要么为img标记设置边距（为此需要display:inline-block;），要么添加a &nbsp;（无空格）。

可能保证金将是我的首选方式，例如

img{
  display:inline-block;
  margin-left:5px;
}

或

s += '&nbsp;<img alt="PLAY" ...

顺便说一句：正确的方法是，通过document.createElement创建<td>和<img>元素，然后将它们附加到dom.（或者使用jquery，那里更简单一些）

你可以从字面上把一个空格字符放在它前面。我会使用 CSS 来做。给图像一个类class="whatever"，然后在CSS中：

.whatever {
    margin-left: 10px;
}

由于您已经在内联中执行此操作，因此您只需在内联 css 中添加边距即可。

s += '&nbsp;<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(''playnow'')">';

或者，更准确地说，

s += '&nbsp;<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; margin-left:5px;" onclick="HandleAction(''playnow'')">';

如果"space"表示渲染按钮元素左侧的视觉渲染空间，这通常使用CSS完成。一种常见的实现是图像标记本身或图像标记的容器具有适当分配空间的 CSS 类属性。对于CSS来说，要做到这一点，请查看填充，边距，绝对与相对位置，left或right属性等内容。

相关文章：