如何将 CSS 与 JS 一起使用

How to use CSS with JS

本文关键字：一起 JS CSS      更新时间：2023-09-26

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

你的代码很好，但你的范围很糟糕。您需要使用 house 而不是在函数内部this：

function function1() {
  var house = document.getElementById("house");
  if (house.className == "mystyle")
    house.className = "mystyle2";
  else
    house.className = "mystyle";
}
.mystyle {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}
.mystyle2 {
  float: right;
}
  <img src="http://images.clipartpanda.com/cute-house-clipart-house_clipart_12.gif" id="house" width="200" height="150" onclick="function1()">

用房子代替它。在 JavaScript 中，这总是指我们正在执行的函数的"所有者"，或者更确切地说，是指函数作为方法的对象。当你在页面中定义函数 function1（） 时，它的所有者是页面，或者更确切地说，是 JavaScript 的窗口对象（或全局对象）。否则看起来不错。

相关文章：