Question

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

Answer 1

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

而不是函数内的house

＆＃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;

Answer 2

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

如何在JS中使用CSS

2 个答案: