Use of rgba() function in JavaScript
The rgba() function is an inbuilt function in CSS. It is used to define the colors using the red-green-blue-alpha (RGBA) model.The values of RGBA color are an extension of RGB color values with an alpha channel.Alpha channel specifies the opacity of the color.
Syntax:
rgba( red, green, blue, alpha )
Parameters:
The rgba() function accepts four parameters as red, green, blue, alpha.Their detail is as follow:
red
The red parameter is used to define the intensity of red color. It is an integer value which lies between 0 to 255, or its percentage value between 0% to 100%.
green
The green parameter is used to define the intensity of green color. It is an integer value which lies between 0 to 255, or its percentage value between 0% to 100%.
blue
The blue parameter is used to define the intensity of green color. It is an integer value which lies between 0 to 255, or its percentage value between 0% to 100%.
alpha
The alpha parameter is used to defines the opacity and the value lies between 0.0 which is fully transparent to 1.0 which is fully opaque.
Code for the use of rgba() function of CSS in JavaScript
<html>
<head>
<title>use of form</title>
<script>
var r=0,g=0,b=0,a=0.5;
function changeStyle()
{
r=Math.floor( Math.random()*255);
g=Math.floor( Math.random()*255);
b=Math.floor( Math.random()*255);
a=Math.random();
document.getElementById("head1").style.backgroundColor='rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
setTimeout(changeStyle,250);
}//end of function
var size=10;
function changeSize()
{
size++;
document.getElementById("head1").style.width='' + size + '%';
}//end of function
</script>
</head>
<body>
<h1 id="head1">Use of Form </h1>
<p id="display"></p>
<div style="display:flex; column-count: 2;background-color: darkgoldenrod;">
<button type="button" onclick="changeStyle()">Change Color</button>
<button type="button" onclick="changeSize()">Change Size</button>
</div>
</form>
</body>
</html>
<head>
<title>use of form</title>
<script>
var r=0,g=0,b=0,a=0.5;
function changeStyle()
{
r=Math.floor( Math.random()*255);
g=Math.floor( Math.random()*255);
b=Math.floor( Math.random()*255);
a=Math.random();
document.getElementById("head1").style.backgroundColor='rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
setTimeout(changeStyle,250);
}//end of function
var size=10;
function changeSize()
{
size++;
document.getElementById("head1").style.width='' + size + '%';
}//end of function
</script>
</head>
<body>
<h1 id="head1">Use of Form </h1>
<p id="display"></p>
<div style="display:flex; column-count: 2;background-color: darkgoldenrod;">
<button type="button" onclick="changeStyle()">Change Color</button>
<button type="button" onclick="changeSize()">Change Size</button>
</div>
</form>
</body>
</html>
Output:
