[DHTML] 動態變更共用樣式

通常變更樣式我們會直接針對某個物件變更,例如:
id.style.width = xxx
 
那如果是整篇文件的共用樣式要變更怎麼辦?google 不是找不到,是關鍵字不知道是啥。
 
這邊舉個動態變更共用樣式放大字型的範例:

<html>

     <head>

          <title>測試修改規則</title>

          <meta http-equiv="Content-Type" content="text/html; charset=big5">

          <style id="cssTest"><!

               .TextRule {font-size: 9pt;}

          –></style>

<script language="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 TextZoomOut_onclick

          Set nowStyle = GetStyleObject("cssTest", ".TextRule")

          nowStyle.fontsize = CDbl(Replace(nowStyle.fontsize, "pt", ""))* 1.5 & "pt"

          window.status = nowStyle.fontsize

     End Sub

</script>

</head>

<body>

     <p class=TextRule>字型大小</p>

     <input type=button id=TextZoomOut value="放大" />

</body>

</html>


每次按下按鈕就可以放大字型,但由於是變更共用樣式,所以若全篇有多個使用此樣式的元件或段落,就可以一起變更。

看到這,就知道關鍵字是:document styleSheet rule ,再來 google 就可以找到很多了。

話說我臨時有這個需求,卻不確定關鍵字,用中文 google 都沒看到類似的內容,只好乖乖的看 MSDN 找屬性,所以我現在下這個中文標題,希望有此需求的網友,能透過這篇再去看看相關的英文文章。

MSDN 上的範例多半是 createStyleSheet , addRule 的,我是沒看到修改的,所以就順便做個小範例大家一起參考。

廣告
Categories: 技術分享 | 發表留言

文章分頁導航

發表迴響

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

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

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

%d 位部落客按了讚: