【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 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>

测试图片

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

2019-7-23 [HTML_CSS] 基本行内/内部/外部格式优先级选择器字体演颜色粗细大小字体对齐
文章目录 0.网页美化技术 CSS 1 css概述 1.1 什么是CSS? 1.2 CSS的发展史 1.3 CSS的优势 1.4 CSS基本使用 1.5 CSS样式的分类 1.5.1 行内样式 1.5 ...
CSDN写博客字体颜色、大小怎么写？
CSDN写博客字体颜色.大小怎么写? CSDN-markdown编辑器,内嵌HTML,可以对编写的内容进行类似于css样式修改 , 注意:只允许内嵌css样式! 字体.字号与颜色.背景颜色我是黑体字 ...
LaTeX 字体、字号、字体样式
LaTeX 字体原文:Font sizes, families, and styles 译者:Xovee 翻译时间:2022年11月11日文章目录 LaTeX 字体介绍字号(字体大小) ...
[css] 如何更改placeholder的字体颜色和大小？
[css] 如何更改placeholder的字体颜色和大小? <style>/* Chrome浏览器 */input::-webkit-input-placeholder {color: ...
CSDN中markdown字体颜色，大小，首行缩进，居中排布
一.下面是首行缩进的两种方法 1.这里实用空格去替代缩进的字符,下面讲的替代包括分号 2.把输入法由半角改为全角. 两次空格之后就能够有两个汉字的缩进. 半方大的空白用或全方大的空白用或不 ...
iOS中设置导航栏标题( titleView)的字体颜色和大小
在iOS中,经常会对一些导航栏titleView进行自定义,首先介绍一下对navgationBar 上的title设置的三种方法: <1> self.title = @"我是ti ...
ios设置字体-黑体,加粗等修改textField的placeholder的字体颜色、大小
ios开发中,经常用到UILable,此时如何让UILable的字体变化为不同的颜色,样式,从而增加UI美感呢?下面我进行了总结和归纳,内容来自于网络,当时经过我自己的整理.希望对我自己和大家有所帮助 ...
美工（一）网页颜色搭配技巧文字字体、字号、字体排版等
对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他们更多运用的是白色.蓝色.黄色等,使得网页显得典雅,大方和温馨.更重要的是,这样可以大大加快 ...
java设置文本框里字体颜色_swing设置字体颜色
());//设置该容器的布局 container.setBackground(Color.red);//设置字体对话框颜色 testLabel = new JLabel("作者:张旭&quo ...
网页颜色搭配技巧文字字体、字号、字体排版等
一般来说,网页的背景色应该柔和一些.素一些.淡一些,再配上深色的文字,使人看起来自然.舒畅对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他 ...

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

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

最新文章

热门文章