函數傳參 · JavaScript學習記錄

### 函數傳參 - 改變背景顏色 - 函數傳參：參數就是占位符 - 函數里面變量用傳參 - 改變 div 的任意樣式 - 操縱屬性的第二種方式 - 要修改的屬性不確定時：` 元素.style[ 變量/字符串 ] = 變量/字符串 ` - JS 中用 `.` 的地方都可以用 `[]` 代替; - 字符串變量區別和關系：帶引號是字符串，不帶是變量 - 將屬性名作為參數傳遞 - style 與 className - ` 元素.style.屬性 = 變量/字符串 ` - style 是修改行內樣式 - 行內樣式優先級最高，之后再修改 className 不會有效果 - 建議：只操作一種樣式，要么只操作 style ，要么只操作 className - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函數傳參</title> <style> div { display: block; background: red; width: 100px; height: 100px; font-size: 16px; } .div2 { display: block; background: grey; width: 100px; height: 100px; } </style> <script> // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } // div1 變綠 function toGreen() { get('div1').style.background='green'; } // div1 變藍 function toblue() { get('div1').style.background='blue'; } // div1 變紅 function toRed() { get('div1').style.background='red'; } // 點擊循環變色 var i = 0; function changeColor() { console.log('i=',i) if (i == 0) { toGreen(); i++; console.log('i=',i) return; } if (i == 1) { toblue(); i++; console.log('i=',i) return; } if (i == 2) { toRed(); i = i - 2; console.log('i=',i) return; } } // 函數傳參 function toColor(color, width) { get('div1').style.background = color; get('div1').style.width = width; } // 將屬性名作為參數傳遞 function chgName(name, width) { // get('div1').style.name = width; // name 會被當作屬性賦值 get('div1')['style'][name] = width; // 數組可以加字符串或者變量 } // 樣式優先級 function chgClass(className) { get('div1').className = className; } </script> </head> <body>  <input type="button" onclick="changeColor()" value="循環">  <input type="button" onclick="toColor('green', '200px')" value="變綠"> <input type="button" onclick="toColor('blue', '300px')" value="變藍"> <input type="button" onclick="toColor('red', '400px')" value="變紅"> <input type="button" onclick="chgName('height', '200px')" value="變高"> <input type="button" onclick="chgClass('div2')" value="class變灰"> <div id="div1"></div> </body> </html> ```