Question

我目前正在尝试通过使用.innerHTML命令从另一个对象访问它来更改对象，这是我尝试使用的代码：

<!DOCTYPE html>
<div>
    <img id="ALogo" src="images/picture1" onMouseOver="logoChange1" onMouseOut="logoChange2"/>
</div>

</html>
<script>
var logo = document.getElementById("ALogo");

function logoChange1() {
logo.innerHTML = "src='images/picture1' 
};

 function logoChange2() {
logo.innerHTML = "src='images/picture2' 
};
</script>

不幸的是，实际图像不会改变，还有另一种方法吗？或者我做错了什么？

Answer 1

你为什么不这样做：

function logoChange1() {
    logo.setAttribute("src", "images/picture1");
};

function logoChange2() {
    logo.setAttribute("src", "images/picture2");
};

或只更改src属性：

function logoChange1() {
    logo.src = "images/picture1";
};

function logoChange2() {
    logo.src = "images/picture2";
};

Answer 2

更改图片'src'：

<img id="ALogo" src="http://www.placehold.it/200" onmouseover="logoChange1()" onmouseout="logoChange2()"/>

<script>
    var logo = document.getElementById("ALogo");
    logoChange1 = function(){
       logo.src = 'http://www.placehold.it/200&text=1';
    }
    logoChange2 = function(){
      logo.src = 'http://www.placehold.it/200&text=2';
    }
</script>

EG：http://jsbin.com/gewoz/1/edit?html,output

Answer 3

试试这个。

<script>

function logoChange1() {
document.getElementById("myimage").setAttribute("src","images/picture1");
};

function logoChange2() {
document.getElementById("myimage").setAttribute("src","images/picture1");
};

</script>

我的来源：http://www.javascriptkit.com/dhtmltutors/domattribute.shtml

在.innerHTML问题中访问不同的对象

3 个答案: