js javascript 文字变换颜色，样式，改变文字的颜色，样式，js改变字体

最新推荐文章于 2024-05-16 10:19:46 发布

limon758

最新推荐文章于 2024-05-16 10:19:46 发布

阅读量1.1w

点赞数 6

分类专栏： javaScript 文章标签： JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/heisetoufa/article/details/83332810

版权

javaScript 专栏收录该内容

163 篇文章 0 订阅

订阅专栏

<html>
<head> <title>文字变换颜色 样式 </title>

</head>
<script>
function changeColor()
{
	var title = document.getElementById("title").value;
	var select = document.getElementById("selector").value;
	if(select=="two")
	{
		document.getElementById("title").style.color="green"; 
	}
	else document.getElementById("title").style.color="red";
}

function changeStyle()
{
	var title = document.getElementById("title").value;
	var select = document.getElementById("selector2").value;
	if(select=="two")
	{
		document.getElementById("title").style.fontFamily="Times New Roman"; 
	}
    else
        document.getElementById("title").style.fontFamily="楷体";
}

</script>
<body>
	<form name="form1">
	<input type="text" name="title" id="title" value="黑色头发" style="font-family:Helvetica;">
	<select name="selector" id="selector" onchange="changeColor()">
		<option value="one">红色 </option>
		<option value="two">绿色 </option>
	</select>
	<select name="selector2" id="selector2" onchange="changeStyle()">
		<option value="one">宋体 </option>
		<option value="two">楷体 </option>
	</select>
	</form>
</body>
</html>

效果图：
[img]/upload/attachment/69068/8cb66cb0-f662-3ab0-8604-b32f519d67e3.gif[/img]

黑色头发：http://heisetoufa.iteye.com/

limon758

关注

6
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
js javascript 文字变换颜色，样式，改变文字的颜色，样式，js改变字体

[code="html"] 文字变换颜色样式 function changeColor(){ var title = document.getElementById("title").value; var select = document.getElementById("selector").value; if(select=="two") { d...
复制链接

扫一扫

专栏目录