变更字体大小颜色倾斜

最新推荐文章于 2022-09-15 01:01:01 发布

一条小咸鱼i

最新推荐文章于 2022-09-15 01:01:01 发布

阅读量248

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Crush_kylin/article/details/103728404

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#ziti {
	font-size: 30px;
	font-style: normal;
}
</style>


</head>

<body>
<div id="ziti">
<p>你好中国</p>
</div>

<form>
	<input type="button" value="放大" onClick="big()">
	<input type="button" onClick="small()" value="变小"><br>
    <p>请选择字体颜色</p>
  <input type="radio" name="color" value="red" onChange="red()">红色<br>
  <input type="radio" name="color" value="green" onChange="green()">原谅绿<br>
  <input type="radio" name="color" value="blue" onChange="blue()">蓝色<br>
  <input type="radio" name="color" value="black" onChange="black()">黑色<br>
  <input type="radio" name="color" value="yellow" onChange="yellow()">黄色<br>
  <input type="button" name="qingxie" value="倾斜" onClick="change()">
</form>

</body>
</html>
<script>
function change(){
	 var s = document.getElementById("ziti");
	
	if(s.style.fontStyle=="normal"){
		s.style.fontStyle="oblique";	
		}else{
		s.style.fontStyle="normal";	
		}
	}

function big(){
	document.getElementById("ziti").style.fontSize="36px";
	}
	
function small(){
	x=document.getElementById("ziti");
	x.style.fontSize="20px";
	} 
function red(){
	x=document.getElementById("ziti");
	x.style.color="red";
	}  
function green(){
	x=document.getElementById("ziti");
	x.style.color="green";
	} 
function blue(){
	x=document.getElementById("ziti");
	x.style.color="blue";
	} 
function black(){
	x=document.getElementById("ziti");
	x.style.color="black";
	} 
function yellow(){
	x=document.getElementById("ziti");
	x.style.color="yellow";
	} 				  
</script>