Document.bgColor - Web APIs
the deprecated bgcolor property gets or sets the background color of the current document.
... syntax color = document.bgcolor document.bgcolor =color parameters color is a string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
... example document.bgcolor = "darkblue"; notes the default value for this property in firefox is white (#ffffff in hexadecimal).
...And 2 more matches

HTMLTableElement.bgColor - Web APIs
the htmltableelement.bgcolor property represents the background color of the table.
... the bgcolor attribute is deprecated in html 4.01.
... syntax color = table.bgcolor table.bgcolor = color parameters color is a string representing a color value.
... example // set table background colour to lightblue var t = document.getelementbyid('tablea'); t.bgcolor = 'lightblue'; specification dom level 2 html:htmltableelement .bgcolor ...

Color picker tool - CSS: Cascading Style Sheets
ent('div'); node.classname = 'sample'; this.uid = samples.length; this.node = node; this.color = new color(); node.setattribute('sample-id', this.uid); node.setattribute('draggable', 'true'); node.addeventlistener('dragstart', this.dragstart.bind(this)); node.addeventlistener('click', this.pickcolor.bind(this)); samples.push(this); }; colorsample.prototype.updatebgcolor = function updatebgcolor() { this.node.style.backgroundcolor = this.color.getcolor(); }; colorsample.prototype.updatecolor = function updatecolor(color) { this.color.copy(color); this.updatebgcolor(); }; colorsample.prototype.updatehue = function updatehue(color, degree, steps) { this.color.copy(color); var hue = (steps * degree + this.color.hue) % 360; if (hue < 0) hu...
...e += 360; this.color.sethue(hue); this.updatebgcolor(); }; colorsample.prototype.updatesaturation = function updatesaturation(color, value, steps) { var saturation = color.saturation + value * steps; if (saturation <= 0) { this.node.setattribute('data-hidden', 'true'); return; } this.node.removeattribute('data-hidden'); this.color.copy(color); this.color.setsaturation(saturation); this.updatebgcolor(); }; colorsample.prototype.updatelightness = function updatelightness(color, value, steps) { var lightness = color.lightness + value * steps; if (lightness <= 0) { this.node.setattribute('data-hidden', 'true'); return; } this.node.removeattribute('data-hidden'); this.color.copy(color); this.color.setlightness(lightness); this.
...updatebgcolor(); }; colorsample.prototype.updatebrightness = function updatebrightness(color, value, steps) { var brightness = color.value + value * steps; if (brightness <= 0) { this.node.setattribute('data-hidden', 'true'); return; } this.node.removeattribute('data-hidden'); this.color.copy(color); this.color.setvalue(brightness); this.updatebgcolor(); }; colorsample.prototype.updatealpha = function updatealpha(color, value, steps) { var alpha = parsefloat(color.a) + value * steps; if (alpha <= 0) { this.node.setattribute('data-hidden', 'true'); return; } this.node.removeattribute('data-hidden'); this.color.copy(color); this.color.a = parsefloat(alpha.tofixed(2)); this.updatebgcolor(); }; colorsample.prototype.pickcolor = ...
...And 4 more matches

Box-shadow generator - CSS: Cascading Style Sheets
{ for (var i in subscribers) subscribers[i](deltax, deltay); } return { init : init, subscribe : subscribe, unsubscribe : unsubscribe } })(); /* * element class */ var cssclass = function cssclass(id) { this.left = 0; this.top = 0; this.rotate = 0; this.width = 300; this.height = 100; this.display = true; this.border = true; this.zindex = -1; this.bgcolor = new color(); this.id = id; this.node = getelembyid('obj-' + id); this.object = getelembyid(id); this.shadowid = null; this.shadows = [] this.render = []; this.init(); } cssclass.prototype.init = function init() { this.left = ((this.node.parentnode.clientwidth - this.node.clientwidth) / 2) | 0; this.top = ((this.node.parentnode.clientheight - this.node.clientheight) / 2) | 0...
...; this.settop(this.top); this.setleft(this.left); this.setheight(this.height); this.setwidth(this.width); this.bgcolor.sethsv(0, 0, 100); this.updatebgcolor(this.bgcolor); } cssclass.prototype.updatepos = function updatepos(deltax, deltay) { this.left += deltax; this.top += deltay; this.node.style.top = this.top + "px"; this.node.style.left = this.left + "px"; slidermanager.setvalue("left", this.left); slidermanager.setvalue("top", this.top); } cssclass.prototype.setleft = function setleft(value) { this.left = value; this.node.style.left = this.left + "px"; outputmanager.updateproperty(this.id, 'left', this.left + 'px'); } cssclass.prototype.settop = function settop(value) { this.top = value; this.node.style.top = this.top + 'px'; outputmanager.update...
..."1px solid #ccc" : "none"; this.node.style.border = border; } cssclass.prototype.updatebgcolor = function updatebgcolor(color) { this.bgcolor.copy(color); this.node.style.backgroundcolor = color.getcolor(); outputmanager.updateproperty(this.id, 'background-color', color.getcolor()); } cssclass.prototype.updateshadows = function updateshadows() { if (this.render.length === 0) outputmanager.toggleproperty(this.id, 'box-shadow', false); if (this.render.length === 1) outputm...
...And 2 more matches

Using the Web Storage API - Web APIs
testing whether your storage has been populated to start with, in main.js, we test whether the storage object has already been populated (i.e., the page was previously accessed): if(!localstorage.getitem('bgcolor')) { populatestorage(); } else { setstyles(); } the storage.getitem() method is used to get a data item from storage; in this case, we are testing to see whether the bgcolor item exists; if not, we run populatestorage() to add the existing customization values to the storage.
...for example: function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('sr...
... function populatestorage() { localstorage.setitem('bgcolor', document.getelementbyid('bgcolor').value); localstorage.setitem('font', document.getelementbyid('font').value); localstorage.setitem('image', document.getelementbyid('image').value); setstyles(); } the populatestorage() function sets three items in local storage — the background color, font, and image path.
... we've also included an onchange handler on each form element so that the data and styling are updated whenever a form value is changed: bgcolorform.onchange = populatestorage; fontform.onchange = populatestorage; imageform.onchange = populatestorage; responding to storage changes with the storageevent the storageevent is fired whenever a change is made to the storage object (note that this event is not fired for sessionstorage changes).

Making decisions in your code — conditionals - Learn web development
<label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> </select> <h1>this is my website</h1> const select = document.queryselector('select'); const html = document.queryselector('html'); document.body.style.padding = '10px'; function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; } select.onchange = function() { ( select.value === 'black' ) ?
...e code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 450px;width: 95%"> const select = document.queryselector('select'); const html = document.queryselector('.output'); select.onchange = function() { const choice = select.value; // add switch statement } function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; }</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } ...
...nge = function() {\n const choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgcolor, textcolor) {\n html.style.backgroundcolor = bgcolor;\n html.style.color = textcolor;\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); ...

CSSStyleDeclaration.setProperty() - Web APIs
in each case, this is done with the setproperty() method, for example boxpararule.style.setproperty('border', newborder); html <div class="controls"> <button class="border">border</button> <button class="bgcolor">background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; ...
...: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; height: 150px; line-height: 150px; background: red; border: 5px solid purple; color: white; transition: all 1s; } javascript const borderbtn = document.queryselector('.border'); const bgcolorbtn = document.queryselector('.bgcolor'); const colorbtn = document.queryselector('.color'); const box = document.queryselector('.box'); function random(min,max) { const num = math.floor(math.random()*(max-min)) + min; return num; } function randomcolor() { return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')'; } const stylesheet = document.stylesheets[1]; let...
... boxpararule; for(let i = 0; i < stylesheet.cssrules.length; i++) { if(stylesheet.cssrules[i].selectortext === '.box p') { boxpararule = stylesheet.cssrules[i]; } } function setrandomborder() { const newborder = random(1, 50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.addeventlistener('click', setrandombgcolor); colorbtn.addeventlistener('click', setrandomcolor); result specifications specification status comme...

HTMLTableCellElement - Web APIs
htmltablecellelement.bgcolor a domstring containing the background color of the cells.
... it reflects the obsolete bgcolor attribute.
... recommendation the following properties have been obsoleted: align, axis, bgcolor, height, width, ch, choff, nowrap, and valign.

Timing element visibility with the Intersection Observer API - Web APIs
function loadrandomad(replacebox) { let ads = [ { bgcolor: "#cec", title: "eat green beans", body: "make your mother proud—they're good for you!" }, { bgcolor: "aquamarine", title: "millionsoffreebooks.whatever", body: "read classic literature online free!" }, { bgcolor: "lightgrey", title: "3.14 shades of gray: a novel", body: "love really does make the world go round..." }, { ...
... bgcolor: "#fee", title: "flexbox florist", body: "when life's layout gets complicated, send flowers." } ]; let adbox, title, body, timerelem; let ad = ads[math.floor(math.random()*ads.length)]; if (replacebox) { adobserver.unobserve(replacebox); adbox = replacebox; title = replacebox.queryselector(".title"); body = replacebox.queryselector(".body"); timerelem = replacebox.queryselector(".timer"); } else { adbox = document.createelement("div"); adbox.classname = "ad"; title = document.createelement("h2"); body = document.createelement("p"); timerelem = document.createelement("div"); adbox.appendchild(title); adbox.appendchild(body); adbox.appendchild(timerelem); } adbox.style.backgroundcolor = ad.bgcolor; t...
...however, our needs are simple: each ad is represented by an object with three properties: a background color (bgcolor), a title (title), and a body text string (body).

Storage - Web APIs
we first test whether the local storage contains data items using !localstorage.getitem('bgcolor').
... if(!localstorage.getitem('bgcolor')) { populatestorage(); } setstyles(); function populatestorage() { localstorage.setitem('bgcolor', document.getelementbyid('bgcolor').value); localstorage.setitem('font', document.getelementbyid('font').value); localstorage.setitem('image', document.getelementbyid('image').value); } function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getele...
...mentbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } note: to see this running as a complete working example, see our web storage demo.

Creating annotations - Archive of obsolete content
it is initially off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter even...
... $('*').mouseenter(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).css('background-color'); $(matchedelement).css('background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation(); event.preventdefault(); self.port.emit('show', [ document.location.tostring(), $(ancestor).attr("id"), $(matchedelement).text() ] ); }); }); conversely, the a...

HTML: A good basis for accessibility - Learn web development
try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <f...
... <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcolor="#ffffff"...

HTML: A good basis for accessibility - Learn web development
try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <f...
... <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcolor="#ffffff"...

CanvasRenderingContext2D.drawWindow() - Web APIs
syntax void ctx.drawwindow(window, x, y, w, h, bgcolor [, flags]); parameters window the window to render.
... bgcolor a domstring that specifies the color the canvas is filled with before the window is rendered into it.

Introduction to the DOM - Web APIs
ent.body[attr] = value; else throw new error("no support"); } </script> </head> <body> <div style="margin: .5in; height: 400px;"> <p><b><tt>text</tt></b></p> <form> <select onchange="setbodyattr('text', this.options[this.selectedindex].value);"> <option value="black">black</option> <option value="red">red</option> </select> <p><b><tt>bgcolor</tt></b></p> <select onchange="setbodyattr('bgcolor', this.options[this.selectedindex].value);"> <option value="white">white</option> <option value="lightgrey">gray</option> </select> <p><b><tt>link</tt></b></p> <select onchange="setbodyattr('link', this.options[this.selectedindex].value);"> <option value="blue">blue</option> ...
... figure 0.1 sample dom test page in this example, the drop-down menus dynamically update such dom—accessible aspects of the web page as its background color (bgcolor), the color of the hyperlinks (alink), and color of the text (text).