JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片

2020-12-29 12:30:20 阅读：140 来源： 互联网

标签：控件列表框 JavaScript JS var logo 图片属性

需求：改变列表框的值时候，图片发生改变：、

程序代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  <!--add()方法输出中文出现了乱码，这儿指定下编码方式-->
	<title>js</title>
	<script type="text/javascript" src="index.js"></script>
</head>
<body onl oad="initLogo()">
	<form>
		<img src="image/headLogo/1.png" id="img1">
		<select id="logo" onchange="selectLogo()"></select>
	</form>
</body>
</html>

// 初始化，图片旁边的下拉选择框
function initLogo(){
	var logo = document.getElementById("logo");
	for(var i=1;i<=5;i++){
		logo.options.add(new Option(i,i));
	}
}

function selectLogo(){
	var logo = document.getElementById("logo");
	var n = parseInt(logo.value);
	var logoImg = document.getElementById("img1");
	logoImg.src = "image/headLogo/"+n+".png";
}

效果：

注：经过总结发现：

（1）JS要想操作某个控件，必须先通过document.getElement***By***(“”)；获得控件对应的对象，才能后续操作；

（2）parseInt()这种类型转换函数经常用，尤其是在获取控件属性值时的时候类型转换一下，以确保后续使用这个值的时候不会出现类型问题；

（3）img是一个控件，这个控件有很多属性，可以在html中对其属性进行设置，也可以在JS中对其属性进行设置；JS的其他控件情况类同，慢慢加深熟练度啦；

标签：控件,列表框,JavaScript,JS,var,logo,图片,属性
来源： https://blog.csdn.net/csucsgoat/article/details/111888718

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

ICode9

JavaScript十五：表单六：图片，下拉列表框选不同值显示不同的图片