我想用JS激活CSS。让我们说我有这个代码,我想在第一次点击时放大图片,然后在第二次点击后将其发送到右边,但它不起作用。功能是否正确?
如何使用JavaScript控制元素的CSS?
<script>
function function(){
var house = document.getElementById("house");
if(this.className == "mystyle")
this.className = "mystyle2";
else
this.className = "mystyle";
}
</script>
<a href="#" style="text-decoration: none"><img src="casa1.jpg" id="house" width="200" height="150" onclick="function()">
我希望它能激活这个CSS:
.mystyle {
position: absolute;
left: 50%;
margin-left: -100px;
}
.mystyle2{
float: right;
}
答案 0 :(得分:1)
您的代码很好,但您的范围很糟糕。您需要使用this
:
house
function function1() {
var house = document.getElementById("house");
if (house.className == "mystyle")
house.className = "mystyle2";
else
house.className = "mystyle";
}
&#13;
.mystyle {
position: absolute;
left: 50%;
margin-left: -100px;
}
.mystyle2 {
float: right;
}
&#13;
<img src="http://images.clipartpanda.com/cute-house-clipart-house_clipart_12.gif" id="house" width="200" height="150" onclick="function1()">
&#13;
答案 1 :(得分:1)
使用 house 替换此。在JavaScript 中,始终引用我们正在执行的函数的“所有者”,或者更确切地说,指向函数是其方法的对象。在页面中定义函数function1()时,它的所有者是页面,或者说是JavaScript的窗口对象(或全局对象)。否则看起来不错。