如何在JS中使用CSS

时间:2014-12-28 17:07:29

标签: javascript html css

我想用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;
}

2 个答案:

答案 0 :(得分:1)

您的代码很好,但您的范围很糟糕。您需要使用this

而不是函数内的house

&#13;
&#13;
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;
&#13;
&#13;

答案 1 :(得分:1)

使用 house 替换。在JavaScript 中,始终引用我们正在执行的函数的“所有者”,或者更确切地说,指向函数是其方法的对象。在页面中定义函数function1()时,它的所有者是页面,或者说是JavaScript的窗口对象(或全局对象)。否则看起来不错。