標籤:簡單 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簡單樣本