JS1-属性操作
属性操作语法
读操作：获取、找到
元素.属性名
写操作：“添加”、替换、修改
元素.属性名 = 新的值
元素.innerHTML => 读取元素里面所有的html代码
元素.innerHTML = 123; => 替换元素里面所有的html代码
实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oSelect = document.getElementById('select1');
var oImg = document.getElementById('img1');
var oP = document.getElementById('p1');
oBtn.onclick = function (){
// alert(oBtn.value); // '按钮'
// alert( oText.value );
// alert( oSelect.value );
// 字符串连接
// oText.value oSelect.value
// '刘伟' + '北京' => '刘伟北京'
// '刘伟' + '在' + '北京' => '刘伟在北京'
alert(oText.value + ' 在 ' + oSelect.value);
oText.value = oSelect.value;
oImg.src = oText.value;
oP.innerHTML = oText.value;
};
};
</script>
</head>
<body>
<input id="text1" type="text" />
<select id="select1">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些文字</p>
<img id="img1" src="img/1.jpg" width="200" />
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oSelect = document.getElementById('select1');
var oImg = document.getElementById('img1');
var oP = document.getElementById('p1');
oBtn.onclick = function (){
// alert(oBtn.value); // '按钮'
// alert( oText.value );
// alert( oSelect.value );
// 字符串连接
// oText.value oSelect.value
// '刘伟' + '北京' => '刘伟北京'
// '刘伟' + '在' + '北京' => '刘伟在北京'
alert(oText.value + ' 在 ' + oSelect.value);
oText.value = oSelect.value;
oImg.src = oText.value;
oP.innerHTML = oText.value;
};
};
</script>
</head>
<body>
<input id="text1" type="text" />
<select id="select1">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些文字</p>
<img id="img1" src="img/1.jpg" width="200" />
</body>
</html>
- 属性操作的注意事项
- 给元素添加class
- 行间样式与className
- 表单元素的type值修改
- float的兼容性问题
- 属性操作中的：[]
JS中不允许出现的特殊字符
不许出现"-",如：font-weight应为fontWeight
关键字、保留字
实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>替换皮肤
</title>
<script>
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oP=document.getElementById('p1');
oBtn1.onclick=function(){
oP.className='red';
};
oBtn2.onclick=function(){
oP.className='yellow';
}
</script>
<style>
.red { width:400px; border:10px solid #333; background:red; padding:20px; color:yellow; }
.yellow { width:500px; border:5px solid #333; background:yellow; padding:10px; color:red; }
</style>
</head>
<body>
<input id="btn1" type="button" value="红" />
<input id="btn2" type="button" value="黄" />
<p id="p1">what are you doing?</p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>替换皮肤
</title>
<script>
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oP=document.getElementById('p1');
oBtn1.onclick=function(){
oP.className='red';
};
oBtn2.onclick=function(){
oP.className='yellow';
}
</script>
<style>
.red { width:400px; border:10px solid #333; background:red; padding:20px; color:yellow; }
.yellow { width:500px; border:5px solid #333; background:yellow; padding:10px; color:red; }
</style>
</head>
<body>
<input id="btn1" type="button" value="红" />
<input id="btn2" type="button" value="黄" />
<p id="p1">what are you doing?</p>
</body>
</html>
相对路径的读取问题
所有的相对路径地址，颜色值 均不能作为判断条件
IE6、IE7、IE8不兼容
IE（styleFloat）、非IE（cssFloat）
实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oFD=document.getElementById("fudong");
var Obtn=document.getElementById("btn");
Obtn.onclick=function(){
oFD.style.float='right'; //会报错
oFD.style.styleFloat='right'; //IE
oFD.style.cssFloat='right'; //非IE
};
}
</script>
</head>
<body>
<input type="botton" id="btn"/>
<div id="fudong"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oFD=document.getElementById("fudong");
var Obtn=document.getElementById("btn");
Obtn.onclick=function(){
oFD.style.float='right'; //会报错
oFD.style.styleFloat='right'; //IE
oFD.style.cssFloat='right'; //非IE
};
}
</script>
</head>
<body>
<input type="botton" id="btn"/>
<div id="fudong"></div>
</body>
</html>
实例：任意修改DIV的值
判断
if(){} 在做这事之前，有个条件
if(){}else{} 2件事，根据条件，选一个来做
if(){}else if(){}else if(){}else if(){}
if(){}else if(){}else if(){}else if(){}else{}
The less routine the more life !
