DOM练习文本字体

电玩女神 2022-05-14 03:46 152阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    
    <style type="text/css">
    
    a:link,a:visited{
    	color:#FFFF00;
    	text-decoration:none;
    	font-size:14px;
    	}
    	
    a:hover{
    	color:#00FF00;
    	}
    	
    .newsstyle{
    	border:#0000FF 1px solid;
    	width:300px;
    	font-size:16px;
    	color:#FF0000;
    	background-color:#000000;
    	
    	}
    	
    .max{
    	border:#0000FF 1px solid;
    	width:300px;
    	font-size:18px;
    	color:#00FF00;
    	background-color:#9900FF;
    	}
    .min{
    	border:#0000FF 1px solid;
    	width:300px;
    	font-size:14px;
    	color:#0000CC;
    	background-color:#CCFF66;
    	}
    </style>
    
    <script type="text/javascript">
    function changeFont_1(size)
    {
    	var divNode = document.getElementById("newstext");
    	divNode.style.fontSize = size;
    }
    
    function changeFont(styleName)
    {
    	var divNode = document.getElementById("newstext");
    	divNode.className = styleName;
    }
    </script>
    </head>
    
    <body>
    
    
    <h2>这是一条名言警句</h2>
    <a href="javascript:void(0)" οnclick="changeFont('max')">大字体</a> 
    <a href="javascript:void(0)" οnclick="changeFont('newsstyle')">中字体</a> 
    <a href="javascript:void(0)" οnclick="changeFont('min')">小字体</a>
    <div id="newstext" class="newsstyle">
    宝剑锋从磨砺出，梅花香自苦寒来<br/>
    宝剑锋从磨砺出，梅花香自苦寒来<br/>
    宝剑锋从磨砺出，梅花香自苦寒来<br/>
    宝剑锋从磨砺出，梅花香自苦寒来<br/>
    宝剑锋从磨砺出，梅花香自苦寒来<br/>
    宝剑锋从磨砺出，梅花香自苦寒来<br/>
    </div>
    
    
    </body>
    </html>

运行结果：

![1353986751_2950.jpg][]

[1353986751_2950.jpg]: https://img-my.csdn.net/uploads/201211/27/1353986751_2950.jpg