函數(shù)傳參
-
改變背景顏色
-函數(shù)傳參：參數(shù)就是站位符
什么時(shí)候用傳參——函數(shù)里定不下來(lái)的東西 -
改變div的任意樣式
-操縱屬性的第二種方式
(1) 什么時(shí)候用：要修改的屬性不固定
(2) 字符串和變量——區(qū)別和關(guān)系
-將屬性名作為參數(shù)傳遞 -
style與className
-元素.style.屬性=xxx是修改行間樣式
-之后再修改className不會(huì)有效果
例如萎攒，改變背景顏色：
方法一：沒(méi)有函數(shù)傳參的情況
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn1">變綠</button>
<button id="btn2">變黃</button>
<button id="btn3">變黑</button>
<div id="div1">
</div>
<script>
var oDiv = document.getElementById('div1');
var oBtn = document.getElementsByTagName('button');
oBtn[0].onclick = function(){
oDiv.style.background = "green";
}
oBtn[1].onclick = function(){
oDiv.style.background = "yellow";
}
oBtn[2].onclick = function(){
oDiv.style.background = "black";
}
</script>
</body>
</html>
方法二：通過(guò)函數(shù)傳參的情況
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button onclick="setColor('green')">變綠</button>
<button onclick="setColor('yellow')">變黃</button>
<button onclick="setColor('black')">變黑</button>
<div id="div1">
</div>
<script>
var oDiv = document.getElementById('div1');
function setColor(color){
oDiv.style.background = color;
}
</script>
</body>
</html>
操作屬性的兩種方法：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作屬性的方法</title>
</head>
<body>
<input id="txt1" type="text">
<button onclick="setText()">改變文字</button>
<script>
function setText(){
var oTxt = document.getElementById('txt1');
//第一種操作屬性的方法，就是.點(diǎn)
// oTxt.value = 'aaaaa';
//第二種操作屬性的方法扼褪，就是[ ],這種方式可方便傳參數(shù)
oTxt['value'] = 'aaaaa';
}
</script>
</body>
</html>
div改變樣式：(傳遞兩個(gè)參數(shù))
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button onclick="setStyle('width','400px')">變寬</button>
<button onclick="setStyle('height','600px')">變高</button>
<button onclick="setStyle('background','yellow')">變黃</button>
<div id="div1">
</div>
<script>
var oDiv = document.getElementById('div1');
function setStyle(name,value){
oDiv.style[name] = value;
}
</script>
</body>
</html>
