2018.10.11作业

小陆666

于 2018-10-11 18:21:13 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lth4520067/article/details/83016737

本文介绍了一种使用JavaScript动态调整网页元素样式的简单方法，通过下拉菜单选择颜色和字体大小，实时改变页面中段落文本的显示效果。此方法适用于快速原型设计和用户体验测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<select id="color" onchange="changeColor()">
		<option value="red">red</option>
		<option value="yellow">yellow</option>
		<option value="green">green</option>
	</select>
	<select id="fontSize" onchange="changeFontSize()">
		<option value="50px">50px</option>
		<option value="100px">100px</option>
		<option value="200px">200px</option>
	</select>

<p id="p1">上善若水</p>
</body>

<script type="text/javascript">	
	function changeColor(){ 
			var a=document.getElementById("color").value;
			var b=document.getElementById("p1");
			b.style.color=a;
	}
	changeColor();

	function changeFontSize(){
			var a=document.getElementById("fontSize").value;
			var b=document.getElementById("p1");
			b.style.fontSize=a;
	}
	changeFontSize();


</script>
</html>