使用javascript改變字型與字型大小

詳細內容
分類：Javascript
發佈：2013-03-26, 週二 20:09
點擊數：3845

使用javascrip調整與改變字型與字型大小：

之前在 google分析裡面看到有人查關鍵字"改變字型大小"，結果進去了String.fontsize()這個頁面，我猜這根本不是他想要的，所以就再寫了這一篇文章，很簡單的應用，希望可以幫到有需要的人。

程式碼解說：

1.利用getElementById()取得要改變的HTML DOM 節點。

2.藉由style.fontSize屬性來改變DOM 節點中的文字大小。

3.藉由style.fontFamily屬性來改變DOM 節點中的文字字型。

4.把原CSS的屬性的 "-" 拿掉，第二個單字的第一個字母變大寫，就可以變成style的屬性。

譬如說，

字型大小：font-size 變成 fontSize,，

字型：font-family 變成f ontFamily，

文字行距：line-heigh 變成 lineHeight，

文字間距：letter-spacing 變成 letterSpacing。

調整與改變字型與字型大小程式碼：

前面是HTML，javascript程式碼在最後面。
<div style="border:2px solid gray">
<form>
<p>
字型大小： <select onchange="fzchange(this.options[this.selectedIndex].value);"><option value="8">8</option><option value="10">10</option><option value="12">12</option><option value="16">16</option><option value="32">32</option></select> 字型選擇： <select onchange="ffchange(this.options[this.selectedIndex].value);"><option value="新細明體">新細明體</option><option value="標楷體">標楷體</option></select></p>
</form>
<div id="div_changesize">
<h1>
Welcom to Vic's Blog</h1>
<p>
維克的煩惱是一個關於Javascript 與 網頁架設 等等的部落格，格主VicTsao是個悲情的工程師。虛度三十餘年，依然孤家寡人。</p>
</div>
<div>
<h2>
神馬Javascript</h2>
<p>
Javascript 是神馬？</p>
</div>
</div>
<script type="text/javascript">
function fzchange(x){
var chagefz=document.getElementById("div_changesize");
chagefz.style.fontSize=Number(x)+ "px" ;
}
function ffchange(y){
var chageff=document.getElementById("div_changesize");
chageff.style.fontFamily=y;
}
</script>

調整與改變字型與字型大小程式碼輸出：

字型大小： 字型選擇：

Welcom to Vic's Blog

維克的煩惱是一個關於Javascript 與 網頁架設 等等的部落格，格主VicTsao是個悲情的工程師。虛度三十餘年，依然孤家寡人。

神馬Javascript

Javascript 是神馬？

 
 

  按個讚!~支持本站!~

FB推薦載入中  

你可能會有興趣的文章

返回本頁開頭    返回部落格首頁