- 当函数里有定不下来的东西是可以使用传参
1.改变背景颜色
- HTML+css
#div1{
width: 200px; height: 200px; background:red;}
<body>
<input type = "button" value = "变绿" onclick = "setColor('green');"/>
<input type = "button" value = "变绿" onclick = "setColor('yellow');"/>
<input type = "button" value = "变绿" onclick = "setColor('black');"/>
</body>
- js
<script>
function setColor(color)
{
var oDiv = document.getElementById('div1');
oDiv.style.background = color;
}
</script>
2.改变div任意样式
- 操作属性
<style>
#div1{
width: 200px; height: 200px; background:red;}
</style>
<script>
function setStyle(name, value) //name的值为value
{
var oDiv = document.getElementById('div1');
oDiv.style[name] = value; //在参数值不确定的情况下使用‘[]’，可以使name表示不同的参数名，如可表示为width、height
}
</script>
</head>
<body>
<input type="button" value="变宽" onclick = "setStyle('width', '400px')">
<input type="button" value="变高" onclick = "setStyle('height', '400px')">
<input type="button" value="变绿" onclick = "setStyle('background', 'green')">
<div id = "div1"></div>
</body>
3.style与ClassName
- 元素.style.属性 = xxx ：是修改了行间样式
- 之后在通过ClassName修改样式不会有效果
- 优先级：行间样式>ClassName
- 使用style来修改样式就不要用ClassName了
- 代码
<style>
#div1{
width: 200px; height: 200px; background:red;}
.box{
background: green;}
</style>
<script>
function toRed()
{
var oDiv = document.getElementById('div1');
oDiv.style.background = 'red';
}
function toGreen()
{
var oDiv = document.getElementById('div1');
oDiv.className = 'box';
}
</script>
</head>
<body>
<input type="button" value="变红" onclick = "toRed()">
<input type="button" value="变绿" onclick = "toGreen()">
<div id = "div1"></div>
</body>
1.没有点击任何按钮时
2.点击了“变红”按钮，div1添加了行间样式：style=“background:red;”
3.再点击“变绿”按钮，div添加ClassName，拥有了样式：.box{background: green;}，但div1没有变绿
3.arguments（可变参、不定参）
- 参数的个数可变，参数数组
1.利用arguments进行多个数的加法运算
function sum(){
var result = 0;
for(var i = 0; i < arguments.length; i++){
result+=arguments[i];
}
return result;
}
alert(sum(12,34,56));
2.CSS函数
- css(oDiv,‘width’)：获取样式
- css(oDiv,‘width’,‘200px’)：设置样式
<script>
function css(obj, name, value)
{
if(arguments.length==2) //获取
{
return obj.style[name]; //获取div1（oDiv）的宽度（width）
}
else //设置样式
{
obj.style[name]=value; //把div1（oDiv）的背景颜色（background）设置为绿色（green）
}
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
alert(css(oDiv, 'width')); //obj = 'oDiv'; name = 'width';
//css(oDiv, 'background', 'green'); //obj = 'oDiv'; name = 'background'; value = 'green';
};
</script>
</head>
<body>
<div id="div1" style="width:200px; height:200px; background:red;">
</div>
</body>
4.获取非行间样式currentStyle（不能用来设置）
- obj.currentStyle[attr]
- getComputedStyle(obj.false)[attr]
1.css
<style>
#div1 {
width:200px; height:200px; background:red;}
</style>
<body>
<div id="div1">
</div>
2.js
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
//alert(oDiv.style.width); //style:用来获取行间样式
//兼容IE
//alert(oDiv.currentStyle.width);
//兼容Chrome、FF
//alert(getComputedStyle(oDiv, false).width);
//alert(oDiv.currentStyle);
//解决浏览器兼容问题，
if(oDiv.currentStyle)
{
//IE
alert(oDiv.currentStyle.width);
}
else
{
//FF
alert(getComputedStyle(oDiv, false).width);
}
};
</script>
- 多数不兼容问题都采取放入
if(...)else(...)循环的方式来解决 - 这样只能获取单一样式的，例如：
width，height，background、border这样的复合样式就不能获取 - 想要获取背景颜色，需要用到
backgroundColor