ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

44,dom编外篇,为下拉框找到被选中的选项

2022-04-12 16:31:16  阅读:141  来源: 互联网

标签:function font dom getElementsByTagName 44 mark getElementById document 下拉框


<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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有