javascript dynamically set css

JavaScript is a very popular programming language that provides many interactive and dynamic features for web pages. One of them is dynamically setting CSS styles for web pages, allowing developers to easily change the appearance and layout of web pages. In this article, we’ll take a deep dive into how JavaScript styles CSS dynamically.

Basic knowledge of dynamically setting CSS styles with JavaScript

Before understanding the specific methods of dynamically setting CSS styles with JavaScript, you must first understand some basic knowledge. CSS styles are usually defined in style sheets in HTML, including attributes such as colors and fonts. If you want to dynamically change the style of an element, you can use JavaScript to modify the CSS properties of the element.

To set CSS properties, you first need to select the element you want to modify. In JavaScript, there are several different ways to select elements, the most commonly used of which is to use ID or class name to select elements. If you want to select an element by ID, you can use the following code:

var elem = document.getElementById("my-elem");

If you want to select an element by class name, you can use the following code:

var elems = document.querySelectorAll(".my-elems");

To set the CSS attribute of the element, you can use the attribute in the DOM , for example:

elem.style.backgroundColor = "red";

The above code changes the background color of the element to red. Multiple attributes can be set, for example:

elem.style.backgroundColor = "red";
elem.style.color = "white";

The above code changes the background color of the element to red and the font color to white.

Practical applications of JavaScript dynamically setting CSS styles

Now that we have understood the basics of JavaScript dynamically setting CSS styles, let us look at some practical applications.

1. Dynamicly change the page title

When the user interacts with the web page, it may be necessary to change the page title based on the actions the user takes. The page title can be changed dynamically through JavaScript, for example:

document.title = "New Page Title";

The above code changes the page title to "New Page Title".

2. Follow the cursor when the mouse moves

When developing a website, sometimes you need to create draggable elements in the page, such as windows, panels, etc. The position of these elements can be dynamically updated using JavaScript so that their position updates based on mouse movement.

The following is some sample code that demonstrates how to use JavaScript and CSS to move an element with the mouse:

var elem = document.getElementById("my-elem");
document.addEventListener("mousemove", function(e) {
  var x = e.clientX;
  var y = e.clientY;
  elem.style.left = x + "px";
  elem.style.top = y + "px";
});

The above code will move an element named "my-elem" with the mouse move. As the mouse moves, the page will update the left and top positions of the element so that it always remains below the mouse.

3. Change font size and color

JavaScript can be used to allow users to set the font size and color in web pages according to their preferences. You can use the following code:

var elem = document.getElementById("my-elem");
document.getElementById("increase-font-size").onclick = function() {
  var curFontSize = parseInt(window.getComputedStyle(elem, null).getPropertyValue("font-size"));
  elem.style.fontSize = (curFontSize + 1) + "px";
};

document.getElementById("change-color").onclick = function() {
  elem.style.color = "red";
};

The above code will modify the font size and color of the element "my-elem" to the size and color required by the user.

Summary

JavaScript dynamically sets CSS styles so that developers can flexibly change the style and layout of the page while providing users with a better user experience. In this article, we took a closer look at JavaScript's method of dynamically setting CSS properties and provided some examples of practical applications. This is a powerful tool and an integral part of web development.

The above is the detailed content of javascript dynamically set css. For more information, please follow other related articles on the PHP Chinese website!