网页换肤和 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> ```