diankb.cn | 编程基础




标签元素的应用



      本章讲解标签idclass类别、neme名、type类型、value值之间的关系和应用。

id元素



<style type="text/css">
#weiyi{
color: #FF1700;
/*CSS设置weiyi为红色*/
}
</style>

<!--唯一的div-->
<div id="weiyi">内容</div>


<script type="text/javascript">
//JS修改weiyi内容

//获取weiyi的内容
var huoqu=document.getElementById("weiyi").innerHTML;
//修改weiyi的内容
document.getElementById("weiyi").innerHTML="输出HTML内容";
document.getElementById("weiyi").innerText="输出文本内容";

</script>



class元素



<style type="text/css">
.henduo{
color: #FF1700;
/*CSS设置henduo为红色*/
}
</style>

<!--很多的div-->
<div class="henduo">内容1</div>

<div class="henduo">内容2</div>

<script type="text/javascript">

//修改第一个henduo的内容
document.getElementsByClassName("henduo")[0].innerHTML = "向第一个henduo类输出HTML内容";
//修改第二个henduo的内容
document.getElementsByClassName("henduo")[0].innerText = "向第二个henduo类输出文本内容";

</script>



type元素


<!--普通文本-->
<input type="text" value="值">
<!--密码输入-->
<input type="password" value="值">
<!--复选框-->
<input type="checkbox" value="值">
<!--单选按钮-->
<input type="radio" value="值">
<!--文件上传-->
<input type="file" value="值">
<!--提交表单-->
<input type="submit" value="值">
<!--重置表单-->
<input type="reset" value="值">
<!--普通按钮-->
<input type="button" value="值">
<!--指定JS脚本类型-->
<script src="abc.js" type="text/javascript"></script>
<!--指定CSS类型-->
<style type="text/css"></style>



value元素


<!--普通文本-->
<input id="weiyi" type="text" value="值">


<script type="text/javascript">
//获取weiyi的内容
var huoqu=document.getElementById("weiyi").value;
//修改weiyi的内容
document.getElementById("weiyi").value="修改输入框或文本框内容";

</script>