Question

我正在寻找将javascript嵌入到html参数中的正确方法。这是我想要做的一个例子：

  <img src="source.png" height="<script> if(screen.width == 1920)
                                {document.write('60px');}</script>" 
                                 title="icon"/>

我知道以这种方式嵌入PHP可以工作，但我似乎无法使用Javascript。我对这个问题的了解有限，我需要一些帮助来解决这个问题。谢谢。

Answer 1

请注意我添加到元素中的id="sourceImg"，每个元素每页必须唯一。不这样做将意味着Javascript将不知道选择哪个元素，并将选择一个。

<img id="sourceImg" src="source.png" title="icon">

<script>
if (screen.width == 1920) {
    document.getElementById('sourceImg').style.height = '60px';
}
</script>

要么在标记落入页面源之后，要么在window.onload事件处理程序中运行。如果它在img元素可用之前运行，则会出错。

注意 - JohnFx在下面的评论中描述的方法是：

<img id="sourceImg" src="source.png" title="icon" onload="sizeMe()">

<script>
function sizeMe() {
  if (screen.width == 1920) {
    document.getElementById('sourceImg').style.height = '60px';
  }
}
</script>

这使用img元素的onload处理程序。请注意，onload=""，onclick=""等内联事件处理程序通常被认为难以维护。然而，上述内容应该可以作为演示，其他路由涉及理解页面加载，DOM元素可用性以及其他可能比简单示例更难理解的细节。

修改

而且，技术上，你可以这样做：

<img id="sourceImg" onload="if(screen.width < 1920) this.style.width='60px';" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/001_Jornal_Monsenhor_A_Comarca_23_de_Marco_de_1947.jpg/762px-001_Jornal_Monsenhor_A_Comarca_23_de_Marco_de_1947.jpg" title="icon">

http://jsfiddle.net/pdN3y/

注意，我更改了if语句，以使更改更加明显。

但请不要。进入是一个坏主意和坏习惯。花一些时间来计算页面加载和DOM可用性，花费时间。

Answer 2

你不能这样做。你是对的 - 你的PHP干扰了。有很多方法可以做到这一点，只需改变你的方法：

<script>
    document.write("<img src='source.png' title='icon' " + screen.width == 1920 ? "height='60px'" : "" + " />");
</script>

将Javascript嵌入到HTML参数中

2 个答案: