搜尋

首頁 >web前端 >js教程 >JavaScript如何動態變更CSS頁面樣式

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

不言
不言原創
2018-11-30 10:12:433239瀏覽

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

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

我們來直接看範例

#程式碼如下

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

#
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
      <script type="text/javascript">
        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;
        }
      } 
      </script>
</head>
<body id="page">
  <form name="form1">
    <div>背景色<input id="Text1" type="text" /></div>
    <div>前景色<input id="Text2" type="text" /></div>
    <input id="Button1" type="button" value="button" onclick="SetColor()"/>
  </form>
</body>
</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檔案。將顯示如下所示的效果。

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

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

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

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

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

程式碼如下

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
      <script type="text/javascript">
        window.onload = function onLoad() {
        param = GetQueryString();
        target = document.getElementById("page");
        if (param != null) {
          if (param["bgcolor"] != null) {
            target.style.backgroundColor = "#" + param["bgcolor"];
          }
          if (param["fgcolor"] != null) {
            target.style.color="#"+ param["fgcolor"];
          }
        }
      }
      function GetQueryString() {
        if (1 < document.location.search.length) {
          // 获取不包括第一个字符的字符串（？符号）
          var query = document.location.search.substring(1);
          // 使用查询分隔符（＆）将字符串拆分为数组
          var parameters = query.split(&#39;&&#39;);
          var result = new Object();
          for (var i = 0; i < parameters.length; i++) {
            // 拆分为参数名称和参数值
            var element = parameters[i].split(&#39;=&#39;);
            var paramName = decodeURIComponent(element[0]);
            var paramValue = decodeURIComponent(element[1]);
            // 将参数添加到参数作为关联数组，参数名称为键
            result[paramName] = decodeURIComponent(paramValue);
          }
          return result;
        }
        return null;
      }
      </script>
</head>
<body id="page">
  <div>这是一个测试页面</div>
  <div>啦啦啦啦</div>
  <div>哈哈哈哈</div>
</body>
</html>

說明：

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

運行結果：

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

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


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

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


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

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

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

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

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何用JavaScript動態變更CSS樣式表下一篇：如何用JavaScript動態變更CSS樣式表

相關文章

看更多