標籤：console 瀏覽器 技術 html lang http school 使用 button
History對象
<html lang="en"><head> <meta charset="UTF-8"> <title>History對象</title></head><body><a href="Demo40.html">Demo40</a> <button onclick="forward()">下一個頁面</button></body><script src="../../js/history.js"></script></html>
結果圖：
Navigator對象
<html lang="en"><head> <meta charset="UTF-8"> <title>Navigator</title></head><body></body><script> console.log(navigator.appName); console.log(navigator.appVersion); console.log(navigator.userAgent); console.log(navigator.platform);</script></html>
定時器
<html lang="en"><head> <meta charset="UTF-8"> <title>定時器</title></head><body><button onclick="show()">五秒後顯示HelloWord</button><button onclick="cancelShow()">取消顯示HelloWord</button><button onclick="cancelShow2()">停止顯示HelloWord</button></body><script> // setTimeout 預設情況下，只會執行一次。 var hello; function show() { hello = setTimeout(function () { alert("HelloWord!"); }, 500); } function cancelShow() { clearTimeout(hello); }</script><!--<script> // setInterval 根據指定的時間，迴圈執行。 var hello2 = setInterval(function () { console.log("HelloWord!"); }, 1000); function cancelShow2() { clearTimeout(hello2); }</script>--></html>
結果圖：
confirm(對話方塊中顯示的純文字)
<html lang="en"><head> <meta charset="UTF-8"> <title>confirm(對話方塊中顯示的純文字)</title></head><body></body><script> var flag=confirm("確認樣刪除此資訊嗎？"); if(flag){ alert("刪除成功"); } else { alert("你取消了刪除"); } /*注意confirm與prompt和alert的區別*/</script></html>
結果圖：
DOM部分
getElement系列方法
<html lang="en"><head> <meta charset="UTF-8"> <title>getElement系列方法</title></head><body><p id="jereh">傑瑞集團</p><p name="jredu">傑瑞教育</p><p name="jredu">傑瑞教育</p><button onclick="change()">變！！</button><button onclick="change2()">變！！</button><button onclick="change3()">全部字型變大！！</button></body><script> /*getElementById 通過ID尋找元素，只會返回一個匹配的元素*/ function change() { document.getElementById("jereh").style.color = "red"; } /*getElementByClassName 通過class尋找元素，返回一個匹配的元素數組 getElementByName 通過name屬性尋找元素，返回一個匹配的元素數組*/ function change2() { // var result = document.getElementsByClassName("jredu"); var result = document.getElementsByName("jredu"); for (var i = 0; i <= result.length; i++) { result[i].style.fontSize = "30px"; } } /*getElementByTagName 通過標籤尋找元素，只會返回一個匹配的元素數組*/ function change3() { var result = document.getElementsByTagName("p"); for (var i = 0; i <= result.length; i++) { result[i].style.fontSize = "50px"; } }</script></html>
結果圖：
Attribute
<html lang="en"><head> <meta charset="UTF-8"> <title>Attribute</title></head><body><img src="../../img/tu.png" alt="" id="img"><br><button onclick="getUrl()">擷取圖片路徑資訊</button><button onclick="changeUrl()">改變圖片</button></body><script> var img = document.getElementById("img"); function getUrl() { /*var src = img.src;*//*絕對路徑*/ var src = img.alt="圖片不顯示"; var src = img.getAttribute("src");/*相對路徑*/ console.log("src"); } function changeUrl() { img.setAttribute("src","../../img/tu2.png");// img.src="../../img/tu2.png"; }</script></html>
結果圖：
點符號
<head> <meta charset="UTF-8"> <style> .lzw { text-align: center; font-size: 30px; color: red; } .yut{ margin-top: 300px; } </style> <title>點符號</title></head><body><p id="school">青島理工大學！</p><button onclick="change()">改變字型</button></body><script> var p = document.getElementById("school"); function change() { /*1:.style方法，逐個去給元素添加樣式，速度慢！*/ /*p.style.textAlign = "center"; p.style.color = "red"; p.style.fontSize = "50px";*/ /*2:className方法，直接給元素添加一個樣式類，速度快 * 前提是樣式類已經存在 * 元素已存在預設類的時候，再次添加元素需要使用+=”（空格）類名稱“*/// p.className +=" yut"; /*3:cssText 可以一次吧多個樣式寫在樣文本中*/ p.style.cssText = "color:red;font-size:40px;text-align:center"; }</script></html>
結果圖：
<html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head><body><p id="jredu">傑瑞教育</p></body><script> var p = document.getElementById("jredu"); var value = p.innerHTML; p.onclick = function () { alert(value) }</script></html>
結果圖：
行內樣式的擷取
<html lang="en"><head> <meta charset="UTF-8"> <style> #yut { color: red; } </style> <title>行內樣式的擷取</title></head><body><p id="yut" style="font-size: 40px; ">青島理工大學</p></body><script> var p = document.getElementById("yut"); // var style = p.style;/*.style 擷取的全部為行內樣式*//*瀏覽器種類的區分不適用瀏覽器對象，* 常使用的方法為判斷瀏覽器特有的屬性和方法*/ if (p.currentStyle) { var style = p.currentStyle; /*IE 擷取元素的所有樣式*/ } else { var style = window.getComputedStyle(p); /* W3C 擷取元素的所有樣式*/ } console.log(style.fontSize); console.log(style.color);</script></html>
結果圖：
JS學習記錄（補充四）
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
