When we want to add some dynamic effects to the web page, JavaScript may be the best choice. One of the common requirements is that when the user performs certain operations on the web page, the style of the web page elements needs to be dynamically changed. At this point, we can use JavaScript to modify the CSS style.

Specifically, we can select elements on the web page through JavaScript and then modify the corresponding CSS properties. Below, I’ll show you how to change CSS styles stand-alone using JavaScript.

1. Select element

First, we need to select the web element whose style we want to modify. There are many ways to select elements, here I'll cover the two most common ones.

Method one is to use the document.getElementById() method, which requires passing in a string parameter representing the ID of the element. For example:

var element = document.getElementById("myElement");

The second method is to use the document.querySelector() method, which requires passing in a CSS selector to represent the element to be selected. For example:

var element = document.querySelector(".myClass");

2. Modify style

Once we select the element whose style we want to modify, we can use JavaScript to modify its style. Here are some common CSS style properties and how to modify them.

2.1. Modify the background color of the element

We can use the style.backgroundColor property to modify the background color of the element. For example:

element.style.backgroundColor = "red";

2.2. Modify the text color of the element

We can use the style.color attribute to modify the text color of the element. For example:

element.style.color = "blue";

2.3. Modify the font size of the element

We can use the style.fontSize property to modify the font size of the element. For example:

element.style.fontSize = "20px";

2.4. Modify the border style of the element

We can use the style.border property to modify the border style of the element. It requires passing in a string parameter indicating the style, width and color of the border. For example:

element.style.border = "1px solid black";

3. Example

The following is an example of using JavaScript to change CSS styles stand-alone. This example contains an HTML file and a JavaScript file that changes the background color of the text box to red when the user clicks a button. You can save both files to the same folder and open the HTML file in a browser to see the effect.

HTML file:

      
  
JavaScript 修改 CSS 样式
  单机我   

JavaScript file:

var myButton = document.getElementById("myButton"); var myInput = document.getElementById("myInput"); myButton.onclick = function() { myInput.style.backgroundColor = "red"; };

4. Summary

Using JavaScript to change CSS styles stand-alone can help us create new styles for web pages Add more dynamic effects. We can achieve this function by selecting the element and modifying the style. In practice, we can also use more CSS properties and JavaScript methods to achieve more complex effects.

The above is the detailed content of JavaScript stand-alone change css. For more information, please follow other related articles on the PHP Chinese website!