Home > Article > Web Front-end > JavaScript stand-alone change css

JavaScript stand-alone change css

WBOYOriginal: 2023-05-09 17:33:09361browse

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.

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");

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

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:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 修改 CSS 样式</title>
  <style>
    input {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>JavaScript 修改 CSS 样式</h1>
  <input type="text" id="myInput">
  <button id="myButton">单机我</button>
  <script src="style.js"></script>
</body>
</html>

JavaScript file:

var myButton = document.getElementById("myButton");
var myInput = document.getElementById("myInput");

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

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!

JavaScript css html 字符串选择器 border

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 write post submission in javascriptNext article：How to write post submission in javascript

See more

JavaScript stand-alone change css

Related articles