• 网页文本编辑器

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>文本编辑器title>
    6. 		<style>
    7. 			.box {
    8. 				height: 500px;
    9. 				width: 1000px;
    10. 				margin: auto;
    11. 				background-color: navajowhite;
    12. 			}
    13.  
    14. 			.box_h {
    15. 				/* 				font-weight: normal; */
    16. 				text-align: center;
    17. 				height: 40px;
    18. 				width: 200px;
    19. 				margin: auto;
    20. 				padding: auto;
    21. 				font-family: "楷体";
    22. 				font-size: 30px;
    23. 			}
    24.  
    25. 			#txta {
    26. 				height: 490px;
    27. 				width: 996px;
    28. 				border-radius: 0px;
    29. 				outline: none;
    30. 				border-inline: none;
    31. 				background-color: blanchedalmond;
    32. 				resize: none;
    33. 				font-size: 20px;
    34. 			}
    35.  
    36. 			select {
    37. 				height: 20px;
    38. 				margin-left: 200px;
    39. 			}
    40. 		style>
    41. 	head>
    42. 	<body>
    43. 		<div class="box">
    44. 			<h2 class="box_h">文本编辑器h2>
    45. 			<select id="s1" onchange="changeFontcolor()">
    46. 				<option>字体颜色option>
    47. 				<option value="red">红色option>
    48. 				<option value="black">黑色option>
    49. 				<option value="blue">蓝色option>
    50. 			select>
    51. 			<select id="s2" onchange="changeFontsize()">
    52. 				<option>字体大小option>
    53. 				<option value=" 100px">大option>
    54. 				<option value="50px">中option>
    55. 				<option value="20px">小option>
    56. 			select>
    57. 			<select id="s3" onchange="changeFontfamily()">
    58. 				<option>字体option>
    59. 				<option value=" 宋体">宋体option>
    60. 				<option value="楷体">楷体option>
    61. 				<option value="黑体">黑体option>
    62. 			select>
    63. 			<textarea id="txta">textarea>
    64. 		div>
    65. 		<script>
    66. 			function changeFontcolor() {
    67. 				var color = document.getElementById("s1");
    68. 				var textarea = document.getElementById("txta");
    69. 				textarea.style.color = color.value;
    70. 			}
    71.  
    72. 			function changeFontsize() {
    73. 				var size = document.getElementById("s2");
    74. 				var textarea = document.getElementById("txta");
    75. 				textarea.style.fontSize = size.value;
    76. 			}
    77.  
    78. 			function changeFontfamily() {
    79. 				var family = document.getElementById("s3");
    80. 				var textarea = document.getElementById("txta");
    81. 				textarea.style.fontFamily = family.value;
    82. 			}
    83. 		script>
    84. 	body>
    85. html>

     

  • 相关阅读:
    【小白笔记】pikachu之文件包含漏洞
    python selenium参数详解和案例实现
    虚拟电厂可视化大屏，深挖痛点精准减碳
    数据分表Mybatis Plus动态表名最优方案的探索
    docker 部署 RabbitMQ
    CanvasScaler计算方法
    go语言数组、切片和指针
    Redis 全景图（3）--- Redis 应用于缓存
    pm2 命令手册
    自定义View6 -塔防小游戏：第三篇防御塔随意放置+多组野怪
  • 原文地址：https://blog.csdn.net/m0_71385141/article/details/133247840