網頁換膚和 if 判斷 · JavaScript學習記錄

### 網頁換膚和 if 判斷 - 網頁換膚 - 土豆網 “開燈” “關燈效果” - 任何標簽都可以加 ID ，包括 link - 任何標簽的屬性，都可以修改 - HTML 里面怎么寫，JS 里面就怎么寫 - if 判斷 - 特效實現原理 - if 基本形式 - JS 里面 ` = 賦值， == 判斷` - 為 a 鏈接添加 JS - ` <a href="javascript:;"></a> ` - className 的使用 - ` class ` 是關鍵字，所以用 ` className ` 代替 - 其它 HTML 里面怎么寫，JS 里面就怎么寫 - 代碼 ```html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link id="link1" rel="stylesheet" type="text/css" href="css/grey.css"> <script> function changeColor() { if (document.getElementById('b1').value == '關燈') { document.getElementById('link1').href = 'css/black.css'; document.getElementById('b1').value = '開燈'; console.log('black') } else { document.getElementById('link1').href = 'css/grey.css'; document.getElementById('b1').value = '關燈'; console.log('bl2:', document.getElementById('link1').href) } } function changeText() { document.getElementById('text1').value = '456'; document.getElementById('text1').title = '文字1'; } function showHide() { var div2 = document.getElementById('div2'); if(div2.style.display == 'block') { div2.style.display ='none'; console.log('1'); } else { div2.style.display = 'block'; div2.style.background = 'blue'; } console.log('display:', div2.style.display); } function class1() { var div = document.getElementById('div4'); div.className='div5'; div.id='div5'; } </script> </head> <body>  <input id="b1" type="button" onclick="changeColor()" value="關燈"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <input type="button" value="顯示隱藏div2" onclick="showHide()"> <br>  <input id="text1" type="text" value="123"> <input type="button" value="改文字" onclick="changeText()"> <br>  <a href="javascript:;">javascript:;</a>  <div id="div4">4</div> <input type="button" value="className" onclick="class1()"> </body> </html> ```