首頁 > 開發者 > JavaScript
標籤：char class 就是 練手 替換 png onclick pre size
1、做一個小表徵圖在介面中通過按鈕可以變大 變小 變色 變圓
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>改變圖片</title> <style> .box{//設定顯示的盒子的屬性 width:100px; height:100px; background-color: red; } button{//設定你的按鈕的屬性 width:20px; height:20px; font-size: 5px; /*background-color: green;*/ } </style></head><body><button type="button" id="big">變大</button><button type="button" id="small">變小</button><button type="button" id="changeColor">變色</button><button type="button" id="circle">變圓</button><div class="box" id="hezi"></div><script type="text/javascript"> window.onload = function(){ function $(id){ //把擷取id封裝成一個函數 return document.getElementById(id); } $(‘big‘).onclick = function(){//id為big的那個按鈕對盒子進行操作 $(‘hezi‘).style.width = ‘300px‘; $(‘hezi‘).style.height = ‘400px‘; } $(‘small‘).onclick = function(){ $(‘hezi‘).style.width = ‘50px‘; $(‘hezi‘).style.height = ‘50px‘; } $(‘changeColor‘).onclick = function(){ // $(‘hezi‘).style.color = ‘yellow‘; //錯誤的寫法 你上面定義的是background這也應該是background $(‘hezi‘).style.backgroundColor = ‘yellow‘; } $(‘circle‘).onclick = function(){ $(‘hezi‘).style.borderRadius = ‘50%‘; //變圓就是設定成50% } }</script></body></html>改變一個介面中的盒子大小顏色
2、當你的滑鼠移動到一個圖片上的時候會替換成另外一個圖片 當移走的時候又會變成另外一個
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>替換介面圖片</title></head><body> <div class="box"> <img src="./2_01.png" alt="照相機" id="ca" title="哈哈哈"> </div> <script> window.onload = function(){ var oImg = document.getElementById(‘ca‘); oImg.onmouseover = function(){ oImg.src = ‘./2_02.png‘; var myDate = new Date(); // console.log(myDate.toLocaleString()); // oImg.title = myDate.toLocaleString(); console.log(myDate.toLocaleString()); oImg.title = myDate.toLocaleString(); } oImg.onmouseout = function(){ oImg.src = ‘./2_01.png‘; } } </script></body></html>變換圖片
javascript小練手
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
