44,dom编外篇，为下拉框找到被选中的选项
作者：互联网
<head>
<meta charset="UTF-8">
<title>4.操作标签class</title>
<style>
.bg-color1{
background-color: #54f5ff;
}
.bg-color2{
background-color: firebrick;
}
.bg-color3{
background-color: blue;
}
.color1{
color: fuchsia;
}
.color2{
color: indigo;
}
.font-family1{
font-family: 宋体;
}
.font-family2{
font-family: 微软雅黑;
}
</style>
</head>
<body>
<div id="no1">
<div>测试效果1</div>
<div>测试效果2</div>
<div>测试效果3</div>
</div>
<br>
<div>
<select id="choose">
<option value="0" >效果1</option>
<option value="1" >效果2</option>
<option value="2" >效果3</option>
</select>
<div id="show">显示class</div>
</div>
<div id="btn">
<input type="button" value="添加背景色">
<input type="button" value="添加字体颜色">
<input type="button" value="添加字体风格">
<hr>
<input type="button" value="追加背景色">
<input type="button" value="显示class">
<input type="button" value="追加字体风格">
</div>
</body>
<script>
/*------------------------------------追加class-----------------------------------------*/
var mark;
/*function changed(){
//var mark;
mark=this.value;
}*/
document.getElementById("choose").onclick=function () {
mark=this.value;
}
document.getElementById("btn").getElementsByTagName("input")[3].onclick=function () {
document.getElementById("no1").getElementsByTagName("div")[mark].className+="font-family1";
}
document.getElementById("btn").getElementsByTagName("input")[4].onclick=function () {
//document.getElementById("no1").getElementsByTagName("div")[mark].
document.getElementById("show").innerHTML=mark;
}
/*document.getElementById("btn").getElementsByTagName("input")[5].onclick=function () {
document.getElementById("no1").getElementsByTagName("div")[mark].className="font-family1";
}*/
/*-------------------------------------添加class------------------------------------*/
/*如果直接写=就会把原来的class清除*/
document.getElementById("btn").getElementsByTagName("input")[0].onclick=function () {
document.getElementById("no1").getElementsByTagName("div")[0].className="bg-color1";
}
document.getElementById("btn").getElementsByTagName("input")[1].onclick=function () {
document.getElementById("no1").getElementsByTagName("div")[1].className="color1";
}
document.getElementById("btn").getElementsByTagName("input")[2].onclick=function () {
document.getElementById("no1").getElementsByTagName("div")[2].className="font-family1";
}
</script>
标签：function,font,dom,getElementsByTagName,44,mark,getElementById,document,下拉框 来源： https://www.cnblogs.com/wgbl/p/16135728.html