css dynamic changes

CSS dynamic change is a common front-end technology, which can change the appearance of the web page by changing the styles in the CSS style sheet, making the web page more lively. This article will introduce the principles, implementation methods and practical applications of CSS dynamic changes.

1. Principle

In HTML, the display of text, pictures, links and other elements are defined by CSS style sheets. A CSS style sheet is a combination of properties and their values ​​that determine the display effect of each element on a web page. CSS style sheets are composed of selectors and declarations. Selectors specify the HTML elements to which styles are applied, and declarations describe how these elements should be rendered.

The principle of CSS dynamic change is actually very simple, which is to change the appearance of the web page by modifying the attribute values ​​of the specified elements in the CSS style sheet through JavaScript. For example, change the background color, font size, position, border style, etc. of an element. Since JavaScript can directly operate the Document Object Model (DOM), it can easily obtain the node information and attribute values ​​​​of each element in the page, and this information is the basic data required to change the CSS style sheet.

2. Implementation methods

Applying CSS dynamic changes in HTML pages usually has the following implementation methods:

1. Use JS attribute operations

This method is relatively simple, just modify the style attribute of the element directly through JS. For example:

document.getElementById("myDiv").style.backgroundColor = "red";

This line of code sets the background color of the HTML element with the ID "myDiv" to red .

2. Use CSS class switching

This method requires defining multiple CSS classes in advance, and then selecting the required class in the JS code to change the element style. This method is clearer, but requires the creation of multiple additional CSS classes. For example:

CSS definition:

.myClass {
background-color: yellow;
}

.myClass2 {
background-color: red ;
}

JS code:

document.getElementById("myDiv").className = "myClass2";

This line of code will set the ID as "myDiv" The class name of the HTML element is switched from "myClass" to "myClass2", thus changing the background color.

3. Use the StyleSheet object

This method requires obtaining the style sheet object, and then changing the element style by operating the rules in the style sheet. This method is more flexible, but the code is relatively complex. For example:

CSS definition:

.myClass {
background-color: yellow;
}

JS code:

var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules;
rules[0].style.backgroundColor = "red";

This code is obtained first The first style sheet object, and then get the style rule collection rules. Finally, change the background color of the first rule to red through rules[0].style.backgroundColor.

3. Example application

1. Change the background color of the element

The following code can be used to change the background color of the element to random when the mouse is placed on an element. Color:

document.getElementById('myElement').addEventListener('mouseover', function () {

var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
this.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';

});

2.Change text color

The following code can be used to change the color of the text in the specified element to red, green, and blue in turn when the button is clicked:

var colors = ['red', 'green', ' blue'];
var currentIndex = 0;
document.getElementById('myButton').addEventListener('click', function () {
document.getElementById('myText').style.color = colors[currentIndex];
currentIndex ;
if (currentIndex == colors.length) {

  currentIndex = 0;

}
});

3. Change the image size

The following code can be used to double the size of the image when the image is clicked:

document.getElementById('myImage').addEventListener('click', function () {
var width = this.width * 2;
var height = this.height * 2;
this.style.width = width 'px';
this.style.height = height 'px';
});

The above three examples demonstrate the basic application methods of CSS dynamic changes, and more special effects can be achieved by changing different attributes. It should be noted that although CSS dynamic changes can make web pages more lively and interesting, they must be kept moderate and not have a negative impact on the user experience.

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