[CSS] 修改共用樣式快速替換字型大小

其實這是一個自作孽的故事。

我以前都用 vbscript 寫網頁,一方面以前是 IE 的天下,一方面我立志成為 BASIC 的推廣者,所以對於 vbscript 的強迫中獎,不遺餘力。

我先前有網頁會偵測視窗大小,自動調整字型大小,但是受迫於大環境下,不得不 javascript 化。

對於一個已經製作完成的網頁,樣式通常都設定在裡面,所以改既存樣式是比較省事的方法,也能取得樣式變化的一致性。

在變更樣式的過程中,我寫了個函數,引數是 樣式ID,跟 Class 名:
GetStyleObject(cssIdName, styleName)

例如:
<link type="text/css" rel=’Stylesheet’ href="CssFile.css" id="cssIdName" />
<span class="styleName">樣式名</span>
而在 vbscript 的部分使用下面程式碼可正常縮放字型:
GetStyleObject(“cssStationText", “.DataTime").fontsize = 32 * scaleZoom & “pt"

在 javascript 的部分使用下面程式碼,則字型不會縮放:
GetStyleObject(“cssStationText", “.DataTime").fontsize = 32 * scaleZoom + “pt";

最後追蹤發現問題的原因是 vbscript 大小寫意義相同,而 javascript 大小寫意義不同,所以 fontSize 的 S 要大寫,沒有注意到…

所以這是一個自作孽的故事。

好,下面就用最簡單的範例來分別貼出 vbscript / javascript 的程式碼吧。


vbscript
   Function GetStyleObject(Byval cssIdName, Byval styleName)
      With document.styleSheets
         For i = 0 To .length - 1
            If .item(i).id = cssIdName Then
               Set objstyleSheet = .item(i)
               Exit For
            End If
         Next
      End With

      With objstyleSheet.rules
         For i = 0 To .length - 1
            If .item(i).selectorText = styleName Then
               Set GetStyleObject = .item(i).style
               Exit For
            End If
         Next
      End With
   End Function

   Sub window_onresize()
      scaleZoom = document.body.clientWidth / 1366
      GetStyleObject("cssStationText", ".DataTime").fontsize = 32 * scaleZoom & "pt"
   End sub
 

javascript
   function GetStyleObject(cssIdName, styleName) {
      var objStyle;
      var allStyles = document.styleSheets;
      for (i=0; i<allStyles.length; i++){
         if(allStyles[i].id == cssIdName) {
            objStyle = allStyles[i];
            break;
         }
      }

      for (i=0; i<objStyle.rules.length; i++){
         if (objStyle.rules[i].selectorText == styleName) {
            return (objStyle.rules[i].style);
         }
      }
   }

   function window_onresize(){
      var scaleZoom = document.body.clientWidth / 1366;
      GetStyleObject("cssStationText", ".DataTime").fontSize = 32 * scaleZoom + "pt";
   }
Categories: 工作點滴, 技術分享 | Tags: , , , | 發表留言

文章導覽

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

在 WordPress.com 建立免費網站或網誌.

%d 位部落客按了讚: