网页文本编辑器


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本编辑器title>
		<style>
			.box {
				height: 500px;
				width: 1000px;
				margin: auto;
				background-color: navajowhite;
			}
 
			.box_h {
				/* 				font-weight: normal; */
				text-align: center;
				height: 40px;
				width: 200px;
				margin: auto;
				padding: auto;
				font-family: "楷体";
				font-size: 30px;
			}
 
			#txta {
				height: 490px;
				width: 996px;
				border-radius: 0px;
				outline: none;
				border-inline: none;
				background-color: blanchedalmond;
				resize: none;
				font-size: 20px;
			}
 
			select {
				height: 20px;
				margin-left: 200px;
			}
		style>
	head>
	<body>
		<div class="box">
			<h2 class="box_h">文本编辑器h2>
			<select id="s1" onchange="changeFontcolor()">
				<option>字体颜色option>
				<option value="red">红色option>
				<option value="black">黑色option>
				<option value="blue">蓝色option>
			select>
			<select id="s2" onchange="changeFontsize()">
				<option>字体大小option>
				<option value=" 100px">大option>
				<option value="50px">中option>
				<option value="20px">小option>
			select>
			<select id="s3" onchange="changeFontfamily()">
				<option>字体option>
				<option value=" 宋体">宋体option>
				<option value="楷体">楷体option>
				<option value="黑体">黑体option>
			select>
			<textarea id="txta">textarea>
		div>
		<script>
			function changeFontcolor() {
				var color = document.getElementById("s1");
				var textarea = document.getElementById("txta");
				textarea.style.color = color.value;
			}
 
			function changeFontsize() {
				var size = document.getElementById("s2");
				var textarea = document.getElementById("txta");
				textarea.style.fontSize = size.value;
			}
 
			function changeFontfamily() {
				var family = document.getElementById("s3");
				var textarea = document.getElementById("txta");
				textarea.style.fontFamily = family.value;
			}
		script>
	body>
html>

相关阅读:
软件测试 - 软件测试流程（完整版）避免当背锅侠，测试人的生存......
mysql bin-log，relay-log删除方法
美食杰项目 -- 总结（八）
需求文档的写法与项目汇报的流程
【python基础】复杂数据类型-列表类型（元组）
应急响应＞＞基础技能与工具
【计算机网络】IP协议的相关特性
java计算机毕业设计Web企业差旅在线管理系统源码+mysql数据库+系统+lw文档+部署
27. 移除元素、Leetcode的Python实现
基于场景分析法的电动车优化调度（Matlab代码实现）

原文地址：https://blog.csdn.net/m0_71385141/article/details/133247840