Can javascript change the style of a web page?

Javascript can change the style of the web page. Method: 1. Use the "element object.style.cssTest="style value"" statement to modify it; 2. Use the "element object.setAttribute("class", "value" )" statement modification; 3. Modify the web page style by changing the external css file.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

javascript can change the style of the web page.

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

How to modify CSS code in javascript

1. Use setAttribute() to modify the class name of the style sheet.

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

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

Example:

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

CSS

.style1 {
    margin: 10px auto;
    background - color: #9999FF;
    display: block;
    color: White;
    border: 1px solid white;
    padding: 10px 25px;
    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:

<div>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <div id="tool">
    <input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()" />
    <input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
    <input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
    <input type="button" value="更改外联css样式" onclick="recover()" /></div>
</div>

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

Method 2. Use bj.setAttribute to modify the class name of the style sheet

Use code to modify the class name of the btB reference style, as follows:

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"); have the same effect.

Using this method to modify css has a much better effect than the above.

Method 3: Change the css file of the external link to change the css of the element

Change the style of btB by changing the reference of the external css file, operation Very simple. The code is as follows:

First, you must quote the external css file, the code is as follows:

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
 
function changeStyle4() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
 }

[Related recommendations: javascript video tutorial, web front-end 】

The above is the detailed content of Can javascript change the style of a web page?. For more information, please follow other related articles on the PHP Chinese website!