【java奇思妙想】一个能够改变字体颜色、字号大小、字体样式的html网页

最新推荐文章于 2023-05-14 22:14:40 发布

染沁半世苍凉

最新推荐文章于 2023-05-14 22:14:40 发布

阅读量790

点赞数

分类专栏： java奇思妙想文章标签： html java css3 javascript 前端

本文链接：https://blog.csdn.net/qq_24254611/article/details/122993259

版权

java奇思妙想专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 900px;
				height: 695px;
				margin: 100px auto;
				border: #000000 2px solid;
			}
			.h1{
				color: #00CED1;
				text-align: center;
				height: 50px;
				background-color: antiquewhite;
			}
			.change{
				height: 70px;
				background-color: beige;
			}
			.selectColor,.size,.fontStyle{
				position: relative;
				width: 200px;
				height: 40px;
				top:15px;
				font-size: 20px;
				text-align: center;
			}
			.selectColor{
				left: 40px;
			}
			.size{
				left: 150px;
			}
			.fontStyle{
				left: 240px;
			}
			#text{
				 width: 900px;
				 height: 574px;
				 border: 0;
				 font-size: 30px;
				 background-color: antiquewhite;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<!-- 标题 -->
			<div>
				<h1 class="h1">文本编辑器</h1>
			</div>
			<!-- 选择器 -->
			<div class="change">
				<select class="selectColor" onchange="color()" id="scolor">
					<option value ="" hidden>颜色</option>
					<option value ="red">红色</option>
					<option value ="blue">蓝色</option>
					<option value ="green">绿色</option>
				</select>
				<select class="size" onchange="si()" id="ssize">
					<option value ="" hidden>字号</option>
					<option value ="30px">小</option>
					<option value ="60px">中</option>
					<option value ="90px">大</option>
				</select>
				<select class="fontStyle" onchange="fontStyles()" id="fonts">
					<option value ="" hidden>字体</option>
					<option value ="宋体">宋体</option>
					<option value ="楷体">楷体</option>
					<option value ="隶书">隶书</option>
				</select>
			</div>
			<!-- 文本输入界面 -->
			<div>

					<textarea id="text"></textarea>

			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	function color(){
		var colors = document.getElementById("scolor").value;
		var text = document.getElementById("text");
		text.style.color = colors;
	}
	function si(){
		var sizes = document.getElementById("ssize").value;
		var text = document.getElementById("text");
		text.style.fontSize = sizes;
	}
	function fontStyles(){
		var fstyle = document.getElementById("fonts").value;
		var text = document.getElementById("text");
		text.style.fontFamily = fstyle;
	}
	
</script>

测试图片
在这里插入图片描述

染沁半世苍凉

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【java奇思妙想】一个能够改变字体颜色、字号大小、字体样式的html网页

代码实现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 900px; height: 695px; margin: 100px aut
复制链接

扫一扫

专栏目录