How can I change the color of the <div> using javascript without using onClick
Question
I'm trying to change the background color of the <div> using javascript without clicking the <div> itself. Basically the background color will change by itself or on load.
Here is my HTML Code:
<div id="divChange" onclick="myDIV()">
<span class="glyphicon glyphicon-book" aria-hidden="true"></span> Passport <?php echo "<strong><a href=\"view_latest_passport.php?id=$id\"> $passport</a> / Passport Expiration Date:</strong> $passport_expiration"; ?>
</div>
and here's my javascript code:
<script type="text/javascript">
function myDIV() {
document.getElementById("divChange").style.color="red";
}
</script>
5 answers
solution1
0 2016-07-14 05:01:02
Try it :
<html> <head></head> <body> <div id="divChange" onclick="myDIV()"> <span class="glyphicon glyphicon-book" aria-hidden="true"></span> Passport <?php echo "<strong><a href=\\"view_latest_passport.php?id=$id\\"> $passport</a> / Passport Expiration Date:</strong> $passport_expiration"; ?> </div> <script> document.getElementById("divChange").style.backgroundColor="red"; </script> </body> </html>
solution2
0 2016-07-14 05:01:21
Use window.onload event to trigger myDIV method
//call your myDIV on window.onload window.onload = function(){ myDIV(); } function myDIV() { //this triggers only the text color document.getElementById("divChange").style.color="white"; //use this to change background color document.getElementById("divChange").style.backgroundColor="red"; }
<div id="divChange">Sample DIV</div>
solution3
0 2016-07-14 05:13:41
Execute a JavaScript immediately after a page has been loaded, check link.
http://codepen.io/anil329/pen/kXvaPr
<html>
<head>
<title></title>
</head>
<body onload="myDiv()">
<div id="divChange">
<span class="glyphicon glyphicon-book" aria-hidden="true"></span> Passport
</div>
<script>
function myDiv() {
document.getElementById("divChange").style.color="red";
}
</script>
</body>
</html>
solution4
0 2016-07-14 06:06:32
Alternative #1 (with JQuery)
If you are using JQuery you can use this example .
$('document').ready(function() { var div = document.getElementById('divChange'); div.style.backgroundColor = 'red'; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="divChange"> <span class="glyphicon glyphicon-book" aria-hidden="true"></span> Passport <strong><a href="view_latest_passport.php?id=$id"> My Passport</a> / Passport Expiration Date:</strong> 23 JUN 2015 </div>
Alternative #2 (without JQuery)
Also you can use this code
<body onload="myDiv()"> ... <div id="divChange"> <span class="glyphicon glyphicon-book" aria-hidden="true"></span> Passport <strong> <a href="view_latest_passport.php?id=$id"> My Passport</a> Passport Expiration Date:</strong> 23 JUN 2015 </div> ... <script> function myDiv() { var div = document.getElementById( 'divChange' ); div.style.backgroundColor = 'red'; } </script> </body>
solution5
0 2016-07-14 07:56:23
Call your myDIV() method onload event.
<body onload="myDIV()">
your content goes here.
</body>
Thanks.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I change div HTML tag via button onclick event using javascript
Unable to change background color of multiple div onclick using javascript
How do I change the color of a div with onclick by calling a function in JavaScript?
How can I make a div appear onclick using Javascript?
How do i change background color of div using Javascript function
How to change background color of a div using javascript?
Change Border Color on div without button using Javascript
How to change button color onclick using javascript only?
Change text onclick div with animation using javascript
How can i Change tab background color on selection using javascript?
Related Tags