Full version: jsB@nk » Background » Simple JavaScript Code to Change HTML Element Color
URL: https://www.javascriptbank.com/javascript-code-change-html-element-color.html
This simple JavaScript code example contains two simple functions to change text and background colors of a HTML element. Can be used separately or together. Very helpful JavaScript code for JavaScript beginners.
Full version: jsB@nk » Background » Simple JavaScript Code to Change HTML Element Color
URL: https://www.javascriptbank.com/javascript-code-change-html-element-color.html
<script type="text/javascript">// Created by: Antonio Lupetti | http://woork.blogspot.com/// This script downloaded from www.JavaScriptBank.comfunction changeBg(idLayer){ idLayer_n=document.getElementById(idLayer); if(idLayer_n.style.background==''){ document.getElementById(idLayer).style.background='#dedede'; document.getElementById('cb_text').innerHTML='Changed! Click to restore'; } else { document.getElementById(idLayer).style.background=''; document.getElementById('cb_text').innerHTML='Change Background color'; }}function changeBgInput(idLayer){ idLayer_n=document.getElementById(idLayer); idColor_txt=document.getElementById('myColor_txt').value; idColor_bg=document.getElementById('myColor_bg').value; idLayer_n.style.color=idColor_txt; idLayer_n.style.background=idColor_bg;}</script><div style="text-align: left; width: 70%;"><strong>Example 1</strong><br>Change the background color using a fixed color in the script<br><br><a href="javascript:;" onClick="javascript:changeBg('myLayer')" id="cb_text">Change Background color</a><div id="myLayer">Watch the background color change!</div><br><br><strong>Example 2</strong><br>Change text and background color with user-selected colors:<br><br>Text color:<br><input type="text" id="myColor_txt" name="myColor_txt" value="#FFFFFF"><br>Background color:<br><input type="text" id="myColor_bg" name="myColor_bg" value="#555555"><br><a href="javascript:;" onClick="javascript:changeBgInput('myLayer2');">Change text and background color</a><div id="myLayer2">Watch the text and background colors change!</div></div>