JS簡單樣本

來源:互聯網
上載者:User

標籤:簡單   lan   pytho   onclick   charles   tps   height   http   .com   

首先感謝海棠學院提供的高品質視訊資源

學習總是一個由簡單到難的過程,由淺入深,一步一個腳印,將學過的點玩的深入一點,才能有所進步,單學習總是枯燥而乏味的,切忌焦躁;

範例程式碼另存放在github:https://github.com/CharlesQQ/Python_Data_Analyse/tree/master/js%E5%AD%A6%E4%B9%A0

1.看一個簡單的例子,有如下需求

    需求:點擊按鈕,背景變為黃色;    分析:    步驟:    1、拿到按鈕       document.getElementByid("btn")    2、給按鈕添加點擊事件      按鈕.onclick= function(){      }      修改屬性      元素.style.樣式=值;

 

實現代碼:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        #box{            width: 100px;            height: 100px;            background: #f00;        }    </style></head><body><input type="button" name="btn" id="btn" value="按鈕" /><div id="box"></div><script>    document.getElementById(‘btn‘).onclick = function(){      document.getElementById(‘btn‘).style.background=‘red‘;    };</script></body></html>

  

2.JS簡單樣本2

需求:

    需求:    1、點擊按鈕,讓div的高度和寬度變化;    分析:        步驟:    1、拿到按鈕       document.getElementByid("btn")    2、給按鈕添加點擊事件        a、拿到要改的元素          document.getElementById(‘box‘)        b、修改它的寬度和高度          div.style.width=值          div.style.height=值          按鈕.onclick= function(){          }          修改屬性:元素.style.樣式=值;

實現代碼:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        #box{            width: 100px;            height: 100px;            background: #f00;        }    </style></head><body><input type="button" name="btn" id="btn" value="按鈕" /><div id="box"></div><script>    document.getElementById(‘btn‘).onclick = function(){      document.getElementById(‘box‘).style.width = ‘200px‘;      document.getElementById(‘box‘).style.height = ‘200px‘;    };</script></body></html>

 

  

JS簡單樣本

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.