标签: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. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。