How JavaScript dynamically changes CSS page styles

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

  
  
      


  

    
背景色
    
前景色
    
  

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.

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

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

  
  
      


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

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.

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.

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

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!