1.操作标签值
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<script type="text/javascript">
function changeValue(id){
var oTxt = document.getElementById(id);
if(id == "in1")
oTxt.value = "This is a input1!";
else
oTxt[‘value‘] = "This is a input2"
}
</script>
<head>
<title>操作属性</title>
</head>
<body>
<input type="text" id="in1">
<button type="button" onclick="changeValue(‘in1‘)">设置值</button>
<input type="text" id="in2">
<button type="button" onclick="changeValue(‘in2‘)">设置值</button>
</body>
</html>
结果：
2.标签的样式操作
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.box{
background-color: green;
}
</style>
<script type="text/javascript">
function toRed(){
var oDiv = document.getElementById("div1");
oDiv.style.background = "red";
}
function toGreen(){
var oDiv = document.getElementById("div1");
oDiv.className = "box";
}
</script>
<head>
<title>操作属性</title>
</head>
<body>
<button type="button" onclick="toRed()">变红</button>
<button type="button" onclick="toGreen()">变绿</button>
<div id="div1"></div>
</body>
</html>
通过style属性或者是className可以操作一个标签的样式，但是两者是有区别的sytle修改的是标签的行间样式，而className则为一个标签添加了一个class类而已。
下图中先点变绿后点变红会起作用，但是先点变红后点变绿则没有效果。
3.提取行间事件
通常可以在行间添加某个事件 <button type="button" onclick="toRed()">变红</button> ,但是在开发过程中基本上是将html css 和分离的，所以我们最好将行间的css和js提取出来
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<style type="text/css">
div{
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oBtn1 = document.getElementById(‘btn1‘);
var oBtn2 = document.getElementById(‘btn2‘);
var oDiv = document.getElementById(‘div1‘);
oBtn1.onclick = function (){
oDiv.style.background = ‘red‘;
}
oBtn2.onclick = function (){
oDiv.style.background = ‘green‘;
}
}
</script>
<head>
<title>操作属性</title>
</head>
<body>
<button id="btn1" type="button">变红</button>
<button id="btn2" type="button">变绿</button>
<div id="div1"></div>
</body>
</html>
浏览器在解析页面时，是没读一行解释一行，而代码中window.onload是当页面加载完后才执行js代码。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<script type="text/javascript">
window.onload = function (){
var oBtn = document.getElementById(‘btn‘);
var flage = false;
oBtn.onclick=function (){
var oDiv = document.getElementById(‘div1‘);
var oTags = oDiv.getElementsByTagName(‘input‘);
var i=0;
if(flage == false){
while(i < oTags.length)
oTags[i++].checked = true;
flage = true;
}else{
while(i < oTags.length)
oTags[i++].checked = false;
flage = false;
}
}
}
</script>
<head>
<title>操作属性</title>
</head>
<body>
<button id="btn" type="button">全选</button><br>
<div id="div1">
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
</div>
</body>
</html>
4.选项卡的实现
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
<title>操作属性</title>
<style type="text/css">
#div2 div{
width: 100px;
height: 100px;
background-color: gray;
display: none;
}
.active{
background-color: orange;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oDiv1 = document.getElementById(‘div1‘);
var oDiv2 = document.getElementById(‘div2‘);
var oBtns = oDiv1.getElementsByTagName(‘button‘);
var oDivs = oDiv2.getElementsByTagName(‘div‘);
for(var i=0;i < oBtns.length;i++){
oBtns[i].index = i;
oBtns[i].onclick = function(){
for(var j=0;j<oBtns.length;j++){
oBtns[j].className = ‘‘;
oDivs[j].style.display = ‘none‘;
}
this.className = ‘active‘;
oDivs[this.index].style.display = "block";
}
}
}
</script>
</head>
<body>
<div id="div1">
<button type="button" id="btn1" class="active" >按钮1</button>
<button type="button" id="btn2" >按钮2</button>
<button type="button" id="btn3" >按钮3</button>
<button type="button" id="btn4" >按钮4</button>
</div><br>
<div id="div2">
<div style="display:block;">111</div>
<div >222</div>
<div >333</div>
<div >444</div>
</div>
</body>
</html>
更加简单的方式
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
<title>操作属性</title>
<style type="text/css">
#div2{
width: 100px;
height: 100px;
background-color: gray;
}
.active{
background-color: orange;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oTxts = [‘1111‘, ‘2222‘, ‘3333‘, ‘4444‘];
var oDiv1 = document.getElementById(‘div1‘);
var oBtns = oDiv1.getElementsByTagName(‘button‘);
var oDiv2 = document.getElementById(‘div2‘);
for(var i=0;i < oBtns.length;i++){
oBtns[i].index = i;
oBtns[i].onclick = function(){
for(var j=0;j<oBtns.length;j++){
oBtns[j].className = ‘‘;
}
this.className = ‘active‘;
oDiv2.innerHTML = oTxts[this.index];
}
}
}
</script>
</head>
<body>
<div id="div1">
<button type="button" id="btn1" class="active" >按钮1</button>
<button type="button" id="btn2" >按钮2</button>
<button type="button" id="btn3" >按钮3</button>
<button type="button" id="btn4" >按钮4</button>
</div><br>
<div id="div2">1111</div>
</body>
</html> <!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
<title>操作属性</title>
<style type="text/css">
#div2{
width: 100px;
height: 100px;
background-color: gray;
}
.active{
background-color: orange;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oTxts = [‘1111‘, ‘2222‘, ‘3333‘, ‘4444‘];
var oDiv1 = document.getElementById(‘div1‘);
var oBtns = oDiv1.getElementsByTagName(‘button‘);
var oDiv2 = document.getElementById(‘div2‘);
for(var i=0;i < oBtns.length;i++){
oBtns[i].index = i;
oBtns[i].onclick = function(){
for(var j=0;j<oBtns.length;j++){
oBtns[j].className = ‘‘;
}
this.className = ‘active‘;
oDiv2.innerHTML = oTxts[this.index];
}
}
}
</script>
</head>
<body>
<div id="div1">
<button type="button" id="btn1" class="active" >按钮1</button>
<button type="button" id="btn2" >按钮2</button>
<button type="button" id="btn3" >按钮3</button>
<button type="button" id="btn4" >按钮4</button>
</div><br>
<div id="div2">1111</div>
</body>
</html>
5.数组的使用
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<head>
<title>操作属性</title>
<style type="text/css">
#div2{
width: 100px;
height: 100px;
background-color: gray;
}
.active{
background-color: orange;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oTxts = [‘1111‘, ‘2222‘, ‘3333‘, ‘4444‘];
var oDiv1 = document.getElementById(‘div1‘);
var oBtns = oDiv1.getElementsByTagName(‘button‘);
var oDiv2 = document.getElementById(‘div2‘);
for(var i=0;i < oBtns.length;i++){
oBtns[i].index = i;
oBtns[i].onclick = function(){
for(var j=0;j<oBtns.length;j++){
oBtns[j].className = ‘‘;
}
this.className = ‘active‘;
oDiv2.innerHTML = oTxts[this.index];
}
}
}
</script>
</head>
<body>
<div id="div1">
<button type="button" id="btn1" class="active" >按钮1</button>
<button type="button" id="btn2" >按钮2</button>
<button type="button" id="btn3" >按钮3</button>
<button type="button" id="btn4" >按钮4</button>
</div><br>
<div id="div2">1111</div>
</body>
</html>
时间： 2024-10-16 04:26:24