In this article, we will see a change text color based on background color using javascript. Sometimes we have requirements to change text or font color dependent on background color and at that time if you are changing text color manually then this post will definitely help you. So, you can change font color dynamically based on background color using jquery.
So, let's see how to dynamically change text color based on a background color javascript and jquery change text color based on background.
In this step, we will create an HTML file and add the below code.
<html>
<head>
<title>
How to change text color depending
on background color using JavaScript
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body id="body" align="center" >
<h1 style="color:#03aa96;">
Websolutionstuff.com
</h1>
<p id="col_UP" style="font-size: 15px; font-weight: bold;"> </p>
<button onclick="col_Fun()">
click here
</button>
<br>
<br>
<div id="backG">Welcome to websolutionstuff.</div>
</body>
</html>
Now, add CSS to add a head tag.
#backG {
width: 200px;
height: 30px;
color: white;
background: #03aa96;
margin: 0 auto;
padding-top:10px;
}
In this step, we will create a jquery function and change the text color based on the background color selection.
var el_up = document.getElementById('col_UP');
var rgbValue = [255, 0, 0];
function setColor() {
rgbValue[0] = Math.round(Math.random() * 255);
rgbValue[1] = Math.round(Math.random() * 255);
rgbValue[2] = Math.round(Math.random() * 255);
var color = Math.round(((parseInt(rgbValue[0]) * 299) +
(parseInt(rgbValue[1]) * 587) +
(parseInt(rgbValue[2]) * 114)) / 1000);
var textColor = (color > 125) ? 'black' : 'white';
var backColor =
'rgb(' + rgbValue[0] + ', ' + rgbValue[1] + ', '
+ rgbValue[2] + ')';
$('#backG').css('color', textColor);
$('#backG').css('background-color', backColor);
}
function col_Fun() {
setColor();
}
Output:
You might also like:
In this tutorial I will give you information about Introduction of Node.js Modules. Node.js modules provide a way t...
Sep-10-2021
Converting DateTime into milliseconds in PHP can be useful for various applications, such as timestamping events or meas...
Mar-15-2024
In this article, we will see how to increase session timeout in laravel. In this example, we can see how to se...
Jun-28-2020
Hello, laravel web developers! In this article, we'll see how to autocomplete a search from a database in larav...
Jun-24-2024