亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

用按鈕控制標(biāo)簽的style

??? 2018-12-16 23:24:37 303
????:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>changeDIV</title> <style type="text/css"> #box{width: 100p
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>changeDIV</title>
<style type="text/css">
#box{width: 100px;height: 100px;background: red;margin: 20px 80px; }
</style>
</head>
<body>
<!-- 用按鈕控制div高度、寬度、顏色、重置、隱藏、顯示 -->
 <script type="text/javascript">
     var box
     window.onload=function () {
      box=document.getElementById('box')
     }
     function aa() {
      box.style.height="400px" //改變高度
     }
     function bb() {
      box.style.width="400px" //改變寬度
     }
     function cc() {
      box.style.background="pink" //改變顏色
     }
function dd() {
      box.style.height="100px" 
      box.style.width="100px"
      box.style.background="red"
     }
   function ee() {
      box.style.display="none" 
     }
     function ff() {
      box.style.display="block" 
     }
</script>
<div id="box"></div>
<input type="button" value="變高" onclick="aa()">
<input type="button" value="變寬" onclick="bb()">
<input type="button" value="變色" onclick="cc()">
<input type="button" value="重置" onclick="dd()">
<input type="button" value="隱藏" onclick="ee()">
<input type="button" value="顯示" onclick="ff()">
</body>
</html>

QQ截圖20181216232319.jpg

理解:用document.getElementById('box').style.屬性="屬性值" 結(jié)合各種事件作出對(duì)css樣式的更改。這個(gè)案例里有用到定義全局變量

本案例是通過(guò)ID查找HTML,還有
通過(guò)class:document.getElementsByClassName("calss名");
通過(guò)標(biāo)簽名(tag name):document.getElementsByTagName("標(biāo)簽名");

總結(jié):

1、顯示隱藏利用css的display很巧妙。

2、Data 日期和事件,最深刻的是計(jì)數(shù)是從0開(kāi)始,特別是月份。

3、通過(guò)幾個(gè)案例簡(jiǎn)單了解了,function () 函數(shù)的用法。

4、這個(gè)案例也可以配合很多事件,移動(dòng)到元素移開(kāi)元素,等等,課后要把其他未演示的事件,都測(cè)一遍。

以下為前面學(xué)的重要知識(shí)點(diǎn):

5、innerHTML可以改變HTMl的內(nèi)容。

6、變量分為全局和局部變量,生存周期(從聲明時(shí)開(kāi)始,局部變量函數(shù)運(yùn)行后刪除,全局變量頁(yè)面關(guān)閉刪除)

7、 3個(gè)提示框 alert() 警告框 confirm() 確認(rèn)框prompt() 提示框

8、數(shù)組Array,還有數(shù)組下標(biāo),及數(shù)組操作函數(shù):合并concat() 排序reverse() sort() 增,刪,改splice() 查slice(起始位置,end)
末尾添加返回長(zhǎng)度push() 刪除返回末尾元素pop()

9、類(lèi)型轉(zhuǎn)化 字符串轉(zhuǎn)數(shù)組 數(shù)組轉(zhuǎn)字符串

10、switch for()  while if else 等。

總體感覺(jué)和php語(yǔ)法都差不多,都是這些東西,JS是弱語(yǔ)言,在瀏覽器可以直接輸出,交互很方便。收益匪淺,準(zhǔn)備看完這個(gè),在把朱老師講的JS再過(guò)一遍,加強(qiáng)加強(qiáng)。

?? ???:滅絕師太?? ??:2018-12-17 09:18:17
???? ??:是的,js還是很強(qiáng)大的,多學(xué)習(xí)還是很有必要的,繼續(xù)加強(qiáng)吧!

??? ??

?? ??