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:

Red button

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:

Button
<script></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var btn = document.getElementById(&quot;myBtn&quot;); btn.style.backgroundColor = &quot;blue&quot;;</pre><div class="contentsignin">Copy after login</div></div><p></script>

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:

Red button

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!