javascript對(duì)于新聞頁(yè)的大小中字體實(shí)現(xiàn)

發(fā)布時(shí)間：2020-06-30 03:57:36 來(lái)源：網(wǎng)絡(luò) 閱讀：459 作者：逐夢(mèng)的Man 欄目：開(kāi)發(fā)技術(shù)
<!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=utf-8" />
<title>新聞頁(yè)的大小中字體實(shí)現(xiàn)</title>
<style type="text/css">
	a:link,a:visited{
		color:#0044ff;
		text-decoration:none;
		}
	a:hover{
		color:#9CF;
		}
	#newsText{
		width:500px;
		border:#0FF 1px solid;
		}	
		
	/*預(yù)定義一些樣式封裝到選擇器，一般使用類選擇器*/
	.norm{
		color:#000;
		font-size:16px;
		background-color:#cdd8d0;	
	}	
	.max{
		color:#808080;
		font-size:28px;
		background-color:#9ce9b4;
		}
	.min{
		color:#ffff00;
		font-size:12px;
		background-color:#f1b96b;
	}
</style>

</head>

<body>
<script type="text/javascript">
	function changeFont(size,clr){
		/*既然要對(duì)div newsText中的文本進(jìn)行操作
			必須要獲取div節(jié)點(diǎn)對(duì)象
		*/	
		var oNewsText = document.getElementById("newsText");
		//獲取oNewsText節(jié)點(diǎn)的style樣式屬性
		oNewsText.style.fontSize = size;
		oNewsText.style.color=clr;
	}
	//如果根據(jù)用戶點(diǎn)擊需要的效果不唯一
	//僅通過(guò)傳遞多個(gè)參數(shù)雖然可以實(shí)現(xiàn)效果，但是：
	//1：傳參數(shù)過(guò)多，閱讀性差
	//2:js和css代碼耦合性高
	/*
		解決方案：
		1：將多個(gè)所需的樣式進(jìn)行封裝
		2：封裝到選擇器中，只要給指定的標(biāo)簽加載不同的選擇器就可以了
	*/
	function changeFont(selectorName){
			var oNewsText = document.getElementById("newsText");
			oNewsText.className = selectorName;
	}
</script>
<!--
	需求：新聞字體的大中小樣式改變
    
    思路：
    1：現(xiàn)有新聞數(shù)據(jù)，然后標(biāo)簽封裝
    2：定義一些樣式頁(yè)面
    3：確定事件源事件和事件，以及處理的=方式中的節(jié)點(diǎn)
    	事件源：a標(biāo)簽，事件，
        被處理的節(jié)點(diǎn) div-newsText
        
        既然要加入超鏈接自定義的事件處理，就要先取消超鏈接的默認(rèn)點(diǎn)擊效果
        可以使用herf設(shè)置：javascript：void(0)來(lái)完成
-->
<h2>這是一個(gè)新聞標(biāo)題</h2>
<hr />
<a href="javascript:void(0)" onclick ="changeFont('max')">大字體</a>
<a href="javascript:void(0)" onclick ="changeFont('norn')">中字體</a>
<a href="javascript:void(0)" onclick ="changeFont('min')">小字體</a>
<div id="newsText" class="norm" >
這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢
這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢
這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢
這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢
這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢
這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢
這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢
這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢這是一個(gè)新聞內(nèi)容呢
這是一個(gè)新聞內(nèi)容呢

</div>
</body>
</html>
向AI問(wèn)一下細(xì)節(jié)
javascript對(duì)于新聞頁(yè)的大小中字體實(shí)現(xiàn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽
