Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "javascript how to change the style of the web page", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "javascript how to change the style of web pages" article.

Javascript can change the style of the web page, methods: 1, with the "element object .style.cssTest =" style value "" statement to modify; 2, with the "element object .setAttribute (" class "," value ")" statement to modify; 3, by changing the outreach css file to modify the page style.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

Javascript can change the style of a web page.

In javascript, you can change the style of a web page by dynamically modifying the CSS code.

The method of modifying CSS Code by javascript

Use setAttribute () to modify the class name of the stylesheet.

2. Use the cssTest of style object to modify the embedded css.

3. Change the css of the element by changing the css file of the Outreach

Example:

The following is a piece of html code and css code used to explain the difference between the above methods.

CSS

.style1 {margin: 10px auto; background-color: # 9999FF; display: block; color: White; border: 1px solid white; padding: 10px25px; font-size: 18px.style1: hover {background-color: # 66B3FF; cursor: pointer;}. Style2 {margin: 10px auto; background-color: gray; display: block; color: black; border: 1px solid white; padding: 10px25px; font-size: 18px } .style2: hover {background-color: black; color: White; cursor: pointer}

Html Code:

Method 1. Use obj.style.cssTest to modify the embedded css

Function changeStyle2 () {var obj = document.getElementById ("btnB"); obj.style.cssText = "display:block;color:White;}

Second, use bj.setAttribute to modify the class name of the stylesheet

Use code to modify the class name of the btB reference style, as shown in the following code:

Function changeStyle3 () {var obj = document.getElementById ("btnB"); / / obj.className = "style2"; obj.setAttribute ("class", "style2");}

Change the style by changing the class name of btB's css. There are two ways to change the style class name. 1. Obj.className = "style2"; 2. Obj.setAttribute ("class", "style2"); all have the same effect.

Modifying css in this way is much better than the one above.

Method 3. Use the css file that changes the outreach to change the css of the element

It is easy to change the style of the btB by changing the css file reference of the outreach. The code is as follows:

First of all, you have to reference the css file of Outreach, the code is as follows:

Function changeStyle4 () {var obj = document.getElementById ("css"); obj.setAttribute ("href", "css2.css");} above is the content of this article on "how javascript changes the style of web pages". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.