使用CSS 語法來代替 javascript 的 onclick功能

使用CSS 語法來代替 javascript 的 onclick功能

請按我或下面區塊產生互動：div字變顏色...

這裡是要變化顏色的字

123

語法

 

 <style>
input#test1216:checked +label >div {
color: red;
}
</style>
<input id="test1216" type="checkbox"><label for="test1216">請按我產生互動：div字變顏色...
<div  style="border: 1px dotted gray; font-size: 1.2em; font-weight: bold;">這裡是要變化顏色的字
</div>


</label><br>
123
<br>

滑動頁面到你想要的地方

請按這裡，會往下跑到一個DIV。
這個功能是滑動到你想讓讀者看到內容物的功能。

這是要秀出來的目標物。

語法：

<br>
<div onclick="myFunction220219b()" style="border: 1px solid gray; line-height: 2em; cursor: pointer;">
請按這裡，會往下跑到一個DIV。<br>
這個功能是滑動到你想讓讀者看到內容物的功能。
</div>
<br>
<br>
<br>
<div id="divFirst0229a" style="border: 1px solid red;">
這是要秀出來的目標物。
</div>
<br>
<br>


<script>
  function myFunction220219b() {
 
  document.getElementById("divFirst0229a").scrollIntoView({behavior: "smooth", block: "start"});
  }
</script>

按一下互動：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>