Button change color javascript

In web design, in order to enhance the user interaction experience, buttons are often used. But some simple buttons can seem tedious. In order to make the button more attractive, we can achieve the effect by changing the color of the button. So, how to change the button color in JavaScript? This article will provide you with some practical methods.

1. Use HTML attributes to modify button color

In HTML, you can modify the button color by setting the style attribute of the button. We can set the background-color attribute in the style attribute of the element, which will change the background color of the button.

For example:

e2972b1d3933d1517e2cc4066c841c83Red button65281c5ac262bf6d81768915a4a77ac0

In this sample code, we set the button The background color is red. We can change the color of the button by changing the value of background-color to another color.

2. Use JavaScript to modify the button color

To use JavaScript to modify the button color, we need to first obtain a reference to the button element. We can get the element with the specified ID through the document.getElementById() method. Then, we can use the style attribute to modify the button's background color.

For example:

33b637fec656a4de2eb0c196361c407dButton65281c5ac262bf6d81768915a4a77ac0
3f1c4e4b6b16bbbd69b2ee476dc4f83a

var btn = document.getElementById("myBtn");
btn.style.backgroundColor = "blue";

2cacc6d41bbb37262a98f745aa00fbf0

In this sample code, we first obtain the button element with the ID myBtn, and then use the style attribute to modify the background color of the button to blue. We can change the value of the background-color attribute to modify the button color.

3. Use class style to modify button color

In CSS, we can use class style (Class) to set the button style. We only need to define the button class style in the CSS file, and then add the corresponding class name to the button in HTML. The color of the button can be easily modified by modifying the property value of the class style.

For example:

Define class style in CSS file:

.btn-style {

background-color: red;

}

Used in HTML code Class style:

a2a3546ac94bb6ac917fff120ea16ab4Red button65281c5ac262bf6d81768915a4a77ac0

In this sample code, we define a .btn- in the CSS file The class style of style sets the background color to red. In the HTML code, we add the class="btn-style" attribute to apply this style and change the button color.

Conclusion

This article introduces three common ways to modify the color of buttons. Whether it is directly through HTML attributes, using the style attribute in JavaScript, or using class styles in CSS, you can easily modify the button color. Through these techniques, we can improve the visibility of buttons and better provide users with a better interactive experience.

The above is the detailed content of Button change color javascript. For more information, please follow other related articles on the PHP Chinese website!