10 examples of 'javascript onclick change background color of div' in JavaScript

55
function changeBackgroundColor(color) {
56
  var script = 'document.body.style.backgroundColor="' + color + '";';
57
  // See https://developer.chrome.com/extensions/tabs#method-executeScript.
58
  // chrome.tabs.executeScript allows us to programmatically inject JavaScript
59
  // into a page. Since we omit the optional first argument "tabId", the script
60
  // is inserted into the active tab of the current window, which serves as the
61
  // default.
62
  chrome.tabs.executeScript({
63
    code: script
64
  });
65
}

193
function selectColor(value) {
194
	buttonCtrl.hidePanel();
195
	buttonCtrl.color(value);
196
	applyFormat(buttonCtrl.settings.format, value);
197
}

74
function divOnclickHandler(elem){
75
  if (elem === document.getElementById('theDIV'))
76
    window.top.eCounters["div onclick"]   += 1;
77
}

33
function highlightColor(color) {
34
  document.getElementById('black').style.border = "2px solid black";
35
  document.getElementById('red').style.border = "2px solid black";
36
  document.getElementById('yellow').style.border = "2px solid black";
37
  document.getElementById('green').style.border = "2px solid black";
38
  document.getElementById('blue').style.border = "2px solid black";
39
40
  document.getElementById(color).style.border = "3px solid orange";
41
  var vColor;
42
  switch( color ) {
43
    case "red":
44
      vColor = [255, 0, 0];
45
      break;
46
    case "yellow":
47
      vColor = [255, 255, 0];
48
      break;
49
    case "green":
50
      vColor = [0, 255, 0];
51
      break;
52
    case "blue":
53
        vColor = [0, 0, 255];
54
      break;
55
    default:
56
      vColor = [0, 0, 0];
57
      break;
58
  }
59
  vwf_view.kernel.setProperty( appID, "lineColor", vColor );
60
}

13
function change_color(obj,id,c,c2){c=(c==null)?'ored':c;c2=(c==null)?'osilver':c2;var ii=document.getElementById(id);if(obj.checked){ii.setAttribute("class",c);ii.setAttribute("className",c)}else{ii.setAttribute("class",c2);ii.setAttribute("className",c2)}}function checkAll(form,id,_do_c_,c,c2){for(var i=0;i<form.elements.length;i++){if(form.elements[i].getAttribute("rel")!=id)continue;if(form.elements[i].checked){uncheckAll(form,id,_do_c_,c,c2);break}form.elements[i].checked=true;change_color(form.elements[i],_do_c_+'['+form.elements[i].value+']',c,c2)}}function uncheckAll(form,id,_do_c_,c,c2){for(var i=0;i<form.elements.length;i++){if(form.elements[i].getAttribute("rel")!=id)continue;form.elements[i].checked=false;change_color(form.elements[i],_do_c_+'['+form.elements[i].value+']',c,c2)}}function change_color_exts(id){eval('var ii = document.getElementById("su['+id+']");');eval('var g_obj = document.getElementById("gal_'+id+'");');eval('var u_obj = document.getElementById("ual_'+id+'");');if(g_obj.checked&&u_obj.checked){ii.setAttribute("class",'o_all');ii.setAttribute("className",'o_all')}else if(g_obj.checked){ii.setAttribute("class",'o_g');ii.setAttribute("className",'o_g')}else if(u_obj.checked){ii.setAttribute("class",'o_u');ii.setAttribute("className",'o_u')}else{ii.setAttribute("class",'');ii.setAttribute("className",'')}}function checkAll_exts(form,id,_do_c_){for(var i=0;i<form.elements.length;i++){if(form.elements[i].getAttribute("rel")!=id)continue;if(form.elements[i].checked){uncheckAll_exts(form,id,_do_c_);break}form.elements[i].checked=true;change_color_exts(form.elements[i].value)}}function uncheckAll_exts(form,id,_do_c_){for(var i=0;i<form.elements.length;i++){if(form.elements[i].getAttribute("rel")!=id)continue;form.elements[i].checked=false;change_color_exts(form.elements[i].value)}}

216
function handleBackground(d) {
217
	var image = d.original_image_filename;
218
	if (image) {
219
		document.body.style.background = d.bgr_base_color;
220
		var blur = d.bgr_blur;
221
		var opacity = d.bgr_opacity;
222
		var bgrImageDiv = document.getElementById("page.bgr.image");
223
		if(bgrImageDiv) {
224
			currentImage = bgrImageDiv.style.backgroundImage;
225
			newImage = "url(\"" + image + "\")";
226
			if(currentImage !== newImage) {
227
				updateBackground(bgrImageDiv, image, blur, opacity);
228
			}
229
		} else {
230
			createBackground(image, blur, opacity);
231
		}
232
	} else {
233
		document.body.style.background = d.bgr;
234
	}
235
}

3
function setColor(btn, color) {
4
    var count = 1;
5
    var property = document.getElementById(btn);
6
    if (count == 0) {
7
        property.style.backgroundColor = "#FFFFFF"
8
        count = 1;
9
    } else {
10
        property.style.backgroundColor = "#7FFF00"
11
        count = 0;
12
    }
13
14
}

23
function updateColor(id) {
24
  var curr = document.getElementById(id).value;
25
  document.getElementById(id).style.backgroundColor = curr;
26
}

96
function changeDiv() {
97
	var d = document.getElementById("div");
98
	if ( d && d.value ) {
99
		divisor = d.value;
100
		chFreq = freq / d.value;
101
	}
102
	changeCarrier();
103
	
104
	document.getElementById("chf").innerHTML = chFreq / 1000;
105
	document.getElementById("res").innerHTML = 
106
		1000 * 1000 * d.value / freq;
107
	document.getElementById("max").innerHTML = 
108
		2**15 * 1000 * 1000 * d.value / freq;
109
}

38
function changeBackgroundColor () {
39
  const maxIdx = COLORS.length - 1
40
  const idx = Math.floor(Math.random() * Math.floor(maxIdx))
41
  const newColor = COLORS[idx]
42
43
  document.body.style.background = newColor
44
}