Daily Archives: 2015/08/17

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

Posted on 2015/08/17 by 璉璉

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

我以前都用 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: 工作點滴, 技術分享 | 標籤： 、、、 | 發表留言

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