摘要
1.函数传参。
2.两种操作属性的方法。
3.style和className
一、函数传参
改变背景颜色
函数传参：参数就是占位符
- 什么时候用参数--函数里定不下来的东西
<strong>例子（1）改变div的颜色</strong>
<script>
function setColor(color) {
var oDiv = document.getElementById('div1');
oDiv.style.background = color;
}
</script>
<body>
<input type="button" value="变红" onclick="setColor('red')">
<input type="button" value="变黄" onclick="setColor('yellow')">
<input type="button" value="变绿" onclick="setColor('green')">
<div id="div1"></div>
</body>
<strong>例子（2）改变Div的任意样式</strong>
<script>
function setStyle(name, value) {
var oDiv = document.getElementById('div1');
oDiv.style[name] = value;
}
</script>
<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>
二、两种操作属性的方法
- 什么时候用：要修改的属性不固定
- 字符串和变量--区别和关系
<script>
function setText(name) {
var oTx = document.getElementById('txt1');
// 第一种操作属性的方法
// oTx.value = 'hhhhh';
// 第二种操作属性的方法
//oTx['value'] = 'ahkahdc';
oTx[name] = 'heheheheh'
// 第二种方法的优势在于属性名称是可以更改的 在JS中但凡是可以用点的都可以改成用[]，但是反过来不成立
}
</script>
<body>
<input id="txt1" type="text">
<input type="button" value="改变文字" onclick="setText('title')">
</body>
3、style和className
- 元素.style属性=xxx是修改行间样式
- 之后再修改className不会有效果
通过下边的代码运行，在浏览器中审查元素会发现：
style加样式 在行间
style取样式 在行间
<script>
// style加样式 行间
// style取样式 行间
function toRed() {
var oDiv = document.getElementById('div1');
//oDiv.style.background = 'red';
}
</script>
<body>
<input type="button" value="变红" onclick="toRed()">
<div id="div1"></div>
</body>
示例1
示例2
如果换成class又会出现另外的情形
我么先看一下在CSS中的样式优先级
-
*<标签<class<ID<行间
再给一个例子作为比较
<style>
#div1{ width:200px; height: 200px; border: solid 1px}
.box{background: green}
</style>
<script>
function toRed() {
var oDiv = document.getElementById('div1');
oDiv.className = 'box';
}
function toGreen() {
var oDiv = document.getElementById('div1');
oDiv.style.background = 'green';
}
</script>
<body>
<input type="button" value="变红" onclick="toRed()">
<input type="button" value="变绿" onclick="toGreen()">
<div id="div1"></div>
</body>
示例3
示例4
当先点击红色在点击绿色,div颜色正常显示，但是如果反过来就会发现先点击绿色后在点击变红则无法改变颜色，这就是因为行间样式的优先级大于class的原因，在审查元素的代码变化中也能看到。
<strong>因此在这里需要特别注意，对同一个元素，要么从头到尾一只操作class，要么一直操作style，而不要混着来，这样会避免一些很难查找到的问题</strong>
