HTML DOM 快速導覽 - 樣式設定的屬性 fontStretch

CSS 樣式表 (cascading style sheets) 的 font-stretch 性質 (property) 可控制 HTML 元素 (element) 的字型伸縮，也就是字型寬度，亦可由 JavaScript 程式取得元素物件，再用 style 的屬性 (attribute) fontStretch 進行設定。



fontStretch 的設定值如下
  • normal
  • wider
  • narrower
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded


舉例如下
function run00(demo) {
    demo.style.fontStretch = "semi-condensed";
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：style033.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */


此例中我們將相關元素設定為 semi-condensed 
demo.style.fontStretch = "semi-condensed";


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="style033.js" type="text/javascript"></script>
</head>
<body>
<div onclick="run00(this);">There is no spoon.</div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：style033.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (browser) 開啟，點擊該文字結果如下



目前主流瀏覽器 (broswer) 可能只有 IE 9.0 支援，因此 Firefox 並沒有效果，讀者可自行將 HTML 文件以 IE 9.0 開啟測試。


中英文術語對照
CSS 樣式表cascading style sheets
性質property
元素element
屬性attribute
瀏覽器browser


您可以繼續參考
CSS 範例

樣式設定物件 style


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/CSS
https://developer.mozilla.org/en/CSS/font-stretch
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)