Home >Web Front-end >JS Tutorial >How JavaScript dynamically changes CSS page styles

How JavaScript dynamically changes CSS page styles

不言Original: 2018-11-30 10:12:433227browse

How does How JavaScript dynamically changes CSS page styles dynamically change CSS page styles? If you want to change the page style in How JavaScript dynamically changes CSS page styles, you need to change the style attribute of the element. Let's take a look at the specific implementation content.

Let’s look at the example directly

The code is as follows

How JavaScript dynamically changes CSS page stylesChangeCssTextBox.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>

Instructions:

Click a button on the form to execute the SetColor() function written in How JavaScript dynamically changes CSS page styles.

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;
  }
}

Call the document.getElementById method in the SetColor function to get the Element of the Body tag from the ID set as the Body tag. If you obtain Element (target! = Null), you can set the background attribute and color attribute of Element's style attribute to the value of the text box.

Run result

Execute HTML file. The effect shown below will be displayed.

How JavaScript dynamically changes CSS page styles

Enter the color code in the text box, and then click the "button" button, the effect shown below will be displayed

How JavaScript dynamically changes CSS page styles

Enter the code of other colors, and then click the button button, the page will change to other colors

Let’s look at the next example

The code is as follows

How JavaScript dynamically changes CSS page stylesChangeCssParameter.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>

Description:

It is similar to the previous HTML file, but gets the color code from the parameters of the HTML file and changes the foreground color and background Color

Run results:

Execute the HTML file, and the effect shown below will be displayed.

How JavaScript dynamically changes CSS page styles

Change the URL and access it by adding "?Bgcolor=C0C0C0" after the URL. The effect shown below will be displayed. The background color has been changed to the parameter's color code set.

How JavaScript dynamically changes CSS page styles

The following are the results of "?bgcolor=202020&fgcolor=00C000". The foreground color also changes.

How JavaScript dynamically changes CSS page styles

The above is the entire content of this article. For more related and exciting content, you can move to the How JavaScript dynamically changes CSS page styles Video Tutorial column of the php Chinese website ! ! ! !

The above is the detailed content of How JavaScript dynamically changes CSS page styles. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to dynamically change a CSS stylesheet with JavaScriptNext article：How to dynamically change a CSS stylesheet with JavaScript

See more

How JavaScript dynamically changes CSS page styles

Related articles