按一下互動：toggle

這是網頁內容 的呈現部分。
是可以互動而移動的。

click here to move the div!!

程式語法：

<style>
.test01cla {
border: 1px solid gray;
width: 30%;
transition: 1s;
}

.test01cla001 {
margin-left: 5em;
}
</style>
<div class="test01cla" id="myDIV">
 這是網頁內容
所要呈現部分。<br>
我是可以互動而移動的。
</div>
<br>
<br>
<div onclick="myFunction()" style="cursor: pointer; text-decoration: underline;">
click here to move the div!!<br>
</div>


<script>
function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("test01cla001");
}
</script>

click下列圖像

<style>
  .japics0521 {
    width: 32% !important;
    transition: 0.5s ;
  }
  .japics0521a {
    width: 99% !important;
  }
</style>

<img onclick="this.classList.toggle('japics0521a');" src="https://images.pexels.com/photos/12016709/pexels-photo-12016709.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="japics0521">

<img onclick="this.classList.toggle('japics0521a');" src="https://images.pexels.com/photos/12016708/pexels-photo-12016708.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="japics0521">

<img onclick="this.classList.toggle('japics0521a');" src="https://images.pexels.com/photos/12016707/pexels-photo-12016707.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="japics0521">


<br>