一、HTML属性操作
指的是使用JavaScript来操作一个元素的HTML属性。在JavaScript中,有两种操作HTML元素属性的方式:一种是使用“对象属性”;另外一种是使用“对象方法”。
- 获取HTML属性值
- 设置HTML属性值
1、对象属性
(1)获取HTML属性值:obj.attr
obj是元素名,它一个DOM对象。所谓的DOM对象,指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。attr是属性名,对于一个对象来说,当然是通过点运算符“.”来获取它的属性值。
<--获取静态HTML中的属性值-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
alert(oBtn.id);
};
}
</script>
</head>
<body>
<input id="btn" class="myBtn" type="button" value="获取"/>
</body>
</html>
浏览器运行结果如下:
分析:想要获得某个属性的值,首先需要使用getElementById()等方法找到这个元素节点,然后才可以获取到该属性的值。oBtn.id表示获取按钮的id属性值。同样的,想要获取type属性值可以写成oBtn.type,以此类推。
<--获取动态DOM中的属性值-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
//动态创建一个按钮
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput);
//为按钮添加点击事件
oInput.onclick = function ()
{
alert(oInput.id);
};
}
</script>
</head>
<body>
</body>
</html>
例:获取文本框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oTxt = document.getElementById("txt");
alert(oTxt.value);
};
}
</script>
</head>
<body>
<input id="txt" type="text"/>
<input id="btn" type="button" value="获取"/>
</body>
</html>
结果:
例:获取单选框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oFruit = document.getElementsByName("fruit");
oBtn.onclick = function ()
{
//使用for循环遍历所有的单选框
for(var i=0;i<oFruit.length;i++)
{
//判断当前遍历的单选框是否选中(也就是checked是否为true)
if(oFruit[i].checked)
{
alert(oFruit[i].value);
}
}
};
}
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" checked/>苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>
例:获取复选框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oFruit = document.getElementsByName("fruit");
var str = "";
oBtn.onclick = function ()
{
for(var i=0;i<oFruit.length;i++)
{
if(oFruit[i].checked)
{
str += oFruit[i].value;
}
}
alert(str);
};
}
</script>
</head>
<body>
<div>
<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>
例:获取下拉菜单的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oSelect = document.getElementById("select");
oBtn.onclick = function ()
{
alert(oSelect.value);
};
}
</script>
</head>
<body>
<select id="select">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
</select>
<input id="btn" type="button" value="获取" />
</body>
</html>
(2)设置HTML属性值
语法:
obj.attr = "值";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
oBtn.value = "button";
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="修改" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oPic = document.getElementById("pic");
var flag = true;
oBtn.onclick = function ()
{
if (flag){
oPic.src = "img/2.png";
flag = false;
} else {
oPic.src = "img/1.png";
flag = true;
}
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="修改" /><br/>
<img id="pic" src="img/1.png"/>
</body>
</html>
点击“修改”后: