溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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>新聞頁的大小中字體實現</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;
}
/*預定義一些樣式封裝到選擇器，一般使用類選擇器*/
.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){
/*既然要對div newsText中的文本進行操作
必須要獲取div節點對象
*/
var oNewsText = document.getElementById("newsText");
//獲取oNewsText節點的style樣式屬性
oNewsText.style.fontSize = size;
oNewsText.style.color=clr;
}
//如果根據用戶點擊需要的效果不唯一
//僅通過傳遞多個參數雖然可以實現效果，但是：
//1：傳參數過多，閱讀性差
//2:js和css代碼耦合性高
/*
解決方案：
1：將多個所需的樣式進行封裝
2：封裝到選擇器中，只要給指定的標簽加載不同的選擇器就可以了
*/
function changeFont(selectorName){
var oNewsText = document.getElementById("newsText");
oNewsText.className = selectorName;
}
</script>
<!--
需求：新聞字體的大中小樣式改變
思路：
1：現有新聞數據，然后標簽封裝
2：定義一些樣式頁面
3：確定事件源事件和事件，以及處理的=方式中的節點
事件源：a標簽，事件，
被處理的節點 div-newsText
既然要加入超鏈接自定義的事件處理，就要先取消超鏈接的默認點擊效果
可以使用herf設置：javascript：void(0)來完成
-->
<h2>這是一個新聞標題</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" >
這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢
這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢
這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢
這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢
這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢
這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢
這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢
這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢這是一個新聞內容呢
這是一個新聞內容呢
</div>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
