CSS changes color after click
CSS click-to-change color
1. Understanding CSS Selectors
Before modifying element styles, we must first understand the concept of CSS selectors. CSS selectors are a pattern used to select HTML elements. Using selectors, we can locate and select the elements whose styles we want to modify.
Common CSS selectors include:
- Element selector: Selects a specific HTML element. For example, the p selector will select all paragraph elements.
- Class selector: Adds the class attribute to an HTML element, then uses the class selector to select elements with the same class attribute value. For example, the .red selector will select all elements with the class red.
- ID selector: Adds the id attribute to an HTML element, then uses the ID selector to select an element with a specified id attribute value. For example, the #myElement selector will select the element with the id myElement.
2. Using Pseudo-Class Selectors to Change Color on Click
In CSS, pseudo-class selectors can be used to select elements in a specific state. For example, the :hover pseudo-class selector selects when the mouse is hovering over an element, and the :active pseudo-class selector selects when an element is activated. We can use the :active pseudo-class selector to achieve the click-to-change color effect.
1. HTML Structure
First, we need an HTML element to achieve the click-to-change color effect. The following HTML structure is used in this example:
<div class="myDiv">Click Me</div>
2. CSS Style
We implement the click-to-change color effect by adding CSS styles to the .myDiv element. The specific styles are as follows:
.myDiv:active {
background-color: red;
}
In the above code, .myDiv:active selects the styles for the element with the class myDiv when it is active. We set the background-color property to red, which changes the background color to red when clicked.
3. View the Effect
Place the above HTML structure and CSS styles in an HTML file. Open the browser to see the color change effect when clicked.
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv:active {
background-color: red;
}
</style>
</head>
<body>
<div class="myDiv">Click me</div> </body>
</html>
Open this HTML file in a browser and you’ll see that when you click the “Click Me” element, its background color changes to red.
Third, Using JavaScript to Implement Click-to-Change Colors
In addition to using pure CSS to achieve click-to-change color effects, we can also combine JavaScript for more flexible effects. Below is how to implement click-to-change color using JavaScript.
1. HTML Structure
Similarly, we need an HTML element to implement the click-to-change color effect. The following is the HTML structure used in this example:
<div id="myDiv" onclick="changeColor()">Click Me</div>
In the above code, we add the onclick attribute to the clicked element and set its value to changeColor(). This indicates that when the element is clicked, the JavaScript function named changeColor will be executed.
2. JavaScript Function
We will write a JavaScript function to implement the color switching effect after clicking. This function changes the element’s style to achieve the color switching effect. The specific code is as follows:
function changeColor() {
var myDiv = document.getElementById("myDiv");
if (myDiv.style.backgroundColor === "red") {
myDiv.style.backgroundColor = "blue";
} else {
myDiv.style.backgroundColor = "red";
}
}
In the above code, we first retrieve the element with the ID myDiv using the document.getElementById method and save it in a variable. Then, we determine the current color state by checking whether the element’s backgroundColor property is “red.” If the element’s background color is red, the background color is changed to blue; otherwise, the background color is changed to red.
3.
Place the above HTML structure and JavaScript function in an HTML file and open it in a browser to see the color change effect after clicking.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
background-color: red;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
<script>
function changeColor() {
var myDiv = document.getElementById("myDiv");
if (myDiv.style.backgroundColor === "red") {
myDiv.style.backgroundColor = "blue";
} else {
myDiv.style.backgroundColor = "red";
}
}
</script>
</head>
<body> <div id="myDiv" onclick="changeColor()">Click Me</div>
</body>
</html>
Open this HTML file in a browser and you’ll see that when you click the “Click Me” element, its background color switches between red and blue.
IV. Summary
This article detailed how to implement a click-to-change color effect by explaining CSS selectors, pseudo-class selectors, and JavaScript functions. Whether using pure CSS or combining JavaScript, we can easily achieve a click-to-change element’s style. Depending on the actual needs and complexity, choosing the appropriate method to implement a click-to-change color can add some interactivity and visual effects to the web design.