10 examples of 'javascript change font color based on value' in JavaScript

125
function changeFontColor(c) {
126
	config.pfc_font_color = c;
127
	updateFontColor(c);
128
}

147
function color(event) {
148
  sketchpad.color = $(event.target).val();
149
}

527
updateFontColorButton() {
528
  const container = this.getColorContainer();
529
  let color = '#000000';
530
  if(container && container.style && container.style.color) {
531
    color = container.style.color;
532
  }
533
  else if (container) {
534
    const el = /** @type {Element} */ (container.nodeType === goog.dom.NodeType.ELEMENT ? container : container.parentElement);
535
    if(el) color = window.getComputedStyle(el).color;
536
  }
537
  // apply the color input and the button to the selection color
538
  // update the button color in the tool bar
539
  this.fontColorButtonEl.style.color = color;
540
  return color;
541
}

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

547
onFontColorClick(event) {
548
  // this.colorInput.focus();
549
  const color = this.updateFontColorButton();
550
  // update the color picker to match the value
551
  // here we need to convert from rgb to hex because color picker is hex and element.style.color is rgb
552
  this.colorInput.value = silex.utils.Style.rgbToHex(color);
553
  // open the browser's color picker
554
  this.colorInput.click();
555
  this.colorInput.onchange = e => {
556
    let container = this.getColorContainer();
557
    // enclose the body into a span, do not apply color to it directly
558
    // same for a simple text nodes
559
    if(container.nodeName.toLowerCase() === 'body' || container.nodeType === goog.dom.NodeType.TEXT) {
560
      container = document.createElement('span');
561
      this.textField.getRange().surroundContents(container);
562
    }
563
    container.style.color = this.colorInput.value;
564
    this.colorInput.onchange = null;
565
    this.contentChanged();
566
  }
567
}

32
function changeFont(e) {
33
	//localStorage.setItem("pfc_font",e.target.value);
34
	settings.set('pfc_font',e.target.value);
35
	chrome.tabs.executeScript(null, {code:"changeFont("+e.target.value+");"});
36
}

323
set_color(name, index, font) {
324
    const canvas = document.getElementById(name);
325
    const ctx = canvas.getContext("2d");
326
    const rgb = font.get_rgb(index);
327
    ctx.fillStyle = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
328
    ctx.fillRect(0, 0, canvas.width, canvas.height);
329
}

221
function setColor( color ) {
222
	var colorStyle = config[ 'colorButton_' + type + 'Style' ];
223
	// Clean up any conflicting style within the range.
224
	editor.removeStyle( new CKEDITOR.style( colorStyle, { color: 'inherit' } ) );
225
226
	colorStyle.childRule = type == 'back' ?
227
	function( element ) {
228
		// It's better to apply background color as the innermost style. (https://dev.ckeditor.com/ticket/3599)
229
		// Except for "unstylable elements". (https://dev.ckeditor.com/ticket/6103)
230
		return isUnstylable( element );
231
	} : function( element ) {
232
		// Fore color style must be applied inside links instead of around it. (https://dev.ckeditor.com/ticket/4772,https://dev.ckeditor.com/ticket/6908)
233
		return !( element.is( 'a' ) || element.getElementsByTag( 'a' ).count() ) || isUnstylable( element );
234
	};
235
236
	editor.focus();
237
	if ( color ) {
238
		editor.applyStyle( new CKEDITOR.style( colorStyle, { color: color } ) );
239
	}
240
	editor.fire( 'saveSnapshot' );
241
}

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
}

197
function setFont(size) {
198
  document.getElementById("textArea").style.fontSize = size + 'px';
199
	storage.set('fontSizePreference', { fontSizePreference: size }, function(error) {
200
		if (error) throw error;
201
	});
202
}