第22天：js改變樣式效果

最後更新：2017-09-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：center 改變樣式擷取列印 com blog 體驗 var span

一、輸出語句

1、alert:彈出警示框（用的非常少，使用者體驗不好）
完整寫法：window.alert（“執行語句”）；
window對象，視窗，一般情況可省略
alert(123);

2、console控制台輸出（使用者看不見）
一般用於測試用
console.log();控制台輸出，普通輸出語句
console.warn();控制台警示
console.error();錯誤提示

3、document.write()；文檔列印輸出，直接在文檔中顯示
document文檔對象，不可省略

擷取對象方法：
document.getElementById("demo");

二、變數

1、變數名必須以字母、底線、貨幣符號$開頭
2、變數名中不能有空格
3、多個變數聲明：var num=1,num=2,num=3;

4、變數分為全域變數和局部變數

全域變數：
1、在最外層聲明的變數
2、在函數體內部，但是沒有聲明var的也是全域變數
局部變數：
在函數體內部聲明的變數

局部變數優先於全域變數。函數若不調用，可跳過執行。

三、事件

事件三要素：事件來源、事件、事件處理常式
事件來源：要觸發的對象
事件：滑鼠事件
事件處理常式：發生了什麼
事件來源.事件=function(){事件處理函數}

隱藏事件：
display:none;隱藏了不佔位置
visibility:hidden;隱藏佔位置
overflow:hidden;隱藏超出的部分

入口函數：window.onload=function(){
內部放js代碼
}//頁面載入完後執行js部分

百度換膚執行個體：

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>百度換膚效果</title> 6     <style> 7         *{ 8             margin: 0; 9             padding: 0;10         }11         body{12             background: url("images/1.jpg") top center;13         }14         .box{15             height: 200px;16             background: rgba(255,255,255,.3);17             text-align: center;18             padding-top:50px;19         }20         .box img{21             cursor: pointer;22         }23     </style>24     <script>25         window.onload=function(){26             var pic1=document.getElementById("pic1");27             var pic2=document.getElementById("pic2");28             var pic3=document.getElementById("pic3");29             pic1.onclick=function(){30                 document.body.style.backgroundImage="url(images/1.jpg)";31             }32             pic2.onclick=function(){33                 document.body.style.backgroundImage="url(images/2.jpg)";34             }35             pic3.onclick=function(){36                 document.body.style.backgroundImage="url(images/3.jpg)";37             }38         }39     </script>40 </head>41 <body>42 <div class="box">43     <img src="images/1.jpg" alt="" width="150" id="pic1">44     <img src="images/2.jpg" alt="" width="150" id="pic2">45     <img src="images/3.jpg" alt="" width="150" id="pic3">46 </div>47 </body>48 </html>

運行效果：

第22天：js改變樣式效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More