通过单击字号中的“大”“中”“小”来切换不同大小的字号和通过单击不同颜色方框的图像按钮来切换不同的背景色

最新推荐文章于 2020-12-02 22:58:37 发布

原创

最新推荐文章于 2020-12-02 22:58:37 发布 · 689 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #颜色切换 #字号切换

通过单击字号中的“大”“中”“小”超链接来切换不同大小的字号，

通过单击“视力保护色”后面的不同颜色方框的图像按钮来实现切换不同的背景颜色。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>改变字号及背景颜色</title>
	<script type="text/javascript">
		function doZoom(size) {
			document.getElementById('zoom').style.fontSize = size + 'px';
		}
		function ChangeColor(ColorName) {
			document.getElementById("c").style.background = ColorName;
		}
	</script>
	
</head>
<body id="c">
	<span>字号：[
		<a href='javascript:doZoom(18)'>大</a>
		<a href='javascript:doZoom(15)'>中</a>
		<a href='javascript:doZoom(12)'>小</a> ]
	</span>
	<span style="padding-left: 10px">视力保护色：
		<input onclick="ChangeColor('#F9F6AF')" type="image" src="color1.png" height="13" width="13" value="" />
		<input onclick="ChangeColor('#9DDBF4')" type="image" src="color2.png" height="13" width="13"