JavaScript如何動態變更CSS頁面樣式

JavaScript如何動態變更CSS頁面樣式如何動態變更CSS頁面樣式？如果要在JavaScript如何動態變更CSS頁面樣式中更改頁面樣式，需要更改元素的樣式屬性，下面我們就來看看具體的實作內容。

我們來直接看範例

#程式碼如下

JavaScript如何動態變更CSS頁面樣式ChangeCssTextBox.html

#

  
  
      


  

    
背景色
    
前景色
    
  

說明：

點選表單上的按鈕執行用JavaScript如何動態變更CSS頁面樣式寫的SetColor（）函數。

function SetColor(foreColor, backColor) {
  target = document.getElementById("page");  
if (target != null) {
    target.style.backgroundColor = document.form1.Text1.value;;
    target.style.color = document.form1.Text2.value;
  }
}

在SetColor函數中呼叫document.getElementById方法，可以從被設定為Body標籤的ID中取得Body標籤的Element。如果取得了Element（target！= Null），就可以將Element的style屬性的bac​​kground屬性和color屬性設定為文字方塊的值。

運行結果

執行HTML檔案。將顯示如下所示的效果。

在文字方塊中輸入顏色編碼，然後點選「button」按鈕，就會顯示如下所示的效果

輸入其他顏色的編碼，然後點擊button按鈕，頁面將變成其他顏色

我們下面接著來看下一個範例

程式碼如下

JavaScript如何動態變更CSS頁面樣式ChangeCssParameter.html

  
  
      


  
这是一个测试页面
  
啦啦啦啦
  
哈哈哈哈

說明：

它類似於先前的HTML文件，但從HTML文件的參數中獲取顏色代碼並更改前景色和背景色

運行結果：

執行HTML文件，將顯示如下所示的效果。

更改網址，透過在URL後面加上「？Bgcolor = C0C0C0」來存取它。將顯示如下所示的效果。背景顏色已變更為參數的顏色代碼集。

以下是「?bgcolor=202020&fgcolor=00C000」的結果。前景色也改變了。

以上就是本篇文章的全部內容了，更多相關精彩內容的學習可以移步到php中文網的JavaScript如何動態變更CSS頁面樣式影片教學欄目！ ！ ！ ！

以上是JavaScript如何動態變更CSS頁面樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！