Javascript图像属性[关闭]答案

【问题标题】：Javascript image properties [closed]Javascript图像属性[关闭]
【发布时间】：2015-04-24 04:55:09
【问题描述】：

我一遍又一遍地翻阅我的代码，我就是不明白为什么它不能正常工作......

有人可以启发我吗？这里有什么问题？我只是没看到。

代码应允许用户在文本框中输入各种值来更改图像的某些特征，例如边框大小、颜色、宽度、高度、图像替代文本和图像标题。

这是我的代码：

<html>
<head>
<title>Image Properties</title>
<script type="text.javascript">
function changeImage() {
    //applies a new border size
    document.getElementById('img').border = document.getElementById('bs').value;
    //applies a new border color
    document.getElementById('img').style.borderColor = document.getElementById('bc').value;
    //applies a new width
    document.getElementById('img').width = document.getElementById('bw').value;
    //applies a new height
    document.getElementById('img').height = document.getElementById('bh').value;
    //applies a new alt tag
    document.getElementById('img').alt = document.getElementById('ba').value;
    //applies a new title
    document.getElementById('img').title = document.getElementById('bt').value;
}
</script>
</head>
<body>
<h2>Change Image Properties</h2>
<img src="KotakuLogo.jpg" id="img" />
<p>
Border Size:<input type="text" id="bs" 
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
New Border Color:<input type="text" id="bc"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
New Border Width:<input type="text" id="bw"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
New Border Height:<input type="text" id="bh"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
New Border Alt Tag:<input type="text" id="ba"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
New Border Title:<input type="text" id="bt"
onfocus="this.style.background='#c3c3c3'"
onblur="this.style.background='#FFFFFF'"/><br />
<input type="button" value="Submit Image Changes" onclick="changeImage()" />
</body>
</html>

【问题讨论】：

标签： javascript html image

【解决方案1】：

问题是你的脚本没有被解释，因为你把它放在了错误类型的脚本中：

<script type="text.javascript">...</script>

将其更改为更正 text/javascript 即可。甚至更好：删除 type 属性作为多余的，text/javascript 无论如何都是默认类型。

最后，使用 CSS 代替 onfocus="this.style.background='#c3c3c3'" onblur="this.style.background='#FFFFFF'"：

input:focus {
    background: #c3c3c3;
}

【讨论】：

哈哈哈..你可以在评论中添加这个。
@Ilyas Minmouni，但他的名声岌岌可危！ :P
请注意有关单位的声明。这些是 HTML 属性，而不是 CSS 属性。 HTML 属性不需要单位
@VolkerAndres 是的，没有注意到宽度是属性而不是样式。谢谢！
感谢您向我展示我的错误。现在让我感到困惑的是，当我输入值来更改图像时，图像消失了。有谁知道这是为什么？

【解决方案2】：

首先，document.getElementById 需要一些时间来运行，所以你应该存储它的结果而不是调用它十次。

var elem = document.getElementById('img');
elem.something = "example";
elem.somethingElse = 1234;

border 是图像上的deprecated。您应该直接与元素的样式进行交互。边框 CSS 属性一次覆盖所有样式，必须写成SIZEunit style color 如5px solid black。

elem.style.border = document.getElementById('bs').value + "px solid " + document.getElementById('bc').value;

【讨论】：