Search completed in 1.36 seconds.
HTMLInputElement - Web APIs
the htmlinput
element interface provides special properties and methods for manipulating the options, layout, and presentation of <input>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlinput
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...And 65 more matches
Elements - Archive of obsolete content
<!
element bindings ( binding* ) > hierarchy: root
element may contain: <binding> the bindings
element is the root
element of any xbl document.
... bindings contains zero or more binding
elements as children.
... each binding child
element defines a unique binding that can be attached to
elements in other documents.
...And 58 more matches
HTMLElement - Web APIs
the html
element interface represents any html
element.
... some
elements directly implement this interface, while others implement it via an interface that inherits it.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 58 more matches
SVGSVGElement - Web APIs
the svgsvg
element interface provides access to the properties of <svg>
elements, as well as methods to manipulate them.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 57 more matches
Using custom elements - Web Components
one of the key features of the web components standard is the ability to create custom
elements that encapsulate your functionality on an html page, rather than having to make do with a long, nested batch of
elements that together provide a custom page feature.
... this article introduces the use of the custom
elements api.
... note: custom
elements are supported by default in firefox, chrome, and edge (76).
...And 52 more matches
Element Positioning - Archive of obsolete content
« previousnext » here we'll look at controlling the position and size of an
element.
... box
element positioning so far, we know how to position
elements either horizontally or vertically inside a box.
... we will often need more control over the position and size of
elements within the box.
...And 46 more matches
Timing element visibility with the Intersection Observer API - Web APIs
the intersection observer api makes it easy to be asynchronously notified when
elements of interest become more or less obscured by a shared ancestor node or
element, including the document itself.
...we start with an empty <main>
element here.
... the basics we provide styles for the <body> and <main>
elements to define the site's background as well as the grid the various parts of the site will be placed in.
...And 46 more matches
HTMLSelectElement - Web APIs
the htmlselect
element interface represents a <select> html
element.
... these
elements also share all of the properties and methods of other html
elements via the html
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 45 more matches
nsIDOMXULElement
dom/interfaces/xul/nsidomxul
element.idlscriptable represents a xul
element within the dom.
... 66 introduced gecko 1.0 inherits from: nsidom
element last changed in gecko 1.9 (firefox 3) method overview void blur(); void click(); void docommand(); void focus(); nsidomnodelist get
elementsbyattribute(in domstring name, in domstring value); nsidomnodelist get
elementsbyattributens(in domstring namespaceuri, in domstring name, in domstring value); attributes attribute type description align domstring gets/sets the value of the
element's align attribute.
... allowevents boolean true if the
element's allowevents attribute is the string "true", otherwise false.
...And 42 more matches
HTMLImageElement - Web APIs
the htmlimage
element interface represents an html <img>
element, providing the properties and methods used to manipulate image
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlimage
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...And 42 more matches
Adding Methods to XBL-defined Elements - Archive of obsolete content
« previousnext » next, we'll find out how to add custom methods to xbl-defined
elements.
... methods in addition to adding script properties to the xbl-defined
element, you can also add methods.
...you can define custom methods for your
elements using the method
element.
...And 41 more matches
HTMLAnchorElement - Web APIs
the htmlanchor
element interface represents hyperlink
elements and provides special properties and methods (beyond those of the regular html
element object interface that they inherit from) for manipulating the layout and presentation of such
elements.
... this interface corresponds to <a>
element; not to be confused with <link>, which is represented by htmllink
element) <div id="interfacediagram" style="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/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="n...
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 41 more matches
HTMLTableElement - Web APIs
the htmltable
element interface provides special properties and methods (beyond the regular html
element object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an html document.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmltable
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...And 38 more matches
HTMLButtonElement - Web APIs
the htmlbutton
element interface provides properties and methods (beyond the regular html
element interface it also has available to it by inheritance) for manipulating <button>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlbutton
element" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-...
...And 37 more matches
Custom XUL Elements with XBL - Archive of obsolete content
« previousnext » xml binding language (xbl, sometimes also called extensible bindings language) is a language for describing bindings that can be attached to
elements in other documents.
... the
element that the binding is attached to, called the bound
element, acquires the new behavior specified by the binding.
... this somewhat cryptic explanation describes a very simple concept: with xbl you can create your own custom
elements.
...And 36 more matches
HTMLAreaElement - Web APIs
the htmlarea
element interface provides special properties and methods (beyond those of the regular object html
element interface it also has available to it by inheritance) for manipulating the layout and presentation of <area>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlarea
element" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-fa...
...And 35 more matches
HTMLObjectElement - Web APIs
the htmlobject
element interface provides special properties and methods (beyond those on the html
element interface it also has available to it by inheritance) for manipulating the layout and presentation of <object>
element, representing external resources.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlobject
element" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-...
...And 35 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the html <audio>
element is used to embed sound content in documents.
... it may contain one or more audio sources, represented using the src attribute or the <source>
element: the browser will choose the most suitable one.
... the above example shows simple usage of the <audio>
element.
...And 35 more matches
HTMLFormElement - Web APIs
the htmlform
element interface represents a <form>
element in the dom.
... it allows access to—and, in some cases, modification of—aspects of the form, as well as access to its component
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 33 more matches
HTMLTextAreaElement - Web APIs
the htmltextarea
element interface provides special properties and methods for manipulating the layout and presentation of <textarea>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmltextarea
element" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" fon...
...And 33 more matches
SVGPathElement - Web APIs
the svgpath
element interface corresponds to the <path>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 33 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
the html video
element (<video>) embeds a media player which supports video playback into the document.
... you can use <video> for audio content as well, but the <audio>
element may provide a more appropriate user experience.
... the above example shows simple usage of the <video>
element.
...And 33 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
with css, there are lots of ways to add color to your html
elements to create just the look you want.
... things that can have color at the
element level, everything in html can have color applied to it.
... instead, let's look at things in terms of the kinds of things that are drawn in the
elements, such as text and borders and so forth.
...And 30 more matches
HTMLOutputElement - Web APIs
the htmloutput
element interface provides properties and methods (beyond those inherited from html
element) for manipulating the layout and presentation of <output>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmloutput
element" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-...
...And 29 more matches
HTMLIFrameElement - Web APIs
the htmliframe
element interface provides special properties and methods (beyond those of the html
element interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmliframe
element" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-...
...And 27 more matches
Images, media, and form elements - Learn web development
previous overview: building blocks next in this lesson we will take a look at how certain special
elements are treated in css.
... images, other media, and form
elements behave a little differently in terms of your ability to style them with css than regular boxes.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand the way that some
elements behave unusually when styled with css.
...And 24 more matches
<select>: The HTML Select element - HTML: Hypertext Markup Language
the html <select>
element represents a control that provides a menu of options: the source for this interactive example is stored in a github repository.
...each menu option is defined by an <option>
element nested inside the <select>.
... each <option>
element should have a value attribute containing the data value to submit to the server when that option is selected.
...And 24 more matches
HTMLLinkElement - Web APIs
the htmllink
element 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 htmlanchor
element).
... this object inherits all of the properties and methods of the html
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 23 more matches
HTMLTableCellElement - Web APIs
the htmltablecell
element interface provides special properties and methods (beyond the regular html
element interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an html document.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmltablecell
element" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" fo...
...And 23 more matches
HTMLVideoElement - Web APIs
the htmlvideo
element interface provides special properties and methods for manipulating video objects.
... it also inherits properties and methods of htmlmedia
element and html
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 23 more matches
HTMLFieldSetElement - Web APIs
the htmlfieldset
element interface provides special properties and methods (beyond the regular html
element interface it also has available to it by inheritance) for manipulating the layout and presentation of <fieldset>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlfieldset
element" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" fon...
...And 21 more matches
HTMLMarqueeElement - Web APIs
the htmlmarquee
element interface provides methods to manipulate <marquee>
elements.
... it inherits properties and methods from the html
element interface.
... <div id="interfacediagram" style="display: inline-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/htmlmarquee
element" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmarquee
element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, html
element.
...And 21 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
the html <img>
element embeds an image into the document.
... the above example shows usage of the <img>
element: the src attribute is required, and contains the path to the image you want to embed.
... responsive image hints with sizes and srcset (see also the <picture>
element and our responsive images tutorial).
...And 21 more matches
Adding Properties to XBL-defined Elements - Archive of obsolete content
« previousnext » next, we'll find out how to add custom properties to xbl-defined
elements.
... the xbl interface javascript and the dom provide access to get and set the properties of
elements.
... with xbl, you can define your own properties for the
elements you create.
...And 20 more matches
Adding HTML Elements - Archive of obsolete content
« previousnext » now that we've added some buttons, let's add some other
elements.
... adding html
elements to a window in addition to all of the xul
elements that are available, you can also add html
elements directly within a xul file.
... you can actually use any html
element in a xul file, meaning that java applets and tables can be placed in a window.
...And 19 more matches
HTMLScriptElement - Web APIs
html <script>
elements expose the htmlscript
element interface, which provides special properties and methods for manipulating the behavior and execution of <script>
elements (beyond the inherited html
element interface).
...if the script is blocked, its
element receives an error event; otherwise, it receives a load event.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 19 more matches
HTMLOptionElement - Web APIs
the htmloption
element interface represents <option>
elements and inherits all classes and methods of the html
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmloption
element" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-...
...And 18 more matches
HTMLTableRowElement - Web APIs
the htmltablerow
element interface provides special properties and methods (beyond the html
element interface it also has available to it by inheritance) for manipulating the layout and presentation of rows in an html table.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmltablerow
element" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" fon...
...And 18 more matches
SVGAnimationElement - Web APIs
the svganimation
element interface is the base interface for all of the animation
element interfaces: svganimate
element, svgset
element, svganimatecolor
element, svganimatemotion
element and svganimatetransform
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svganimation
element" target="_top"><rect x="291" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-...
...And 18 more matches
SVGTextContentElement - Web APIs
the svgtextcontent
element interface is implemented by
elements that support rendering child text content.
... it is inherited by various text-related interfaces, such as svgtext
element, svgtspan
element, svgtref
element, svgaltglyph
element and svgtextpath
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 18 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
the html external resource link
element (<link>) specifies relationships between the current document and an external resource.
... this
element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
... to link an external stylesheet, you'd include a <link>
element inside your <head> like this: <link href="main.css" rel="stylesheet"> this simple example provides the path to the stylesheet inside an href attribute, and a rel attribute with a value of stylesheet.
...And 18 more matches
CustomElementRegistry.define() - Web APIs
the define() method of the custom
elementregistry interface defines a new custom
element.
... there are two types of custom
elements you can create: autonomous custom
element: standalone
elements; they don't inherit from built-in html
elements.
... customized built-in
element: these
elements inherit from — and extend — built-in html
elements.
...And 17 more matches
SVGFEConvolveMatrixElement - Web APIs
the svgfeconvolvematrix
element interface corresponds to the <feconvolvematrix>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfeconvolvematrix
element" target="_top"><rect x="221" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="94" font-size="12px...
...And 17 more matches
HTMLCanvasElement - Web APIs
the htmlcanvas
element interface provides properties and methods for manipulating the layout and presentation of <canvas>
elements.
... the htmlcanvas
element interface also inherits the properties and methods of the html
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 16 more matches
<dfn>: The Definition element - HTML: Hypertext Markup Language
the html definition
element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence.
... the <p>
element, the <dt>/<dd> pairing, or the <section>
element which is the nearest ancestor of the <dfn> is considered to be the definition of the term.
... permitted content phrasing content, but no <dfn>
element must be a descendant.
...And 16 more matches
HTMLBodyElement - Web APIs
the htmlbody
element interface provides special properties (beyond those inherited from the regular html
element interface) for manipulating <body>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlbody
element" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-fa...
...And 15 more matches
element() - CSS: Cascading Style Sheets
the
element() css function defines an <image> value generated from an arbitrary html
element.
... this image is live, meaning that if the html
element is changed, the css properties using the resulting value are automatically updated.
... a particularly useful scenario for using this would be to render an image in an html <canvas>
element, then use that as a background.
...And 15 more matches
Inline elements - HTML: Hypertext Markup Language
html (hypertext markup language)
elements historically were categorized as either "block-level"
elements or "inline-level"
elements.
... inline
elements are those which only occupy the space bounded by the tags defining the
element, instead of breaking the flow of the content.
... in this article, we'll examine html inline-level
elements and how they differ from block-level
elements.
...And 15 more matches
Element.classList - Web APIs
the
element.classlist is a read-only property that returns a live domtokenlist collection of the class attributes of the
element.
... using classlist is a convenient alternative to accessing an
element's list of classes as a space-delimited string via
element.classname.
... syntax const
elementclasses =
elementnodereference.classlist; returns a domtokenlist representing the contents of the
element's class attribute.
...And 14 more matches
Element.requestFullscreen() - Web APIs
the
element.requestfullscreen() method issues an asynchronous request to make the
element be displayed in full-screen mode.
... it's not guaranteed that the
element will be put into full screen mode.
... if permission to enter full screen mode is granted, the returned promise will resolve and the
element will receive a fullscreenchange event to let it know that it's now in full screen mode.
...And 14 more matches
HTMLTableSectionElement - Web APIs
the htmltablesection
element interface provides special properties and methods (beyond the html
element interface it also has available to it by inheritance) for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an html table.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmltablesection
element" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px"...
...And 14 more matches
HTMLTrackElement - Web APIs
the htmltrack
element interface represents an html <track>
element within the dom.
... this
element can be used as a child of either <audio> or <video> to specify a text track containing information such as closed captions or subtitles.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 14 more matches
SVGCircleElement - Web APIs
the svgcircle
element interface is an interface for the <circle>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 14 more matches
SVGElement - Web APIs
all of the svg dom interfaces that correspond directly to
elements in the svg language derive from the svg
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentand
elementeventhandlers,
element,
elementcssinlinestyle, globaleventhandlers, htmlorforeign
element, svg
elementinstance svg
element.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.
...And 14 more matches
<picture>: The Picture element - HTML: Hypertext Markup Language
the html <picture>
element contains zero or more <source>
elements and one <img>
element to offer alternative versions of an image for different display/device scenarios.
... the browser will consider each child <source>
element and choose the best match among them.
... if no matches are found—or the browser doesn't support the <picture>
element—the url of the <img>
element's src attribute is selected.
...And 14 more matches
Document.getElementById() - Web APIs
the document method get
elementbyid() returns an
element object representing the
element whose id property matches the specified string.
... since
element ids are required to be unique if specified, they're a useful way to get access to a specific
element quickly.
... if you need to get access to an
element which doesn't have an id, you can use queryselector() to find the
element using any selector.
...And 13 more matches
Element.innerHTML - Web APIs
the
element property innerhtml gets or sets the html or xml markup contained within the
element.
... to insert the html into the document rather than replace the contents of an
element, use the method insertadjacenthtml().
... syntax const content =
element.innerhtml;
element.innerhtml = htmlstring; value a domstring containing the html serialization of the
element's descendants.
...And 13 more matches
HTMLHyperlinkElementUtils - Web APIs
the htmlhyperlink
elementutils mixin defines utility methods and properties to work with htmlanchor
element and htmlarea
element.
... there are no objects of this type, but several objects such as htmlanchor
element and htmlarea
element implement it.
... htmlhyperlink
elementutils.href this a stringifier property that returns a usvstring containing the whole url, and allows the href to be updated.
...And 13 more matches
SVGImageElement - Web APIs
the svgimage
element interface corresponds to the <image>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 13 more matches
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
the html bring attention to
element (<b>) is used to draw the reader's attention to the
element's contents, which are not otherwise granted special importance.
... this was formerly known as the boldface
element, and most browsers still draw the text in boldface.
... however, you should not use <b> for styling text; instead, you should use the css font-weight property to create boldface text, or the <strong>
element to indicate that text is of special importance.
...And 13 more matches
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
the html keyboard input
element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
... by convention, the user agent defaults to rendering the contents of a <kbd>
element using its default monospace font, although this is not mandated by the html standard.
... <kbd> may be nested in various combinations with the <samp> (sample output)
element to represent various forms of input or output based on visual cues.
...And 13 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
the html table body
element (<tbody>) encapsulates a set of table rows (<tr>
elements), indicating that they comprise the body of the table (<table>).
... the <tbody>
element, along with its cousins <thead> and <tfoot>, provide useful semantic information that can be used when rendering for either screen or printer as well as for accessibility purposes.
... permitted content zero or more <tr>
elements.
...And 13 more matches
JS_AliasElement
syntax jsbool js_alias
element(jscontext *cx, jsobject *obj, const char *name, jsint alias); name type description cx jscontext * the context in which to create the alias.
... name const char * name of the
element for which to create an alias.
... this name corresponds to a string representation of the
element's current index number.
...And 12 more matches
Document.createElementNS() - Web APIs
creates an
element with the specified namespace uri and qualified name.
... to create an
element without specifying a namespace uri, use the create
element() method.
... syntax var
element = document.create
elementns(namespaceuri, qualifiedname[, options]); parameters namespaceuri a string that specifies the namespace uri to associate with the
element.
...And 12 more matches
Document.getElementsByTagName() - Web APIs
the get
elementsbytagname method of document interface returns an htmlcollection of
elements with the given tag name.
...the returned htmlcollection is live, meaning that it updates itself automatically to stay in sync with the dom tree without having to call document.get
elementsbytagname() again.
... syntax var
elements = document.get
elementsbytagname(name);
elements is a live htmlcollection (but see the note below) of found
elements in the order they appear in the tree.
...And 12 more matches
HTMLHtmlElement - Web APIs
the htmlhtml
element interface serves as the root node for a given html document.
... this object inherits the properties and methods described in the html
element interface.
... you can retrieve the htmlhtml
element object for a given document by reading the value of the document.document
element property.
...And 12 more matches
HTMLLabelElement - Web APIs
the htmllabel
element interface gives access to properties specific to <label>
elements.
... it inherits methods and properties from the base html
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 12 more matches
HTMLLegendElement - Web APIs
the htmllegend
element is an interface allowing to access properties of the <legend>
elements.
... it inherits properties and methods from the html
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 12 more matches
HTMLMeterElement - Web APIs
the html <meter>
elements expose the htmlmeter
element interface, which provides special properties and methods (beyond the html
element object interface they also have available to them by inheritance) for manipulating the layout and presentation of <meter>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlmeter
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...And 12 more matches
HTMLStyleElement - Web APIs
the htmlstyle
element interface represents a <style>
element.
... it inherits properties and methods from its parent, html
element, and from linkstyle.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 12 more matches
HTMLTableColElement - Web APIs
the htmltablecol
element interface provides special properties (beyond the html
element interface it also has available to it inheritance) for manipulating single or grouped table column
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmltablecol
element" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" fon...
...And 12 more matches
SVGAElement - Web APIs
the svga
element interface provides access to the properties of <a>
element, as well as methods to manipulate them.
... properties this interface also inherits properties from its parent, svggraphics
element, and implements properties from svgurireference and htmlhyperlink
elementutils.
... svga
element.download see htmlanchor
element.download.
...And 12 more matches
SVGComponentTransferFunctionElement - Web APIs
the svgcomponenttransferfunction
element interface defines a base interface used by the component transfer function interfaces.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgcomponenttransferfunction
element" target="_top"><rect x="131" y="65" width="350" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-s...
...And 12 more matches
SVGFESpotLightElement - Web APIs
the svgfespotlight
element interface corresponds to the <fespotlight>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfespotlight
element" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" fon...
...And 12 more matches
SVGGeometryElement - Web APIs
the svggeometry
element interface represents svg
elements whose rendering is defined by geometry with an equivalent path, and which can be filled and stroked.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 12 more matches
SVGRectElement - Web APIs
the svgrect
element interface provides access to the properties of <rect>
elements, as well as methods to manipulate them.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 12 more matches
SVGUseElement - Web APIs
svg use dom interface the svguse
element interface corresponds to the <use>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 12 more matches
<body>: The Document Body element - HTML: Hypertext Markup Language
the html <body>
element represents the content of an html document.
... there can be only one <body>
element in a document.
... tag omission the start tag may be omitted if the first thing inside it is not a space character, comment, <script>
element or <style>
element.
...And 12 more matches
<button>: The Button element - HTML: Hypertext Markup Language
the html <button>
element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
... content categories flow content, phrasing content, interactive content, listed, labelable, and submittable form-associated
element, palpable content.
... permitted parents any
element that accepts phrasing content.
...And 12 more matches
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
the html disclosure summary
element (<summary>)
element specifies a summary, caption, or legend for a <details>
element's disclosure box.
... clicking the <summary>
element toggles the state of the parent <details>
element open and closed.
... permitted content phrasing content or one
element of heading content tag omission none, both the start tag and the end tag are mandatory.
...And 12 more matches
<template>: The Content Template element - HTML: Hypertext Markup Language
the html content template (<template>)
element is a mechanism for holding html that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using javascript.
...while the parser does process the contents of the <template>
element while loading the page, it does so only to ensure that those contents are valid; the
element's contents are not rendered, however.
... content categories metadata content, flow content, phrasing content, script-supporting
element permitted content no restrictions tag omission none, both the starting and ending tag are mandatory.
...And 12 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
the html <tr>
element defines a row of cells in a table.
... the row's cells can then be established using a mix of <td> (data cell) and <th> (header cell)
elements.
...we have some examples below, but for more examples and an in-depth tutorial, see the html tables series in our learn web development area, where you'll learn how to use the table
elements and their attributes to get just the right layout and formatting for your tabular data.
...And 12 more matches
XForms Repeat Element - Archive of obsolete content
introduction a repeat
element contains markup and is itself bound to a nodeset in an instance document (see the spec).
... for each node in the nodeset, the contents of the repeat
element will be displayed in the form.
... number - isn't supported type restrictions the repeat
element can be bound to a nodeset.
...And 11 more matches
Document.createElement() - Web APIs
in an html document, the document.create
element() method creates the html
element specified by tagname, or an htmlunknown
element if tagname isn't recognized.
... syntax let
element = document.create
element(tagname[, options]); parameters tagname a string that specifies the type of
element to be created.
... the nodename of the created
element is initialized with the value of tagname.
...And 11 more matches
Element.getClientRects() - Web APIs
the getclientrects() method of the
element interface returns a collection of domrect objects that indicate the bounding rectangles for each css border box in a client.
... syntax let rectcollection = object.getclientrects(); return value the returned value is a collection of domrect objects, one for each css border box associated with the
element.
...when called on svg
elements other than an outer-<svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the
element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewbox transform, if any).
...And 11 more matches
Element.msZoomTo() - Web APIs
the mszoomto method scrolls and/or zooms an
element to its specified coordinate with animation.
... zoomed
elements can expose their zoom level through mscontentzoom (ie.
... syntax
element.mszoomto(arguments); parameters args[in] type: mszoomtooptions contentx[in]: the x-coordinate of the content that is the target of the scroll/zoom.
...And 11 more matches
HTMLDialogElement - Web APIs
the htmldialog
element interface provides methods to manipulate <dialog>
elements.
... it inherits properties and methods from the html
element interface.
... <div id="interfacediagram" style="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/htmldialog
element" target="_top"><rect x="1" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="86" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldialog
element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, html
element.
...And 11 more matches
HTMLEmbedElement - Web APIs
the htmlembed
element interface provides special properties (beyond the regular html
element interface it also has available to it by inheritance) for manipulating <embed>
elements.
... this topic describes the htmlembed
element interface as defined in the standard.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 11 more matches
HTMLHRElement - Web APIs
the htmlhr
element interface provides special properties (beyond those of the html
element interface it also has available to it by inheritance) for manipulating <hr>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlhr
element" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-fami...
...And 11 more matches
SVGFETurbulenceElement - Web APIs
the svgfeturbulence
element interface corresponds to the <feturbulence>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfeturbulence
element" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" fo...
...And 11 more matches
SVGFilterElement - Web APIs
the svgfilter
element interface provides access to the properties of <filter>
elements, as well as methods to manipulate them.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfilter
element" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-fam...
...And 11 more matches
SVGPatternElement - Web APIs
the svgpattern
element interface corresponds to the <pattern>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgpattern
element" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-fa...
...And 11 more matches
SVGTextPositioningElement - Web APIs
the svgtextpositioning
element interface is implemented by
elements that support attributes that position individual text glyphs.
... it is inherited by svgtext
element, svgtspan
element, svgtref
element and svgaltglyph
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 11 more matches
Replaced elements - CSS: Cascading Style Sheets
in css, a replaced
element is an
element whose representation is outside the scope of css; they're external objects whose representation is independent of the css formatting model.
... put in simpler terms, they're
elements whose contents are not affected by the current document's styles.
... the position of the replaced
element can be affected using css, but not the contents of the replaced
element itself.
...And 11 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
the html details
element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
... a summary or label can be provided using the <summary>
element.
...if the first child of the <details>
element is a <summary>, the contents of the <summary>
element are used as the label for the disclosure widget.
...And 11 more matches
<table>: The Table element - HTML: Hypertext Markup Language
the html <table>
element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
... content categories flow content permitted content in this order: an optional <caption>
element, zero or more <colgroup>
elements, an optional <thead>
element, either one of the following: zero or more <tbody>
elements one or more <tr>
elements an optional <tfoot>
element tag omission none, both the starting and ending tag are mandatory.
... permitted parents any
element that accepts flow content implicit aria role table permitted aria roles any dom interface htmltable
element attributes this
element includes the global attributes.
...And 11 more matches
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
the html <track>
element is used as a child of the media
elements, <audio> and <video>.
... content categories none permitted content none, it is an empty
element.
... tag omission as it is a void
element, the start tag must be present and the end tag must not be present.
...And 11 more matches
HTMLBaseElement - Web APIs
the htmlbase
element interface contains the base uri for a document.
... this object inherits all of the properties and methods as described in the html
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 10 more matches
HTMLLIElement - Web APIs
the htmlli
element interface exposes specific properties and methods (beyond those defined by regular html
element interface it also has available to it by inheritance) for manipulating list
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlli
element" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-fami...
...And 10 more matches
HTMLOListElement - Web APIs
the htmlolist
element interface provides special properties (beyond those defined on the regular html
element interface it also has available to it by inheritance) for manipulating ordered list
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlolist
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...And 10 more matches
HTMLParamElement - Web APIs
the htmlparam
element interface provides special properties (beyond those of the regular html
element object interface it inherits) for manipulating <param>
elements, representing a pair of a key and a value that acts as a parameter for an <object>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlparam
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...And 10 more matches
HTMLSourceElement - Web APIs
the htmlsource
element interface provides special properties (beyond the regular html
element object interface it also has available to it by inheritance) for manipulating <source>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlsource
element" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-...
...And 10 more matches
SVGFEDisplacementMapElement - Web APIs
the svgfedisplacementmap
element interface corresponds to the <fedisplacementmap>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfedisplacementmap
element" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12p...
...And 10 more matches
SVGFEGaussianBlurElement - Web APIs
the svgfegaussianblur
element interface corresponds to the <fegaussianblur>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfegaussianblur
element" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" ...
...And 10 more matches
SVGFESpecularLightingElement - Web APIs
the svgfespecularlighting
element interface corresponds to the <fespecularlighting>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfespecularlighting
element" target="_top"><rect x="201" y="65" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="94" font-size="12...
...And 10 more matches
SVGLineElement - Web APIs
the svgline
element interface provides access to the properties of <line>
elements, as well as methods to manipulate them.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 10 more matches
SVGMaskElement - Web APIs
the svgmask
element interface provides access to the properties of <mask>
elements, as well as methods to manipulate them.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgmask
element" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-famil...
...And 10 more matches
<br>: The Line Break element - HTML: Hypertext Markup Language
the html <br>
element produces a line break in text (carriage-return).
... as you can see from the above example, a <br>
element is included at each point where we want the text to break.
... note: do not use <br> to create margins between paragraphs; wrap them in <p>
elements and use the css margin property to control their size.
...And 10 more matches
<em>: The Emphasis element - HTML: Hypertext Markup Language
the html <em>
element marks text that has stress emphasis.
... the <em>
element can be nested, with each level of nesting indicating a greater degree of emphasis.
... permitted parents any
element that accepts phrasing content.
...And 10 more matches
<output>: The Output element - HTML: Hypertext Markup Language
the html output
element (<output>) is a container
element into which a site or app can inject the results of a calculation or the outcome of a user action.
... content categories flow content, phrasing content, listed, labelable, resettable form-associated
element, palpable content.
... permitted parents any
element that accepts phrasing content.
...And 10 more matches
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
the html ruby base (<rb>)
element is used to delimit the base text component of a <ruby> annotation, i.e.
...one <rb>
element should wrap each separate atomic segment of the base text.
... permitted content as a child of a <ruby>
element.
...And 10 more matches
<script>: The Script element - HTML: Hypertext Markup Language
the html <script>
element is used to embed executable code or data; this is typically used to embed or refer to javascript code.
... the <script>
element can also be used with other languages, such as webgl's glsl shader programming language and json.
... permitted parents any
element that accepts metadata content, or any
element that accepts phrasing content.
...And 10 more matches
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
the html unarticulated annotation
element (<u>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
... this
element used to be called the "underline"
element in older versions of html, and is still sometimes misused in this way.
... permitted parents any
element that accepts phrasing content.
...And 10 more matches
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
« previousnext » next, we'll find out how to add event handlers to xbl-defined
elements.
... event handlers as you might expect, mouse clicks, key presses and other events are passed to each of the
elements inside the content.
...you can add event handlers to the
elements inside the content if needed.
...And 9 more matches
XForms Select1 Element - Archive of obsolete content
the list of pre-defined items can be specified by either item (see the spec) or itemset (see the spec)
elements.
... you can visually group these pre-defined items by using the choices (see the spec)
element to contain them.
... note, some representations of the select1
element do not support visual grouping.
...And 9 more matches
JS_SetElement
syntax /* added in spidermonkey 31 */ bool js_set
element(jscontext *cx, js::handleobject obj, uint32_t index, js::handlevalue v); bool js_set
element(jscontext *cx, js::handleobject obj, uint32_t index, js::handleobject v); bool js_set
element(jscontext *cx, js::handleobject obj, uint32_t index, js::handlestring v); bool js_set
element(jscontext *cx, js::handleobject obj, uint32_t index, int32_t v); bool js_set
element(jscontext *cx, js::handleobject obj, uint32_t index, uint32_t v); bool js_set
element(jscontext *cx, js::handleobject obj, uint32_t index, double v); /* obsolete since jsapi 29 */ bool js_set
element(jscontext *cx, js::handleobject ob...
...j, uint32_t index, js::mutablehandlevalue vp); name type description cx jscontext * the context in which to set the
element.
... index uint32_t index number of the
element to set.
...And 9 more matches
Document.getElementsByTagNameNS() - Web APIs
returns a list of
elements with the given tag name belonging to the given namespace.
... syntax
elements = document.get
elementsbytagnamens(namespace, name)
elements is a live nodelist (but see the note below) of found
elements in the order they appear in the tree.
... namespace is the namespace uri of
elements to look for (see
element.namespaceuri).
...And 9 more matches
Element: fullscreenchange event - Web APIs
the fullscreenchange event is fired immediately after an
element switches into or out of full-screen mode.
... bubbles yes cancelable no interface event event handler property onfullscreenchange this event is sent to the
element which is transitioning into or out of full-screen mode.
... examples in this example, a handler for the fullscreenchange event is added to the
element whose id is fullscreen-div.
...And 9 more matches
Element.getBoundingClientRect() - Web APIs
the
element.getboundingclientrect() method returns the size of an
element and its position relative to the viewport.
... the
element's size is equal to its width/height + padding + border-width in the case that the standard box model is being used, or width/height only if box-sizing: border-box has been set on it.
... syntax domrect =
element.getboundingclientrect(); value the returned value is a domrect object which is the union of the rectangles returned by getclientrects() for the
element, i.e., the css border-boxes associated with the
element.
...And 9 more matches
HTMLAudioElement - Web APIs
the htmlaudio
element interface provides access to the properties of <audio>
elements, as well as methods to manipulate them.
... it's based on, and inherits properties and methods from, the htmlmedia
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 9 more matches
HTMLHeadElement - Web APIs
the htmlhead
element interface contains the descriptive information, or metadata, for a document.
... this object inherits all of the properties and methods described in the html
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 9 more matches
HTMLProgressElement - Web APIs
the htmlprogress
element interface provides special properties and methods (beyond the regular html
element interface it also has available to it by inheritance) for manipulating the layout and presentation of <progress>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlprogress
element" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" fon...
...And 9 more matches
HTMLSelectElement.add() - Web APIs
the htmlselect
element.add() method adds an
element to the collection of option
elements for this select
element.
... syntax collection.add(item[, before]); parameters item is an htmloption
element or htmloptgroup
element before is optional and an
element of the collection, or an index of type long, representing the item item should be inserted before.
... if this parameter is null (or the index does not exist), the new
element is appended to the end of the collection.
...And 9 more matches
HTMLTitleElement - Web APIs
the htmltitle
element interface contains the title for a document.
... this
element inherits all of the properties and methods of the html
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 9 more matches
MediaElementAudioSourceNode - Web APIs
the media
elementaudiosourcenode interface represents an audio source consisting of an html5 <audio> or <video>
element.
... a media
elementsourcenode has no inputs and exactly one output, and is created using the audiocontext.createmedia
elementsource() method.
... the amount of channels in the output equals the number of channels of the audio referenced by the htmlmedia
element used in the creation of the node, or is 1 if the htmlmedia
element has no audio.
...And 9 more matches
SVGEllipseElement - Web APIs
the svgellipse
element interface provides access to the properties of <ellipse>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 9 more matches
SVGFEDiffuseLightingElement - Web APIs
the svgfediffuselighting
element interface corresponds to the <fediffuselighting>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfediffuselighting
element" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12p...
...And 9 more matches
SVGFEDropShadowElement - Web APIs
the svgfedropshadow
element interface corresponds to the <fedropshadow>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfedropshadow
element" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" fo...
...And 9 more matches
SVGFEMorphologyElement - Web APIs
the svgfemorphology
element interface corresponds to the <femorphology>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfemorphology
element" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" fo...
...And 9 more matches
SVGRadialGradientElement - Web APIs
the svgradialgradient
element interface corresponds to the <radialgradient>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggradient
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 9 more matches
SVGTextPathElement - Web APIs
the svgtextpath
element interface corresponds to the <textpath>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 9 more matches
Block-level elements - HTML: Hypertext Markup Language
html (hypertext markup language)
elements historically were categorized as either "block-level"
elements or "inline-level"
elements.
... by default, a block-level
element occupies the entire space of its parent
element (container), thereby creating a "block." this article helps to explain what this means.
... browsers typically display the block-level
element with a newline both before and after the
element.
...And 9 more matches
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
the html <fieldset>
element is used to group several controls as well as labels (<label>) within a web form.
... as the example above shows, the <fieldset>
element provides a grouping for a part of an html form, with a nested <legend>
element providing a caption for the <fieldset>.
... attributes this
element includes the global attributes.
...And 9 more matches
<ol>: The Ordered List element - HTML: Hypertext Markup Language
the html <ol>
element represents an ordered list of items — typically rendered as a numbered list.
... content categories flow content, and if the <ol>
element's children include at least one <li>
element, palpable content.
... permitted content zero or more <li>, <script> and <template>
elements.
...And 9 more matches
HTMLOptGroupElement - Web APIs
the htmloptgroup
element interface provides special properties and methods (beyond the regular html
element object interface they also have available to them by inheritance) for manipulating the layout and presentation of <optgroup>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmloptgroup
element" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" fon...
...And 8 more matches
HTMLTableElement.insertRow() - Web APIs
the htmltable
element.insertrow() method inserts a new row (<tr>) in a given <table>, and returns a reference to the new row.
... if a table has multiple <tbody>
elements, by default, the new row is inserted into the last <tbody>.
... to insert the row into a specific <tbody>: let specific_tbody = document.get
elementbyid(tbody_id); let row = specific_tbody.insertrow(index) note: insertrow() inserts the row directly into the table.
...And 8 more matches
HTMLUListElement - Web APIs
the htmlulist
element interface provides special properties (beyond those defined on the regular html
element interface it also has available to it by inheritance) for manipulating unordered list
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlulist
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...And 8 more matches
HTMLVideoElement.videoHeight - Web APIs
the htmlvideo
element interface's read-only videoheight property indicates the intrinsic height of the video, expressed in css pixels.
... syntax height = htmlvideo
element.videoheight; value an integer value specifying the intrinsic height of the video in css pixels.
... if the
element's readystate is htmlmedia
element.have_nothing, then the value of this property is 0, because neither video nor poster frame size information is yet available.
...And 8 more matches
HTMLVideoElement.videoWidth - Web APIs
the htmlvideo
element interface's read-only videowidth property indicates the intrinsic width of the video, expressed in css pixels.
... syntax width = htmlvideo
element.videowidth; value an integer value specifying the intrinsic width of the video in css pixels.
... if the
element's readystate is htmlmedia
element.have_nothing, then the value of this property is 0, because neither video nor poster frame size information is yet available.
...And 8 more matches
SVGFEBlendElement - Web APIs
the svgfeblend
element interface corresponds to the <feblend>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfeblend
element" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-fa...
...And 8 more matches
SVGFEColorMatrixElement - Web APIs
the svgfecolormatrix
element interface corresponds to the <fecolormatrix>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfecolormatrix
element" target="_top"><rect x="251" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="94" font-size="12px" f...
...And 8 more matches
SVGFECompositeElement - Web APIs
the svgfecomposite
element interface corresponds to the <fecomposite>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfecomposite
element" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" fon...
...And 8 more matches
SVGForeignObjectElement - Web APIs
the svgforeignobject
element interface provides access to the properties of <foreignobject>
elements, as well as methods to manipulate them.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 8 more matches
SVGGradientElement - Web APIs
the svggradient interface is a base interface used by svglineargradient
element and svgradialgradient
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggradient
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-f...
...And 8 more matches
SVGGraphicsElement - Web APIs
the svggraphics
element interface represents svg
elements whose primary purpose is to directly render graphics into a group.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-f...
...And 8 more matches
SVGLinearGradientElement - Web APIs
the svglineargradient
element interface corresponds to the <lineargradient>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggradient
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 8 more matches
SVGMarkerElement - Web APIs
svg path segment interface the svgmarker
element interface corresponds to the marker
element.
... properties this interface also inherits properties from its parent interface, svg
element, and implements properties from svgexternalresourcesrequired, svganimatedpreserveaspectratio, and svgstylable.
... name type description refx svganimatedlength corresponds to attribute refx on the given marker
element.
...And 8 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
the html <a>
element (or anchor
element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a url can address.
... attributes this
element's attributes include the global attributes.
...firefox 79+) setting target="_blank" on <a>
elements implicitly provides the same rel behavior as setting rel="noopener".
...And 8 more matches
<address>: The Contact Address element - HTML: Hypertext Markup Language
the html <address>
element indicates that the enclosed html provides contact information for a person or people, or for an organization.
... the contact information provided by an <address>
element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address, url, email address, phone number, social media handle, geographic coordinates, and so forth.
... the <address>
element should include the name of the person, people, or organization to which the contact information refers.
...And 8 more matches
Element.outerHTML - Web APIs
the outerhtml attribute of the
element dom interface gets the serialized html fragment describing the
element including its descendants.
... it can also be set to replace the
element with nodes parsed from the given string.
... to only obtain the html representation of the contents of an
element, or to replace the contents of an
element, use the innerhtml property instead.
...And 7 more matches
Element.querySelectorAll() - Web APIs
the
element method queryselectorall() returns a static (not live) nodelist representing a list of
elements matching the specified group of selectors which are descendants of the
element on which the method was called.
... syntax
elementlist = parentnode.queryselectorall(selectors); parameters selectors a domstring containing one or more selectors to match against.
...see locating dom
elements using selectors for more information about using selectors to identify
elements.
...And 7 more matches
HTMLBaseFontElement - Web APIs
the htmlbasefont
element interface provides special properties (beyond the regular html
element interface it also has available to it by inheritance) for manipulating <basefont>
elements.
... the <basefont>
element has been deprecated in html4 and removed in html5.
... this latest specification requires that this
element implements htmlunknown
element rather than htmlbasefont
element.
...And 7 more matches
HTMLDListElement - Web APIs
the htmldlist
element interface provides special properties (beyond those of the regular html
element interface it also has available to it by inheritance) for manipulating definition list (<dl>)
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmldlist
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...And 7 more matches
HTMLDivElement - Web APIs
the htmldiv
element interface provides special properties (beyond the regular html
element interface it also has available to it by inheritance) for manipulating <div>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmldiv
element" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-fam...
...And 7 more matches
HTMLFrameSetElement - Web APIs
the htmlframeset
element interface provides special properties (beyond those of the regular html
element interface they also inherit) for manipulating <frameset>
elements.
... properties inherits properties from its parent, html
element and from windoweventhandlers.
... htmlframeset
element.cols is a domstring structured as a comma-seperated list specifing the width of each column inside a frameset.
...And 7 more matches
HTMLInputElement.setSelectionRange() - Web APIs
the htmlinput
element.setselectionrange() method sets the start and end positions of the current text selection in an <input> or <textarea>
element.
... this method updates the htmlinput
element.selectionstart, selectionend, and selectiondirection properties in one call.
...for example, on input of type number: "failed to read the 'selectionstart' property from 'htmlinput
element': the input
element's type ('number') does not support selection".
...And 7 more matches
HTMLMediaElement.audioTracks - Web APIs
the read-only audiotracks property on htmlmedia
element objects returns an audiotracklist object listing all of the audiotrack objects representing the media
element's audio tracks.
... the media
element may be either an <audio>
element or a <video>
element.
... the returned list is live; that is, as tracks are added to and removed from the media
element, the list's contents change dynamically.
...And 7 more matches
HTMLMediaElement.srcObject - Web APIs
the srcobject property of the htmlmedia
element interface sets or returns the object which serves as the source of the media associated with the htmlmedia
element.
...until other browsers catch up, for mediasource, blob and file, consider falling back to creating a url with url.createobjecturl() and assign it to htmlmedia
element.src.
... syntax var sourceobject = htmlmedia
element.srcobject; htmlmedia
element.srcobject = sourceobject; value a mediastream, mediasource, blob, or file object (though see the compatibility table for what is actually supported).
...And 7 more matches
HTMLMetaElement - Web APIs
the htmlmeta
element interface contains descriptive metadata about a document.
... it inherits all of the properties and methods described in the html
element interface.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="...
...And 7 more matches
HTMLModElement - Web APIs
the htmlmod
element interface provides special properties (beyond the regular methods and properties available through the html
element interface they also have available to them by inheritance) for manipulating modification
elements, that is <del> and <ins>.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlmod
element" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-fam...
...And 7 more matches
HTMLParagraphElement - Web APIs
the htmlparagraph
element interface provides special properties (beyond those of the regular html
element object interface it inherits) for manipulating <p>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlparagraph
element" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" fo...
...And 7 more matches
HTMLPreElement - Web APIs
the htmlpre
element interface exposes specific properties and methods (beyond those of the html
element interface it also has available to it by inheritance) for manipulating a block of preformatted text (<pre>).
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlpre
element" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-fam...
...And 7 more matches
HTMLQuoteElement - Web APIs
the htmlquote
element interface provides special properties and methods (beyond the regular html
element interface it also has available to it by inheritance) for manipulating quoting
elements, like <blockquote> and <q>, but not the <cite>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlquote
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...And 7 more matches
HTMLSelectElement.selectedOptions - Web APIs
the read-only htmlselect
element property selectedoptions contains a list of the <option>
elements contained within the <select>
element that are currently selected.
... an option is considered selected if it has an htmloption
element.selected attribute.
... syntax var selectedcollection = htmlselect
element.selectedoptions; value an htmlcollection which lists every currently selected htmloption
element which is either a child of the htmlselect
element or of an htmloptgroup
element within the <select>
element.
...And 7 more matches
HTMLSpanElement - Web APIs
the htmlspan
element interface represents a <span>
element and derives from the html
element interface, but without implementing any additional properties or methods.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlspan
element" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-fa...
...And 7 more matches
HTMLTableCaptionElement - Web APIs
the htmltablecaption
element interface special properties (beyond the regular html
element interface it also has available to it by inheritance) for manipulating table caption
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmltablecaption
element" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px"...
...And 7 more matches
NonDocumentTypeChildNode.nextElementSibling - Web APIs
the nondocumenttypechildnode.next
elementsibling read-only property returns the
element immediately following the specified one in its parent's children list, or null if the specified
element is the last one in the list.
... syntax var nextnode =
elementnodereference.next
elementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <script type="text/javascript"> var el = document.get
elementbyid('div-01').next
elementsibling; console.log('siblings of div-01:'); while (el) { console.log(el.nodename); el = el.next
elementsibling; } </script> this example outputs the following into the console when it loads: siblings of div-01: div script polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-
elements.js if(!("next
elementsibling" in document.document
element)){ object.defineproperty(
element.pr...
...ototype, "next
elementsibling", { get: function(){ var e = this.nextsibling; while(e && 1 !== e.nodetype) e = e.nextsibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/next
elementsibling/next
elementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('next
elementsibling')) { return; } object.defineproperty(item, 'next
elementsibling', { configurable: true, enumerable: true, get: function () { var el = this; while (el = el.nextsibling) { if (el.nodetype === 1) { return el; } } return null; ...
...And 7 more matches
ParentNode.childElementCount - Web APIs
the parentnode.child
elementcount read-only property returns an unsigned long representing the number of child
elements of the given
element.
... this property was initially defined in the
elementtraversal pure interface.
...in this case, child
elementcount moved to parentnode.
...And 7 more matches
SVGFEOffsetElement - Web APIs
the svgfeoffset
element interface corresponds to the <feoffset>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfeoffset
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-f...
...And 7 more matches
SVGFEPointLightElement - Web APIs
the svgfepointlight
element interface corresponds to the <fepointlight>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfepointlight
element" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" fo...
...And 7 more matches
SVGGlyphRefElement - Web APIs
the svgglyphref
element interface corresponds to the <glyphref>
elements.
... <div id="interfacediagram" style="display: inline-block; 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/svgglyphref
element" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphref
element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svg
element an...
... svgglyphref
element.glyphref a domstring corresponding to the glyphref attribute of the given
element.
...And 7 more matches
SVGStyleElement - Web APIs
svg style interface the svgstyle
element interface corresponds to the svg <style>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgstyle
element" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-fami...
...And 7 more matches
<article>: The Article Contents element - HTML: Hypertext Markup Language
the html <article>
element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).
... a given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an <article>
element, possibly with one or more <section>s within.
... permitted parents any
element that accepts flow content.
...And 7 more matches
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
use the html <canvas>
element with either the canvas scripting api or the webgl api to draw graphics and animations.
... permitted content transparent but with no interactive content descendants except for <a>
elements, <button>
elements, <input>
elements whose type attribute is checkbox, radio, or button.
... permitted parents any
element that accepts phrasing content.
...And 7 more matches
<dl>: The Description List element - HTML: Hypertext Markup Language
the html <dl>
element represents a description list.
... the
element encloses a list of groups of terms (specified using the <dt>
element) and descriptions (provided by <dd>
elements).
... common uses for this
element are to implement a glossary or to display metadata (a list of key-value pairs).
...And 7 more matches
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
the html idiomatic text
element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others.
... historically, these have been presented using italicized type, which is the original source of the <i> naming of this
element.
... permitted parents any
element that accepts phrasing content.
...And 7 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
the html inline frame
element (<iframe>) represents a nested browsing context, embedding another html page into the current one.
... permitted parents any
element that accepts embedded content.
... implicit aria role no corresponding role permitted aria roles application, document, img, none, presentation dom interface htmliframe
element attributes this
element includes the global attributes.
...And 7 more matches
<thead>: The Table Head element - HTML: Hypertext Markup Language
the html <thead>
element defines a set of rows defining the head of the columns of the table.
... permitted content zero or more <tr>
elements.
...the end tag may be omitted if the <thead>
element is immediately followed by a <tbody> or <tfoot>
element.
...And 7 more matches
Recording a media element - Web APIs
while the article using the mediastream recording api demonstrates using the mediarecorder interface to capture a mediastream generated by a hardware device, as returned by navigator.mediadevices.getusermedia(), you can also use an html media
element (namely <audio> or <video>) as the source of the mediastream to be recorded.
...on the left is a start button and a <video>
element which displays the video preview; this is the video the user's camera sees.
... <div class="right"> <div id="stopbutton" class="button"> stop </div> <h2>recording</h2> <video id="recording" width="160" height="120" controls></video> <a id="downloadbutton" class="button"> download </a> </div> on the right we see a stop button and the <video>
element which will be used to play back the recorded video.
...And 6 more matches
SVGFEDistantLightElement - Web APIs
the svgfedistantlight
element interface corresponds to the <fedistantlight>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfedistantlight
element" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" ...
...And 6 more matches
SVGFEImageElement - Web APIs
the svgfeimage
element interface corresponds to the <feimage>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfeimage
element" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-fa...
...And 6 more matches
SVGGElement - Web APIs
the svgg
element interface corresponds to the <g>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 6 more matches
SVGSwitchElement - Web APIs
the svgswitch
element interface corresponds to the <switch>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 6 more matches
SVGTextElement - Web APIs
the svgtext
element interface corresponds to the <text>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 6 more matches
WebGL2RenderingContext.drawElementsInstanced() - Web APIs
the webgl2renderingcontext.draw
elementsinstanced() method of the webgl 2 api renders primitives from array data like the gl.draw
elements() method.
... in addition, it can execute multiple instances of a set of
elements.
... syntax void gl.draw
elementsinstanced(mode, count, type, offset, instancecount); parameters mode a glenum specifying the type primitive to render.
...And 6 more matches
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
the html abbreviation
element (<abbr>) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation.
... permitted parents any
element that accepts phrasing content implicit aria role no corresponding role permitted aria roles any dom interface html
element attributes this
element only supports the global attributes.
... the title attribute has a specific semantic meaning when used with the <abbr>
element; it must contain a full human-readable description or expansion of the abbreviation.
...And 6 more matches
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
the html bidirectional isolate
element (<bdi>) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
... the <bdi>
element is used to wrap a span of text and instructs the bidirectional algorithm to treat this text in isolation from its surroundings.
... though the same visual effect can be achieved using the css rule unicode-bidi: isolate on a <span> or another text-formatting
element, html authors should not use this approach because it is not semantic and browsers are allowed to ignore css styling.
...And 6 more matches
<cite>: The Citation element - HTML: Hypertext Markup Language
the html citation
element (<cite>) is used to describe a reference to a cited creative work, and must include the title of that work.
... permitted parents any
element that accepts phrasing content.
... implicit aria role no corresponding role permitted aria roles any dom interface html
element up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspan
element interface for this
element.
...And 6 more matches
<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
the html <content>
element—an obsolete part of the web components suite of technologies—was used inside of shadow dom as an insertion point, and wasn't meant to be used in ordinary html.
... it has now been replaced by the <slot>
element, which creates a point in the dom at which a shadow dom can be inserted.
... note: though present in early draft of the specifications and implemented in several browsers, this
element has been removed in later versions of the spec, and should not be used.
...And 6 more matches
<div>: The Content Division element - HTML: Hypertext Markup Language
the html content division
element (<div>) is the generic container for flow content.
... as a "pure" container, the <div>
element does not inherently represent anything.
... or (in whatwg html): if the parent is a <dl>
element: one or more <dt>
elements followed by one or more <dd>
elements, optionally intermixed with <script> and <template>
elements.
...And 6 more matches
<head>: The Document Metadata (Header) element - HTML: Hypertext Markup Language
the html <head>
element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
...for human-visible information, like top-level headings and listed authors, see the <header>
element.
... permitted content if the document is an <iframe> srcdoc document, or if title information is available from a higher level protocol (like the subject line in html email), zero or more
elements of metadata content.
...And 6 more matches
HTMLDataElement - Web APIs
the htmldata
element interface provides special properties (beyond the regular html
element interface it also has available to it by inheritance) for manipulating <data>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmldata
element" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-fa...
...And 5 more matches
HTMLElement.hidden - Web APIs
the html
element property hidden is a boolean which is true if the
element is hidden; otherwise the value is false.
... this is quite different from using the css property display to control the visibility of an
element.
... content that isn't yet relevant but may be needed later content that was previously needed but is not any longer content that is reused by other parts of the page in a template-like fashion creating an offscreen canvas as a drawing buffer inappropriate use cases include: hiding panels in a tabbed dialog box hiding content in one presentation while intending it to be visible in others
elements that are not hidden must not link to
elements which are.
...And 5 more matches
HTMLElement: input event - Web APIs
the input event fires when the value of an <input>, <select>, or <textarea>
element has been changed.
... bubbles yes cancelable no interface inputevent event handler property globaleventhandlers.oninput the event also applies to
elements with contenteditable enabled, and to any
element when designmode is turned on.
...if these properties apply to multiple
elements, the editing host is the nearest ancestor
element whose parent isn't editable.
...And 5 more matches
HTMLImageElement.crossOrigin - Web APIs
the htmlimage
element interface's crossorigin attribute is a string which specifies the cross-origin resource sharing (cors) setting to use when retrieving the image.
... syntax htmlimage
element.crossorigin = crossoriginmode; let crossoriginmode = htmlimage
element.crossorigin; value a domstring of a keyword specifying the cors mode to use when fetching the image resource.
... permitted values are: anonymous requests by the <img>
element have their mode set to cors and their credentials mode set to same-origin.
...And 5 more matches
HTMLImageElement.loading - Web APIs
the htmlimage
element property loading is a string whose value provides a hint to the user agent that tells the browser how to handle loading images which are currently outside the window's visual viewport.
... syntax let imageloadscheduling = htmlimage
element.loading; htmlimage
element.loading = eagerorlazy; value a domstring providing a hint to the user agent as to how to best schedule the loading of the image to optimize page performance.
... the possible values are: eager the default behavior, eager tells the browser to load the image as soon as the <img>
element is processed.
...And 5 more matches
HTMLMediaElement.networkState - Web APIs
the htmlmedia
element.networkstate property indicates the current state of the fetching of media over the network.
... network_idle 1 htmlmedia
element is active and has selected a resource, but is not using the network.
... network_loading 2 the browser is downloading htmlmedia
element data.
...And 5 more matches
HTMLElement.focus() - Web APIs
the html
element.focus() method sets focus on the specified
element, if it can be focused.
... the focused
element is the
element which will receive keyboard and similar events by default.
... syntax
element.focus(options); // object parameter parameters options optional an optional object providing options to control aspects of the focusing process.
...And 5 more matches
HTMLTemplateElement - Web APIs
the htmltemplate
element interface enables access to the contents of an html <template>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmltemplate
element" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" fon...
...And 5 more matches
NonDocumentTypeChildNode.previousElementSibling - Web APIs
the nondocumenttypechildnode.previous
elementsibling read-only property returns the
element immediately prior to the specified one in its parent's children list, or null if the specified
element is the first one in the list.
... syntax prevnode =
elementnodereference.previous
elementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <li>this is a list item</li> <li>this is another list item</li> <div id="div-03">here is div-03</div> <script> let el = document.get
elementbyid('div-03').previous
elementsibling; document.write('<p>siblings of div-03</p><ol>'); while (el) { document.write('<li>' + el.nodename + '</li>'); el = el.previous
elementsibling; } document.write('</ol>'); </script> this example outputs the following into the page when it loads: siblings of div-03 1.
...div polyfills polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-
elements.js if(!("previous
elementsibling" in document.document
element)){ object.defineproperty(
element.prototype, "previous
elementsibling", { get: function(){ var e = this.previoussibling; while(e && 1 !== e.nodetype) e = e.previoussibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/previous
elementsibling/previous
elementsibling.md (function (arr) { arr.foreach(function (item) { if (item...
...And 5 more matches
ParentNode.firstElementChild - Web APIs
the parentnode.first
elementchild read-only property returns the object's first child
element, or null if there are no child
elements.
... this property was initially defined in the
elementtraversal pure interface.
...in this case, first
elementchild moved to parentnode.
...And 5 more matches
SVGAnimateTransformElement - Web APIs
the svganimatetransform
element interface corresponds to the <animatetransform>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svganimation
element" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-fam...
...And 5 more matches
SVGClipPathElement - Web APIs
the svgclippath
element interface provides access to the properties of <clippath>
elements, as well as methods to manipulate them.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgclippath
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-f...
...And 5 more matches
SVGCursorElement - Web APIs
the svgcursor
element interface provides access to the properties of <cursor>
elements, as well as methods to manipulate them.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgcursor
element" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-fam...
...And 5 more matches
SVGDefsElement - Web APIs
the svgdefs
element interface corresponds to the <defs>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 5 more matches
SVGFEComponentTransferElement - Web APIs
the svgfecomponenttransfer
element interface corresponds to the <fecomponenttransfer>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfecomponenttransfer
element" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="94" font-size="1...
...And 5 more matches
SVGFEFuncAElement - Web APIs
the svgfefunca
element interface corresponds to the <fefunca>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgcomponenttransferfunction
element" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size...
...And 5 more matches
SVGFEFuncBElement - Web APIs
the svgfefuncb
element interface corresponds to the <fefuncb>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgcomponenttransferfunction
element" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size...
...And 5 more matches
SVGFEFuncGElement - Web APIs
the svgfefuncg
element interface corresponds to the <fefuncg>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgcomponenttransferfunction
element" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size...
...And 5 more matches
SVGFEFuncRElement - Web APIs
the svgfefuncr
element interface corresponds to the <fefuncr>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgcomponenttransferfunction
element" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size...
...And 5 more matches
SVGFEMergeNodeElement - Web APIs
the svgfemergenode
element interface corresponds to the <femergenode>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfemergenode
element" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" fon...
...And 5 more matches
SVGFETileElement - Web APIs
the svgfetile
element interface corresponds to the <fetile>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfetile
element" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-fam...
...And 5 more matches
SVGPolygonElement - Web APIs
the svgpolygon
element interface provides access to the properties of <polygon>
elements, as well as methods to manipulate them.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 5 more matches
SVGPolylineElement - Web APIs
the svgpolyline
element interface provides access to the properties of <polyline>
elements, as well as methods to manipulate them.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 5 more matches
SVGScriptElement - Web APIs
the svgscript
element interface corresponds to the svg <script>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgscript
element" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-fam...
...And 5 more matches
SVGSetElement - Web APIs
the svgset
element interface corresponds to the <set>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svganimation
element" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-fam...
...And 5 more matches
SVGStopElement - Web APIs
the svgstop
element interface corresponds to the <stop>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgstop
element" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-famil...
...And 5 more matches
SVGSymbolElement - Web APIs
the svgsymbol
element interface corresponds to the <symbol>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgsymbol
element" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-fam...
...And 5 more matches
SVGTSpanElement - Web APIs
the svgtspan
element interface represents a <tspan>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svggraphics
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-fami...
...And 5 more matches
Window.customElements - Web APIs
the custom
elements read-only property of the window interface returns a reference to the custom
elementregistry object, which can be used to register new custom
elements and get information about previously registered custom
elements.
... examples the most common example you'll see of this property being used is to get access to the custom
elementregistry.define() method to define and register a new custom
element, e.g.: let custom
elementregistry = window.custom
elements; custom
elementregistry.define('my-custom-
element', mycustom
element); however, it is usually shortened to something like the following: custom
elements.define('
element-details', class extends html
element { constructor() { super(); const template = document .get
elementbyid('
element-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); see our web-components-examples repo for more usage examples.
... specification specification status comment html living standardthe definition of 'window.custom
elements' in that specification.
...And 5 more matches
Pseudo-elements - CSS: Cascading Style Sheets
a css pseudo-
element is a keyword added to a selector that lets you style a specific part of the selected
element(s).
... /* the first line of every <p>
element.
... */ p::first-line { color: blue; text-transform: uppercase; } note: in contrast to pseudo-
elements, pseudo-classes can be used to style an
element based on its state.
...And 5 more matches
ParentNode.lastElementChild - Web APIs
the parentnode.last
elementchild read-only property returns the object's last child
element or null if there are no child
elements.
... note: this property was initially defined in the
elementtraversal pure interface.
...in this case, last
elementchild moved to parentnode.
...And 4 more matches
SVGAnimateElement - Web APIs
the svganimate
element interface corresponds to the <animate>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svganimation
element" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-fam...
...And 4 more matches
SVGAnimateMotionElement - Web APIs
the svganimatemotion
element interface corresponds to the <animatemotion>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svganimation
element" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-fam...
...And 4 more matches
SVGDescElement - Web APIs
the svgdesc
element interface corresponds to the <desc>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgdesc
element" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-famil...
...And 4 more matches
SVGFEFloodElement - Web APIs
the svgfeflood
element interface corresponds to the <feflood>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfeflood
element" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-fa...
...And 4 more matches
SVGFEMergeElement - Web APIs
the svgfemerge
element interface corresponds to the <femerge>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgfemerge
element" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-fa...
...And 4 more matches
SVGMPathElement - Web APIs
the svgmpath
element interface corresponds to the <mpath>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgmpath
element" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-fami...
...And 4 more matches
SVGMetadataElement - Web APIs
the svgmetadata
element interface corresponds to the <metadata>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgmetadata
element" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-f...
...And 4 more matches
SVGTitleElement - Web APIs
the svgtitle
element interface corresponds to the <title>
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/svg
element" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
element</text></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/svgtitle
element" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-fami...
...And 4 more matches
SVGViewElement - Web APIs
the svgview
element interface provides access to the properties of <view>
elements, as well as methods to manipulate them.
... properties this interface also inherits properties from its parent interface, svg
element.
... svgview
element.viewtarget an svgstringlist corresponding to the viewtarget attribute of the given <view>
element.
...And 4 more matches
WebGL2RenderingContext.drawRangeElements() - Web APIs
the webgl2renderingcontext.drawrange
elements() method of the webgl api renders primitives from array data in a given range.
... syntax void gl.drawrange
elements(mode, start, end, count, type, offset); parameters mode a glenum specifying the type primitive to render.
... count a glsizei specifying the number of
elements to be rendered.
...And 4 more matches
WebGLRenderingContext.drawElements() - Web APIs
the webglrenderingcontext.draw
elements() method of the webgl api renders primitives from array data.
... syntax void gl.draw
elements(mode, count, type, offset); parameters mode a glenum specifying the type primitive to render.
... count a glsizei specifying the number of
elements to be rendered.
...And 4 more matches
<caption>: The Table Caption element - HTML: Hypertext Markup Language
the html <caption>
element specifies the caption (or title) of a table.
... tag omission the end tag can be omitted if the
element is not immediately followed by ascii whitespace or a comment.
... permitted parents a <table>
element, as its first descendant.
...And 4 more matches
<command>: The HTML Command element - HTML: Hypertext Markup Language
the html command
element (<command>) represents a command which the user can invoke.
... the <command>
element is included in the w3c specification, but not in the whatwg specification, and browser support is nonexistent.
... you should use the <menuitem>
element instead, although that
element is non-standard and only supported in edge and firefox.
...And 4 more matches
<dir>: The Directory element (obsolete) - HTML: Hypertext Markup Language
the obsolete html directory
element (<dir>) is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent.
... do not use this obsolete
element; instead, you should use the <ul>
element for lists, including lists of files.
... usage note: do not use this
element.
...And 4 more matches
HTMLMediaElement.error - Web APIs
the htmlmedia
element.error is the mediaerror object for the most recent error, or null if there has not been an error.
... when an error event is received by the
element, you can determine details about what happened by examining this object.
... syntax var myerror = htmlmedia
element.error; value a mediaerror object describing the most recent error to occur on the media
element or null if no errors have occurred.
...And 3 more matches
HTMLMediaElement.play() - Web APIs
the htmlmedia
element play() method attempts to begin playback of the media.
... syntax var promise = htmlmedia
element.play(); parameters none.
... example this example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback: let videoelem = document.get
elementbyid("video"); let playbutton = document.get
elementbyid("playbutton"); playbutton.addeventlistener("click", handleplaybutton, false); playvideo(); async function playvideo() { try { await videoelem.play(); playbutton.classlist.add("playing"); } catch(err) { playbutton.classlist.remove("playing"); } } function handleplaybutton() { if (videoelem.paused) { playvideo(); } ...
...And 3 more matches
HTMLMenuElement - Web APIs
the htmlmenu
element interface provides special properties (beyond those defined on the regular html
element interface it also has available to it by inheritance) for manipulating <menu>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlmenu
element" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-fa...
...And 3 more matches
HTMLOrForeignElement.dataset - Web APIs
the dataset read-only property of the htmlorforeign
element interface provides read/write access to all the custom data attributes (data-*) set on the
element.
... 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.
... syntax const dataattrmap =
element.dataset value a domstringmap.
...And 3 more matches
HTMLOrForeignElement.tabIndex - Web APIs
the tabindex property of the htmlorforeign
element interface represents the tab order of the current
element.
... tab order is as follows:
elements with a positive tabindex.
...
elements that have identical tabindex values should be navigated in the order they appear.
...And 3 more matches
HTMLPictureElement - Web APIs
the htmlpicture
element interface represents a <picture> html
element.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlpicture
element" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font...
...And 3 more matches
HTMLSelectElement.remove() - Web APIs
the htmlselect
element.remove() method removes the
element at the specified index from the options collection for this select
element.
... syntax collection.remove(index); parameters index is a long for the index of the htmloption
element to remove from the collection.
... example var sel = document.get
elementbyid("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 'htmlselect
element.remove()' in that specification.
...And 3 more matches
HTMLShadowElement - Web APIs
the htmlshadow
element interface represents a <shadow> html
element, which is used in shadow dom.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlshadow
element" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-...
...And 3 more matches
HTMLStyleElement.media - Web APIs
the htmlstyle
element.media property specifies the intended destination medium for style information.
... example <!doctype html> <html> <head> <link id="linkedstyle" rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style id="inlinestyle" rel="stylesheet" type="text/css" media="screen, print"> p { color: blue; } </style> </head> <body> <script> alert('linkedstyle: ' + document.get
elementbyid('linkedstyle').media); // 'screen' alert('inlinestyle: ' + document.get
elementbyid('inlinestyle').media); // 'screen, print' </script> </body> </html> specifications specification status comment html living standardthe definition of 'htmlstyle
element' in that specification.
... living standard html 5.1the definition of 'htmlstyle
element' in that specification.
...And 3 more matches
HTMLTableElement.caption - Web APIs
the htmltable
element.caption property represents the table caption.
... if no caption
element is associated with the table, this property is null.
... syntax var string = table
element.caption; example if (table.caption) { // do something with the caption } specifications specification status comment html living standardthe definition of 'htmltable
element.caption' in that specification.
...And 3 more matches
SVGAltGlyphElement - Web APIs
the svgaltglyph
element interface represents an <altglyph>
element.
... properties this interface also inherits properties from its parent interface, svggraphics
element.
... svgaltglyph
element.glyphref it corresponds to the attribute glyphref on the given
element.
...And 3 more matches
SVGColorProfileElement - Web APIs
the svgcolorprofile
element interface corresponds to the <color-profile>
element.
... properties svgcolorprofile
element.local a domstring corresponding to the local attribute of the given
element.
... svgcolorprofile
element.name a domstring corresponding to the name attribute of the given
element.
...And 3 more matches
SVGFontFaceElement - Web APIs
the svgfontface
element interface corresponds to the <font-face>
elements.
... object-oriented access to the attributes of the <font-face>
element via the svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; 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/svgfontface
element" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontface
element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its pare...
...And 3 more matches
SVGFontFaceFormatElement - Web APIs
the svgfontfaceformat
element interface corresponds to the <font-face-format>
elements.
... object-oriented access to the attributes of the <font-face-format>
element via the svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; 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/svgfontfaceformat
element" target="_top"><rect x="1" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceformat
element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties ...
...And 3 more matches
SVGFontFaceNameElement - Web APIs
the svgfontfacename
element interface corresponds to the <font-face-name>
elements.
... object-oriented access to the attributes of the <font-face-name>
element via the svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; 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/svgfontfacename
element" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfacename
element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from...
...And 3 more matches
Document.scrollingElement - Web APIs
the scrolling
element read-only property of the document interface returns a reference to the
element that scrolls the document.
... in standards mode, this is the root
element of the document, document.document
element.
... when in quirks mode, the scrolling
element attribute returns the html body
element if it exists and is not potentially scrollable, otherwise it returns null.
... syntax var
element = document.scrolling
element; example var scrollelm = document.scrolling
element; scrollelm.scrolltop = 0; specifications specification status comment css object model (cssom) view modulethe definition of 'scrolling
element' in that specification.
DocumentOrShadowRoot.fullscreenElement - Web APIs
the documentorshadowroot.fullscreen
element read-only property returns the
element that is currently being presented in full-screen mode in this document, or null if full-screen mode is not currently in use.
... syntax var
element = document.fullscreen
element; return value the
element object that's currently in full-screen mode; if full-screen mode isn't currently in use by the document>, the returned value is null.
... example this example presents a function, isvideoinfullscreen(), which looks at the value returned by fullscreen
element; if the document is in full-screen mode (fullscreen
element isn't null) and the full-screen
element's nodename is video, indicating a <video>
element, the function returns true, indicating that the video is in full-screen mode.
... function isvideoinfullscreen() { if (document.fullscreen
element && document.fullscreen
element.nodename == 'video') { return true; } return false; } specifications specification status comment fullscreen apithe definition of 'document.fullscreen
element' in that specification.
Element.clientHeight - Web APIs
the
element.clientheight read-only property is zero for
elements with no css or inline layout boxes; otherwise, it's the inner height of an
element in pixels.
... 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.
...if you need a fractional value, use
element.getboundingclientrect().
... syntax var intelemclientheight =
element.clientheight; intelemclientheight is an integer corresponding to the clientheight of
element in pixels.
Element.clientWidth - Web APIs
the
element.clientwidth property is zero for inline
elements and
elements with no css; otherwise, it's the inner width of an
element in pixels.
... when clientwidth is used on the root
element (the <html>
element), (or on <body> if the document is in quirks mode), the viewport's width (excluding any scrollbar) is returned.
...if you need a fractional value, use
element.getboundingclientrect().
... syntax var intelemclientwidth =
element.clientwidth; intelemclientwidth is an integer corresponding to the clientwidth of
element in pixels.
Element.computedStyleMap() - Web APIs
the computedstylemap() method of the
element interface returns a stylepropertymapreadonly interface which provides a read-only representation of a css declaration block that is an alternative to cssstyledeclaration.
... syntax var stylepropertymapreadonly =
element.computedstylemap() parameters none.
... // get the
element const my
element = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = my
element.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of allcomputedstyles) { //...
... properties const cssproperty = document.create
element('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.create
element('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } in browsers that support computedstylemap(), you'll see a list of all the css properties and values.
Element.createShadowRoot() - Web APIs
use
element.createshadowroot to create an instance of shadow dom.
... when shadow dom is created, it is always attached to an existing
element.
... after the shadow dom is created, the
element that it is attached to is called the shadow root.
... syntax var shadowroot =
element.createshadowroot(); parameters no parameters.
Element.getAttributeNames() - Web APIs
the getattributenames() method of the
element interface returns the attribute names of the
element as an array of strings.
... if the
element has no attributes it returns an empty array.
... using getattributenames() along with getattribute(), is a memory-efficient and performant alternative to accessing
element.attributes.
... syntax let attributenames =
element.getattributenames(); example // iterate over
element's attributes for (let name of
element.getattributenames()) { let value =
element.getattribute(name); console.log(name, value); } polyfill if (
element.prototype.getattributenames == undefined) {
element.prototype.getattributenames = function () { var attributes = this.attributes; var length = attributes.length; var result = new array(length); for (var i = 0; i < length; i++) { result[i] = attributes[i].name; } return result; }; } specifications specification status comment domthe definition of '
element.getattributenames' in that specification.
Element.hasAttributes() - Web APIs
the hasattributes() method of the
element interface returns a boolean indicating whether the current
element has any attributes or not.
... syntax var result =
element.hasattributes(); return value result holds the return value true or false.
... examples let foo = document.get
elementbyid('foo'); if (foo.hasattributes()) { // do something with 'foo.attributes' } polyfill ;(function(prototype) { prototype.hasattributes = prototype.hasattributes || function() { return (this.attributes.length > 0); } })(
element.prototype); specifications specification status comment domthe definition of '
element.hasattributes()' in that specification.
... living standard moved from the node interface to the more specialized
element interface.
Element.id - Web APIs
the id property of the
element interface represents the
element's identifier, reflecting the id global attribute.
... the id is often used with get
elementbyid() to retrieve a particular
element.
... another common case is to use an
element's id as a selector when styling the document with css.
... syntax var idstr =
element.id; // get the id
element.id = idstr; // set the id idstr is the identifier of the
element.
Element: mouseout event - Web APIs
the mouseout event is fired at an
element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the
element or one of its children.
... mouseout is also delivered to an
element if the cursor enters a child
element, because the child
element obscures the visible area of the
element.
...mouseout is added to the list to color the targeted
element orange when the mouse exits it.
... html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.get
elementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul>
element test.addeventlistener("mouseleave", function( event ) { // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", ...
Element.onfullscreenchange - Web APIs
the
element interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired when the
element has transitioned into or out of full-screen mode.
... syntax targetdocument.onfullscreenchange = fullscreenchangehandler; value an event handler for the fullscreenchange event, indicating that the
element has changed in or out of full-screen mode.
...this function determines which
element it was called on by checking the value of event.target, then compares the document's fullscreen
element value to the
element to see if they're the same node.
... function togglefullscreen() { let elem = document.queryselector("video"); elem.onfullscreenchange = handlefullscreenchange; if (!document.fullscreen
element) { elem.requestfullscreen().then({}).catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } function handlefullscreenchange(event) { let elem = event.target; let isfullscreen = document.fullscreen
element === elem; adjustmycontrols(isfullscreen); } specifications specif...
Element.openOrClosedShadowRoot - Web APIs
the
element.openorcloseshadowroot read-only property represents the shadow root hosted by the
element, regardless if its mode is open or closed.
... use
element.attachshadow() to add a shadow root to an existing
element.
... syntax var shadowroot =
element.shadowroot; value a shadowroot object instance, regardless if its mode is set to open or closed, or null if no shadow root is present.
... (see
element.attachshadow() for further details).
Element.part - Web APIs
the part property of the
element interface represents the part identifier(s) of the
element (i.e.
...these can be used to style parts of a shadow dom, via the ::part pseudo-
element.
... syntax let
elementpartlist =
element.part examples the following excerpt is from our shadow-part example.
...t.children; for(let elem of children) { if(elem.getattribute('part')) { tabs.push(elem); } } tabs.foreach((tab) => { tab.addeventlistener('click', (e) => { tabs.foreach((tab) => { tab.part = 'tab'; }) e.target.part = 'tab active'; }) console.log(tab.part); }) specifications specification status comment shadow partsthe definition of '
element.part' in that specification.
Element.removeAttribute() - Web APIs
the
element method removeattribute() removes the attribute with the specified name from the
element.
... syntax
element.removeattribute(attrname); parameters attrname a domstring specifying the name of the attribute to remove from the
element.
... dom methods dealing with
element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattri...
...butens - - removeattribute (dom 1) removeattributens removeattributenode - example // given: <div id="div1" align="left" width="200px"> document.get
elementbyid("div1").removeattribute("align"); // now: <div id="div1" width="200px"> specifications specification status comment domthe definition of '
element" removeattribute' in that specification.
Element.removeAttributeNS() - Web APIs
the removeattributens() method of the
element interface removes the specified attribute from an
element.
... syntax
element.removeattributens(namespace, attrname); parameters namespace is a string that contains the namespace of the attribute.
... example // given: // <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace" // special:specialalign="utterleft" width="200px" /> d = document.get
elementbyid("div1"); d.removeattributens("http://www.mozilla.org/ns/specialspace", "specialalign"); // now: <div id="div1" width="200px" /> notes dom methods dealing with
element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattribu...
...tens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of '
element: removeattributens' in that specification.
Element.scroll() - Web APIs
the scroll() method of the
element interface scrolls the
element to a particular set of coordinates inside a given
element.
... syntax
element.scroll(x-coord, y-coord)
element.scroll(options) parameters calling with coordinates x-coord the pixel along the horizontal axis of the
element that you want displayed in the upper left.
... y-coord the pixel along the vertical axis of the
element that you want displayed in the upper left.
... examples // put the 1000th vertical pixel at the top of the
element element.scroll(0, 1000); using options:
element.scroll({ top: 100, left: 100, behavior: 'smooth' }); specification specification status comment css object model (cssom) view modulethe definition of '
element.scroll()' in that specification.
Element.scrollIntoView() - Web APIs
the
element interface's scrollintoview() method scrolls the
element's parent container such that the
element on which scrollintoview() is called is visible to the user syntax
element.scrollintoview();
element.scrollintoview(aligntotop); // boolean parameter
element.scrollintoview(scrollintoviewoptions); // object parameter parameters aligntotop optional is a boolean value: if true, the top of the
element will be aligned to the top of the visible area of the scrollable ancestor.
... if false, the bottom of the
element will be aligned to the bottom of the visible area of the scrollable ancestor.
... example var
element = document.get
elementbyid("box");
element.scrollintoview();
element.scrollintoview(false);
element.scrollintoview({block: "end"});
element.scrollintoview({behavior: "smooth", block: "end", inline: "nearest"}); notes the
element may not be scrolled completely to the top or bottom depending on the layout of other
elements.
... specifications specification status comment css object model (cssom) view modulethe definition of '
element.scrollintoview()' in that specification.
Element.scrollTo() - Web APIs
the scrollto() method of the
element interface scrolls to a particular set of coordinates inside a given
element.
... syntax
element.scrollto(x-coord, y-coord)
element.scrollto(options) parameters x-coord is the pixel along the horizontal axis of the
element that you want displayed in the upper left.
... y-coord is the pixel along the vertical axis of the
element that you want displayed in the upper left.
... examples
element.scrollto(0, 1000); using options:
element.scrollto({ top: 100, left: 100, behavior: 'smooth' }); specifications specification status comment css object model (cssom) view modulethe definition of '
element.scrollto()' in that specification.
Element.setAttributeNodeNS() - Web APIs
setattributenodens adds a new namespaced attribute node to an
element.
... syntax replacedattr =
element.setattributenodens(attributenode) replacedattr is the replaced attribute node, if any, returned by this function.
... example // <div id="one" xmlns:myns="http://www.mozilla.org/ns/specialspace" // myns:special-align="utterleft">one</div> // <div id="two">two</div> var myns = "http://www.mozilla.org/ns/specialspace"; var d1 = document.get
elementbyid("one"); var d2 = document.get
elementbyid("two"); var a = d1.getattributenodens(myns, "special-align"); d2.setattributenodens(a.clonenode(true)); alert(d2.attributes[1].value) // returns: `utterleft' notes if the specified attribute already exists on the
element, then that attribute is replaced with the new one and the replaced one is returned.
... dom methods dealing with
element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications ...
HTMLCanvasElement.mozGetAsFile() - Web APIs
the non-standard, firefox-specific the htmlcanvas
element method mozgetasfile() returns a memory-based file object representing the image contained in the canvas.
... examples this example creates an image file from the <canvas>
element on the page, then uses a filereader to read the image data from the file.
...then a new <img>
element is created using the new data url.
... function draw() { var canvas = document.get
elementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link = document.get
elementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.get
elementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.create
element('img'); newimg.src = reader.result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specifications not part of any specification.
HTMLCanvasElement.mozOpaque - Web APIs
the non-standard htmlcanvas
element.mozopaque property is a boolean reflecting the moz-opaque html attribute of the <canvas>
element.
... this has been standardized as setting the alpha option to false when creating a drawing context with htmlcanvas
element.getcontext().
... syntax var opaque = canvas.mozopaque; canvas.mozopaque = true; examples given this <canvas>
element: <canvas id="canvas" width="300" height="300" moz-opaque></canvas> you can get or set the mozopaque property.
... var canvas = document.get
elementbyid('canvas'); console.log(canvas.mozopaque); // true // deactivate it canvas.mozopaque = false; specifications not part of any standard.
HTMLCanvasElement.transferControlToOffscreen() - Web APIs
the htmlcanvas
element.transfercontroltooffscreen() method transfers control to an offscreencanvas object, either on the main thread or on a worker.
... syntax offscreencanvas htmlcanvas
element.transfercontroltooffscreen() return value an offscreencanvas object.
... examples var htmlcanvas = document.create
element('canvas'); var offscreen = htmlcanvas.transfercontroltooffscreen(); var gl = offscreen.getcontext('webgl'); // ...
... // push frames back to the original htmlcanvas
element gl.commit(); specifications specification status comment html living standardthe definition of 'htmlcanvas
element.transfercontroltooffscreen()' in that specification.
HTMLDialogElement.open - Web APIs
the open property of the htmldialog
element interface is a boolean reflecting the open html attribute, indicating whether the dialog is available for interaction.
...from there you can click the cancel button to close the dialog (via the htmldialog
element.close() method), or submit the form via the submit button.
...ion>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.get
elementbyid('updatedetails'); var cancelbutton = document.get
elementbyid('cancel'); var dialog = document.get
elementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog ...
... updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialog
element-basic (see it live also).
HTMLElement.click() - Web APIs
the html
element.click() method simulates a mouse click on an
element.
... when click() is used with supported
elements (such as an <input>), it fires the
element's click event.
... this event then bubbles up to
elements higher in the document tree (or event chain) and fires their click events.
... syntax
element.click() example simulate a mouse-click when moving the mouse pointer over a checkbox: html <form> <input type="checkbox" id="mycheck" onmouseover="myfunction()" onclick="alert('click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() { document.get
elementbyid("mycheck").click(); } specification specification status comment html living standard living standard document object model (dom) level 2 html specification obsolete initial definition.
HTMLFormElement.enctype - Web APIs
the htmlform
element.enctype property is the mime type of content that is used to submit the form to the server.
... multipart/form-data: the type that allows file <input>
element(s) to upload file data.
... this value can be overridden by a formenctype attribute on a <button> or <input>
element.
... syntax var string = form.enctype; form.enctype = string; example form.enctype = 'application/x-www-form-urlencoded'; specifications specification status comment html living standardthe definition of 'htmlform
element: enctype' in that specification.
HTMLFormElement.name - Web APIs
the htmlform
element.name property represents the name of the current <form>
element as a string.
... if your <form>
element contains an
element named name then that
element overrides the form.name property, so that you can't access it.
... internet explorer (ie) does not allow the name attribute of an
element created using create
element() to be set or modified using the name property.
... syntax var string = form.name; form.name = string; example var form1name = document.get
elementbyid('form1').name; if (form1name != document.form.form1) { // browser doesn't support this form of reference } specifications specification status comment html living standardthe definition of 'htmlform
element: name' in that specification.
HTMLFormElement.submit() - Web APIs
the htmlform
element.submit() method submits a given <form>.
... the htmlform
element.requestsubmit() method is identical to activating a form's submit <button> and does not have these differences.
... <input> with attribute type="submit" will not be submitted with the form when using htmlform
element.submit(), but it would be submitted when you do it with original html form submit.
... syntax htmlform
element.submit() example document.forms["myform"].submit(); specifications specification status comment html living standardthe definition of 'htmlform
element: submit' in that specification.
HTMLImageElement.border - Web APIs
the obsolete htmlimage
element property border specifies the number of pixels thick the border surrounding the image should be.
... syntax htmlimage
element.border = thickness; let thickness = htmlimage
element.border; value a domstring containing an integer value specifying the thickness of the border that should surround the image, in css pixels.
...provide the same appearance using css instead of this obsolete property: <img src="image.png" style="border: 2px;"> you can further provide additional information to change the color and other features of the border: <img src="image.png" style="border: dashed 2px #333388;"> specifications specification status comment html living standardthe definition of 'htmlimage
element.border' in that specification.
... living standard html 4.01 specificationthe definition of 'htmlimage
element.border' in that specification.
HTMLImageElement.complete - Web APIs
the read-only htmlimage
element interface's complete attribute is a boolean value which indicates whether or not the image has completely loaded.
... syntax let doneloading = htmlimage
element.complete; value a boolean value which is true if the image has completely loaded; otherwise, the value is false.
... the image
element has previously determined that the image is fully available and ready for use.
...*/ function fixredeyecommand() { if (lightboxelem.style.display === "block" && lightboximgelem.complete) { fixredeye(lightboximgelem); } else { /* can't start doing this until the image is fully loaded */ } } specifications specification status comment html living standardthe definition of 'htmlimage
element.complete' in that specification.
HTMLImageElement.currentSrc - Web APIs
the read-only htmlimage
element property currentsrc indicates the url of the image which is currently presented in the <img>
element it represents.
... syntax let currentsource = htmlimage
element.currentsrc; value a usvstring indicating the full url of the image currently visible in the <img>
element represented by the htmlimage
element.
... this is useful when you provide multiple image options using the sizes and/or htmlimage
element.srcset properties.
... html <img src="/files/16797/clock-demo-400px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 50%, 90%"> javascript var clockimage = document.queryselector("img"); let p = document.create
element("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the 400px image!"; } document.body.appendchild(p); result specifications specification status comment html living standardthe definition of 'htmlimage
element.currentsrc' in that specification.
HTMLImageElement.decode() - Web APIs
the decode() method of the htmlimage
element interface returns a promise that resolves when the image is decoded and it is safe to append the image to the dom.
... this can be used to initiate loading of the image prior to attaching it to an
element in the dom (or adding it to the dom as a new
element), so that the image can be rendered immediately upon being added to the dom.
... syntax var promise = htmlimage
element.decode(); parameters none.
... 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 htmlimage
element, 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.
HTMLImageElement.hspace - Web APIs
the obsolete hspace property of the htmlimage
element interface specifies the number of pixels of empty space to leave empty on the left and right sides of the <img>
element when laying out the page.
... syntax htmlimage
element.hspace = marginwidth; marginwidth = htmlimage
element.hspace; value an integer value specifying the width, in pixels, of the horizontal margin to apply to the left and right sides of the image.
... specifications specification status comment html living standardthe definition of 'htmlimage
element.hspace' in that specification.
... living standard html 4.01 specificationthe definition of 'htmlimage
element.hspace' in that specification.
HTMLImageElement.longDesc - Web APIs
the obsolete property longdesc on the htmlimage
element interface specifies the url of a text or html file which contains a long-form description of the image.
... syntax descurl = htmlimage
element.longdesc; htmlimage
element.longdesc = descurl; value a domstring which may be either an empty string (indicating that no long description is available) or the url of a file containing a long form description of the image's contents.
...instead of using longdesc to provide a link to a detailed description of an image, encapsulate the image within a link using the <a>
element.
... specifications specification status comment html 4.01 specificationthe definition of 'htmlimage
element.longdesc' in that specification.
HTMLImageElement.sizes - Web APIs
the htmlimage
element property sizes allows you to specify the layout width of the image for each of a list of media conditions.
... syntax let sizes = htmlimage
element.sizes; htmlimage
element.sizes = sizes; value a usvstring containing a comma-separated list of source size descriptors followed by an optional fallback size.
... let image = document.queryselector("article img"); let break40 = document.get
elementbyid("break40"); let break50 = document.get
elementbyid("break50"); break40.addeventlistener("click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.addeventlistener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own window here.
... specifications specification status comment html living standardthe definition of 'htmlimage
element.sizes' in that specification.
HTMLImageElement.src - Web APIs
the htmlimage
element property src, which reflects the html src attribute, specifies the image to display in the <img>
element.
... syntax htmlimage
element.src = newsource; let src = htmlimage
element.src; value when providing only a single image, rather than a set of images from which the browser selects the best match for the viewport size and display pixel density, the src attribute is a usvstring specifying the url of the desired image.
... this can be set either within the html itself using the src content attribute, or programmatically by setting the
element's src property.
... html result specifications specification status comment html living standardthe definition of 'htmlimage
element.src' in that specification.
HTMLImageElement.vspace - Web APIs
the obsolete vspace property of the htmlimage
element interface specifies the number of pixels of empty space to leave empty on the top and bottom of the <img>
element when laying out the page.
... syntax htmlimage
element.vspace = marginheight; marginheight = htmlimage
element.vspace; value an integer value specifying the height, in pixels, of the vertical margin to apply to the top and bottom sides of the image.
... specifications specification status comment html living standardthe definition of 'htmlimage
element.vspace' in that specification.
... living standard html 4.01 specificationthe definition of 'htmlimage
element.vspace' in that specification.
HTMLInputElement: invalid event - Web APIs
the invalid event fires when a submittable
element has been checked for validity and doesn't satisfy its constraints.
...the validity of submittable
elements is checked before submitting their owner <form>, or after the checkvalidity() method of the
element or its owner <form> is called.
... examples if a form is submitted with an invalid value, the submittable
elements are checked and, if an error is found, the invalid event will fire on the invalid
element.
... html <form action="#"> <ul> <li><label>enter an integer between 1 and 10: <input type="number" min="1" max="10" required></label></li> <li><input type="submit" value="submit"></li> </ul> </form><p id="log"></p> javascript const input = document.queryselector('input') const log = document.get
elementbyid('log') input.addeventlistener('invalid', logvalue) function logvalue(e) { log.textcontent += e.target.value } result specifications specification status comment html living standardthe definition of 'invalid event' in that specification.
HTMLInputElement.select() - Web APIs
the htmlinput
element.select() method selects all the text in a <textarea>
element or in an <input>
element that includes a text field.
... syntax
element.select(); example click the button in this example to select all the text in the <input>
element.
... html <input type="text" id="text-box" size="20" value="hello world!"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.get
elementbyid('text-box'); input.focus(); input.select(); } result notes calling
element.select() will not necessarily focus the input, so it is often used with html
element.focus().
... in browsers where it is not supported, it is possible to replace it with a call to htmlinput
element.setselectionrange() with parameters 0 and the input's value length: <input onclick="this.select();" value="sample text" /> <!-- equivalent to --> <input onclick="this.setselectionrange(0, this.value.length);" value="sample text" /> specifications specification status comment html living standardthe definition of 'select' in that specification.
HTMLInputElement.setRangeText() - Web APIs
the htmlinput
element.setrangetext() method replaces a range of text in an <input> or <textarea>
element with a new string.
... syntax
element.setrangetext(replacement);
element.setrangetext(replacement, start, end [, selectmode]); parameters replacement the string to insert.
... html <input type="text" id="text-box" size="30" value="this text has not been updated."> <button onclick="selecttext()">update text</button> javascript function selecttext() { const input = document.get
elementbyid('text-box'); input.focus(); input.setrangetext('already', 14, 17, 'select'); } result specifications specification status comment html living standardthe definition of 'htmlinput
element.setselectionrange()' in that specification.
... living standard no change html5the definition of 'htmlinput
element.setselectionrange()' in that specification.
HTMLLabelElement.htmlFor - Web APIs
the htmllabel
element.htmlfor property reflects the value of the for content property.
... that means that this script-accessible property is used to set and read the value of the content property for, which is the id of the label's associated control
element.
... syntax controlid = htmllabel
element.htmlfor htmllabel
element.htmlfor = newid value a domstring which contains the id string of the
element which is associated with the control.
... if this property has a value, the htmllabel
element.control property must refer to the same control.
HTMLMediaElement.currentSrc - Web APIs
the htmlmedia
element.currentsrc property contains the absolute url of the chosen media resource.
... syntax var mediaurl = audioobject.currentsrc; value a domstring object containing the absolute url of the chosen media source; this may be an empty string if networkstate is empty; otherwise, it will be one of the resources listed by the htmlsource
element contained within the media
element, or the value or src if no <source>
element is provided.
... example var obj = document.create
element('video'); console.log(obj.currentsrc); // "" specifications specification status comment html living standardthe definition of 'htmlmedia
element.currentsrc' in that specification.
... living standard no change from html5 html5the definition of 'htmlmedia
element.currentsrc' in that specification.
HTMLMediaElement.ended - Web APIs
the htmlmedia
element.ended indicates whether the media
element has ended playback.
... syntax var isended = htmlmedia
element.ended value a boolean which is true if the media contained in the
element has finished playing.
... example var obj = document.create
element('video'); console.log(obj.ended); // false specifications specification status comment html living standardthe definition of 'htmlmedia
element.ended' in that specification.
... living standard html5the definition of 'htmlmedia
element.ended' in that specification.
HTMLMediaElement.onencrypted - Web APIs
the onencrypted property of the htmlmedia
element is an event handler, fired whenever an encrypted event occurs, denoting the media is encrypted.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlmedia
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmedia
element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmedia
element.onencrypted = function(encrypted) { ...
HTMLMediaElement.onwaitingforkey - Web APIs
the onwaitingforkey property of the htmlmedia
element is an event handler, fired when a waitingforkey event occurs, when playback is blocked while waiting for an encryption key.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlmedia
element" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-f...
...amily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmedia
element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmedia
element.onwaitingforkey = function(waitingforkey) { ...
HTMLMediaElement.playbackRate - Web APIs
the htmlmedia
element.playbackrate property sets the rate at which the media is being played back.
...some browsers implement the non-standard htmlmedia
element.preservespitch property to control this.
...(default: 1.0) example var obj = document.create
element('video'); console.log(obj.playbackrate); // expected output: 1 specifications specification status comment html living standardthe definition of 'htmlmedia
element.playbackrate' in that specification.
... living standard html5the definition of 'htmlmedia
element.playbackrate' in that specification.
HTMLMediaElement.readyState - Web APIs
the htmlmedia
element.readystate property indicates the readiness state of the media.
... 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.get
elementbyid('example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status comment html living standardthe definition of 'htmlmedia
element.readystate' in that specification.
... living standard html5the definition of 'htmlmedia
element.readystate' in that specification.
HTMLMenuItemElement - Web APIs
the htmlmenuitem
element interface provides special properties (beyond those defined on the regular html
element interface it also has available to it by inheritance) for manipulating <menuitem>
elements.
...eight="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></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" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
element</text></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/html
element" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
element</text></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/htmlmenuitem
element" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" fon...
...t-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuitem
element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: html
elementmethodsthis interface has no methods, but inherits methods from: html
element specifications specification status comment html 5.1the definition of 'htmlmenuitem
element' in that specification.
HTMLScriptElement.referrerPolicy - Web APIs
the referrerpolicy property of the htmlscript
element interface reflects the html referrerpolicy of the <script>
element and fetches made by that script, defining which referrer is sent when fetching the resource.
...if referrerpolicy is not explicitly specified on the <script>
element, it will adopt a higher-level referrer policy, i.e.
... examples var scriptelem = document.create
element("script"); scriptelem.src = "/"; scriptelem.referrerpolicy = "unsafe-url"; document.body.appendchild(script); specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
... html living standardthe definition of 'htmlscript
element: referrerpolicy' in that specification.
HTMLSelectElement.checkValidity() - Web APIs
the htmlselect
element.checkvalidity() method checks whether the
element has any constraints and whether it satisfies them.
... if the
element fails its constraints, the browser fires a cancelable invalid event at the
element, and then returns false.
... syntax var result = selectelt.checkvalidity(); specifications specification status comment html living standardthe definition of 'htmlselect
element.checkvalidity()' in that specification.
... html5the definition of 'htmlselect
element.checkvalidity()' in that specification.
HTMLSelectElement.item() - Web APIs
the htmlselect
element.item() method returns the
element corresponding to the htmloption
element whose position in the options list corresponds to the index given in the parameter, or null if there are none.
... return value item is a htmloption
element.
... examples html <form> <select id="myformcontrol" type="textarea"> <option id="o1">opt 1</option> <option id="o2">opt 2</option> </select> </form> javascript // returns the htmloption
element representing #o2 elem1 = document.forms[0]['myformcontrol'][1]; specifications specification status comment html living standardthe definition of 'htmlselect
element.item()' in that specification.
... html5the definition of 'htmlselect
element.item()' in that specification.
HTMLSelectElement.namedItem() - Web APIs
the htmlselect
element.nameditem() method returns the htmloption
element corresponding to the htmloption
element whose name or id match the specified name, or null if no option matches.
... return value item is a htmloption
element.
... example html <form> <select id="myformcontrol"> <option id="o1">opt 1</option> <option id="o2">opt 2</option> </select> </form> javascript elem1 = document.forms[0]['myformcontrol']['o1']; // returns the htmloption
element representing #o1 specifications specification status comment html living standardthe definition of 'htmlselect
element.nameditem()' in that specification.
... html5the definition of 'htmlselect
element.nameditem()' in that specification.
HTMLSelectElement.selectedIndex - Web APIs
the htmlselect
element.selectedindex is a long that reflects the index of the first or last selected <option>
element, depending on the value of multiple.
... the value -1 indicates that no
element is selected.
... syntax var index = selectelem.selectedindex; selectelem.selectedindex = index; example html <p id="p">selectedindex: 0</p> <select id="select"> <option selected>option a</option> <option>option b</option> <option>option c</option> <option>option d</option> <option>option e</option> </select> javascript var selectelem = document.get
elementbyid('select') var pelem = document.get
elementbyid('p') // when a new <option> is selected selectelem.addeventlistener('change', function() { var index = selectelem.selectedindex; // add that data to the <p> pelem.innerhtml = 'selectedindex: ' + index; }) specifications specification status comment html living standardthe definition of 'htmlselect
element' in that specification.
... html5the definition of 'htmlselect
element' in that specification.
HTMLSelectElement.setCustomValidity() - Web APIs
the htmlselect
element.setcustomvalidity() method sets the custom validity message for the selection
element to the specified message.
... use the empty string to indicate that the
element does not have a custom validity error.
... specifications specification status comment html living standardthe definition of 'htmlselect
element.setcustomvalidity()' in that specification.
... html5the definition of 'htmlselect
element.setcustomvalidity()' in that specification.
HTMLSlotElement.name - Web APIs
the name property of the htmlslot
element interface returns or sets the slot name.
... syntax var name = htmlslot
element.name htmlslot
element.name = name value a domstring.
... let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('
element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
... every time the
element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.
HTMLSlotElement: slotchange event - Web APIs
the slotchange event is fired on an htmlslot
element instance (<slot>
element) when the node(s) contained in that slot change.
... examples
element.setattribute('slot', slotname); //
element.assignedslot = $slot
element.removeattribute('slot'); //
element.assignedslot = null the following snippet is taken from our slotchange example (see it live also).
... let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('
element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the <slot>s, then add a slotchange event listener to the template's second slot — which is the one which has its contents changed in the example.
... every time the
element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.
HTMLTableElement.deleteCaption() - Web APIs
the htmltable
element.deletecaption() method removes the <caption>
element from a given <table>.
... if there is no <caption>
element associated with the table, this method does nothing.
... syntax htmltable
element.deletecaption() example this example uses javascript to delete a table's caption.
... html <table> <caption>this caption will be deleted!</caption> <tr><td>cell 1.1</td><td>cell 1.2</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td></tr> </table> javascript let table = document.queryselector('table'); table.deletecaption(); result specifications specification status comment html living standardthe definition of 'htmltable
element: deletecaption' in that specification.
HTMLTableElement.tBodies - Web APIs
the htmltable
element.tbodies read-only property returns a live htmlcollection of the bodies in a <table>.
... the collection returned includes implicit <tbody>
elements.
... for example: <table> <tr> <td>cell one</td> </tr> </table> the html dom generated from the above html will have a <tbody>
element even though the tags are not included in the source html.
... mytable.tbodies.length; specifications specification status comment html living standardthe definition of 'htmltable
element: tbodies' in that specification.
HTMLTableRowElement.rowIndex - Web APIs
the htmltablerow
element.rowindex read-only property represents the position of a row in relation to the whole <table>.
... even when the <thead>, <tbody>, and <tfoot>
elements are out of order in the html, browsers render the table in the right order.
... syntax var index = htmltablerow
element.rowindex value returns the index of the row, or -1 if the row is not part of a table.
...<tr><th>item</th> <th>price</th></tr> </thead> <tbody> <tr><td>bananas</td> <td>$2</td></tr> <tr><td>oranges</td> <td>$8</td></tr> <tr><td>top sirloin</td> <td>$20</td></tr> </tbody> <tfoot> <tr><td>total</td> <td>$30</td></tr> </tfoot> </table> javascript let rows = document.queryselectorall('tr'); rows.foreach((row) => { let z = document.create
element("td"); z.textcontent = `(row #${row.rowindex})`; row.appendchild(z); }); result ...
HTMLTimeElement.dateTime - Web APIs
the htmltime
element.datetime property is a domstring that reflects the datetime html attribute, containing a machine-readable form of the
element's date and time value.
....xxs pddthhmms.xxxs pthhmmss pthhmms.xs pthhmms.xxs pthhmms.xxxs ww dd hh mm ss p12dt7h12m13s p12dt7h12m13.3s p12dt7h12m13.45s p12dt7h12m13.455s pt7h12m13s pt7h12m13.2s pt7h12m13.56s pt7h12m13.999s 7d 5h 24m 13s syntax datetimestring = timeelt.datetime; timeelt.datetime = datetimestring example // assumes there is <time id="t">
element in the html var t = document.get
elementbyid("t"); t.datetime = "6w 5h 34m 5s"; specifications specification status comment html living standardthe definition of 'htmltime
element' in that specification.
... html 5.1the definition of 'htmltime
element' in that specification.
... html5the definition of 'htmltime
element' in that specification.
HTMLTrackElement.src - Web APIs
the htmltrack
element.src property reflects the value of the <track>
element's src attribute, which indicates the url of the text track's data.
... syntax var texttrackurl = htmltrack
element.src; value a domstring object containing the url of the text track data.
... example // coming soon specifications specification status comment html living standardthe definition of 'htmltrack
element.src' in that specification.
... living standard no change from html5 html5the definition of 'htmltrack
element.src' in that specification.
SVG and CSS - SVG: Scalable Vector Graphics
note:
elements referenced by <use>
elements inherit the styles from that
element.
...er petals */ #outer-petals { opacity: .75; --segment-fill-fill: azure; --segment-fill-stroke: lightsteelblue; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: deepskyblue; --segment-edge-stroke-width: 3; --segment-fill-fill-hover: plum; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: slateblue; } /* non-standard way of styling
elements referenced via <use>
elements, supported by some older browsers */ #outer-petals .segment-fill { fill: azure; stroke: lightsteelblue; stroke-width: 1; } #outer-petals .segment-edge { fill: none; stroke: deepskyblue; stroke-width: 3; } #outer-petals .segment:hover > .segment-fill { fill: plum; stroke: none; } #outer-petals .segment:hover > .segment-edge { stroke: slateblue; ...
...} /* inner petals */ #inner-petals { --segment-fill-fill: yellow; --segment-fill-stroke: yellow; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: yellowgreen; --segment-edge-stroke-width: 9; --segment-fill-fill-hover: darkseagreen; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: green; } /* non-standard way of styling
elements referenced via <use>
elements, supported by some older browsers */ #inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1; } #inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9; } #inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; } open the ...
...And 5 more matches
An Overview - XSLT: Extensible Stylesheet Language Transformations
the outermost
element in an xslt stylesheet must be the <xsl:stylesheet>
element (an acceptable alternate is the <xsl:transform>
element).
... this
element will include at least one namespace declaration and the mandatory version attribute.
...instead they are simply a way of specifying a unique identifier for a known set of
elements.
...And 5 more matches
Using the WebAssembly JavaScript API - WebAssembly
create a <script></script>
element in your html file, and add the following code to it: var importobject = { imports: { imported_func: arg => console.log(arg) } }; streaming the webassembly module new in firefox 58 is the ability to compile and instantiate webassembly modules directly from underlying sources.
...add a <script></script>
element to the page.
... tables have an
element type, which limits the types of reference that can be stored in the table.
...And 5 more matches
Interacting with page scripts - Archive of obsolete content
expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.get
elementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects.
... the "page.html" file adds two buttons and assigns an event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <input id="works" type="button" value="i will work"/> <input id="fails" type="button" value="i will not work"/> <script> var works = document.get
elementbyid("works"); works.addeventlistener("click", function() { alert(clonedcontentscriptobject.greeting); }, false); var fails = document.get
elementbyid("fails"); fails.addeventlistener("click", function() { alert(assignedcontentscriptobject.greeting); }, false); </script> </body> </html> if you run the example, clicking "i will work" displays th...
...tation = "hello, "; function greetme(user) { return salutation + user; } exportfunction(greetme, unsafewindow, {defineas: "greetme"}); finally, the "page.html" file adds a button and a page script that calls the exported function when the user pushes the button: <html> <head> </head> <body> <input id="test" type="button" value="click me"/> <script> var test = document.get
elementbyid("test"); test.addeventlistener("click", function() { alert(window.greetme("page script")); }, false); </script> </body> </html> exportfunction() works by structured cloning the arguments and return value of the function from one scope to the other.
...And 4 more matches
ui/frame - Archive of obsolete content
for example, this html document defines a <select>
element and a couple of <span>
elements, and includes a css file to style the content and a javascript script to implement behavior: <!doctype html> <html> <head> <link href="city-info.css" rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-
element"></span> <span id="weather" class="info-
element"></span> <scrip...
...); if the frame script has received a message from the add-on already, it can use the origin property of the event object passed to the message hander: // listen for messages from the add-on, and send a reply window.addeventlistener("message", function(event) { event.source.postmessage("pong", event.origin) }, false); this frame script listens to change events on the "city-selector" <select>
element, and sends a message to the add-on containing the value for the newly selected
element.
... // city-info.js var cityselector = window.document.get
elementbyid("city-selector"); cityselector.addeventlistener("change", citychanged); function citychanged() { window.parent.postmessage(cityselector.value, "*"); } to listen for these messages in the main add-on code, you can assign a listener to the frame's message event.
...And 4 more matches
Canvas code snippets - Archive of obsolete content
function canvas2dcontext(canvas) { if (typeof canvas === 'string') { canvas = document.get
elementbyid(canvas); } if (!(this instanceof canvas2dcontext)) { return new canvas2dcontext(canvas); } this.context = this.ctx = canvas.getcontext('2d'); if (!canvas2dcontext.prototype.arc) { canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimag...
...ods) { let method = m; canvas2dcontext.prototype[method] = function() { return this.ctx[method].apply(this.ctx, arguments); }; } for (let p of props) { let prop = p; canvas2dcontext.prototype[prop] = function(value) { if (value === undefined) return this.ctx[prop]; this.ctx[prop] = value; return this; }; } }; var canvas = document.get
elementbyid('canvas'); // use context to get access to underlying context var ctx = canvas2dcontext(canvas) .strokestyle('rgb(30, 110, 210)') .transform(10, 3, 4, 5, 1, 0) .strokerect(2, 10, 15, 20) .context; // use property name as a function (but without arguments) to get the value var strokestyle = canvas2dcontext(canvas) .strokestyle('rgb(50, 110, 210)') .strokestyle(); code usable on...
...reader; var blob = yield new promise(accept => canvas.toblob(accept, type, options)); reader.readasarraybuffer(blob); yield new promise(accept => { reader.onloadend = accept }); return yield os.file.writeatomic(path, new uint8array(reader.result), { tmppath: path + '.tmp' }); }); } loading a remote page onto a canvas
element the following class first creates a hidden iframe
element and attaches a listener to the frame's load event.
...And 4 more matches
Forms related code snippets - Archive of obsolete content
|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function datepicker (otarget) { const otable = document.create
element("table"), ohrow = document.create
element("tr"), othead = document.create
element("thead"), ocapt = document.create
element("caption"), odecryear = document.create
element("span"), oincryear = document.create
element("span"), odecrmonth = document.create
element("span"), oincrmonth = document.create
element("span"); var nid = ainstances.length, oth; this.target = otarg...
...et; this.display = document.create
element("span"); this.current = new date(); this.container = otable; this.display.classname = sprefs + "-current-month"; this.id = nid; otable.classname = sprefs + "-calendar"; otable.id = sprefs + "-cal-" + nid; odecryear.classname = sprefs + "-decrease-year"; odecrmonth.classname = sprefs + "-decrease-month"; oincrmonth.classname = sprefs + "-increase-month"; oincryear.classname = sprefs + "-increase-year"; odecryear.innerhtml = "\u00ab"; /* « */ odecrmonth.innerhtml = "\u003c"; /* < */ oincrmonth.innerhtml = "\u003e"; /* > */ oincryear.innerhtml = "\u00bb"; /* » */ odecryear.id = sprefs + "-decr-year-" + nid; odecrmonth.id = sprefs + "-decr-month-" + nid; oincrmonth.id = ...
...sprefs + "-incr-month-" + nid; oincryear.id = sprefs + "-incr-year-" + nid; odecryear.onmousedown = oincryear.onmousedown = odecrmonth.onmousedown = oincrmonth.onmousedown = onheadclick; for (var nthid = 0; nthid < 7; nthid++) { oth = document.create
element("th"); oth.innerhtml = sdays[nthid]; ohrow.appendchild(oth); } othead.appendchild(ohrow); ocapt.appendchild(odecryear); ocapt.appendchild(odecrmonth); ocapt.appendchild(oincryear); ocapt.appendchild(oincrmonth); ocapt.appendchild(this.display); this.container.appendchild(ocapt); this.container.appendchild(othead); this.current.setdate(1); this.writedays(); otarget.onclick = function () { if (otable.parentnode) { otable.parentnode.removechild(otable); return; ...
...And 4 more matches
Sidebar - Archive of obsolete content
to open a page in the "viewwebpanelssidebar" from chrome code (browser/addon/extension) such as from menuitem, it can call: openwebpanel(atitle, auri); accessing the sidebar from a browser.xul script the sidebar content is always in a document separate from the main browser document (the sidebar is actually implemented as a xul browser
element).
... to access your sidebar's window or document objects, you need to use the contentwindow or contentdocument properties of document.get
elementbyid("sidebar") respectively.
... for example the code below calls a function defined in the sidebar's context: var sidebarwindow = document.get
elementbyid("sidebar").contentwindow; // verify that our sidebar is open at this moment: if (sidebarwindow.location.href == "chrome://yourextension/content/whatever.xul") { // call "yournotificationfunction" in the sidebar's context: sidebarwindow.yournotificationfunction(anyarguments); } testing which sidebar is open the sidebar content may contain different panels (bookmarks, history, webpanel, etc.) and sometimes one wants to only act on the sidebar when it contains a specific panel.
...And 4 more matches
Communication between HTML and your extension - Archive of obsolete content
in my html i have an input
element in a form.
...the onreadystatechange was set to another little javascript function that would update a specific
element on the html page with the result.
...some of the events only apply to certain types of
elements so i included trying to modify the result of the ajax request to be of the appropriate
element type (img, which supports "onload," rather than span, which doesn't, for example).
...And 4 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
figure out what xul
elements you need to create for your add-on to add your interface, where it needs to go into a xul window, and how to do it.
... docs: document.get
elementbyid(), document.create
element(),
element reference, node reference (dom
elements are also nodes).
...one to take a xul window object and then create and add your
elements, and then another to find your
elements and remove them from the window object.
...And 4 more matches
Adding menus and submenus - Archive of obsolete content
the menubar
element should be a child of a toolbox
element because it is treated like another toolbar on systems other than mac os x.
...the separator is usually displayed as a horizontal line that creates a logical division between different types of menuitem
elements, keeping everything more organized.
... a menubar can hold one or more menu
elements.
...And 4 more matches
XBL 1.0 Reference - Archive of obsolete content
extensible binding language is a xml-based markup language to implement reusable components (bindings) that can be bound to
elements in other documents.
... the
element with a binding specified, called the bound
element, acquires the new behavior specified by the binding.
... bindings can be bound to
elements using cascading style sheets (css) or dom.
...And 4 more matches
datasources - Archive of obsolete content
« xul reference home datasources type: space separated list of datasource uris a space-separated list of datasources that an
element's template will use for content generation.
...the datasources attribute may be placed on most
elements, although it will usually be found on trees and menu related
elements.
... the
element should have a template
element as a child.
...And 4 more matches
mousethrough - Archive of obsolete content
« xul reference home mousethrough type: one of the values below determines whether mouse events are passed to the
element or not.
... if this attribute is not specified, the value is inherited from the parent of the
element.
... always mouse events are transparent to the
element.
...And 4 more matches
showPopup - Archive of obsolete content
« xul reference home showpopup(
element, x, y, popuptype, anchor, align ) deprecated since gecko 1.9 return type: no return value deprecated in favor of openpopup and openpopupatscreen opens a popup
element.
... there are two ways of specifying where the popup appears, either at a specific screen position, or relative to some
element in the window.
...if x and y are -1, the popup will be positioned relative to the
element specified as the first argument.
...And 4 more matches
nsIBoxObject
where possible,
element.getclientrects and
element.getboundingclientrect should be used instead.
...wstring propertyname); obsolete since gecko 1.9 wstring getproperty(in wstring propertyname); nsisupports getpropertyassupports(in wstring propertyname); void removeproperty(in wstring propertyname); void setproperty(in wstring propertyname, in wstring propertyvalue); void setpropertyassupports(in wstring propertyname, in nsisupports value); attributes attribute type description
element nsidom
element read only.
... firstchild nsidom
element the first child of the box, in box-ordinal-group order.
...And 4 more matches
nsICacheEntryDescriptor
inherits from: nsicacheentryinfo last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void close(); void doom(); void doomandfailpendingrequests(in nsresult status); string getmetadata
element(in string key); void markvalid(); nsiinputstream openinputstream(in unsigned long offset); nsioutputstream openoutputstream(in unsigned long offset); void setdatasize(in unsigned long size); void setexpirationtime(in pruint32 expirationtime); void setmetadata
element(in string key, in string value); void visitmetadata(in nsicachemetadatavisitor visitor); attributes attribute type description accessgranted nscacheaccessmode get th...
... cache
element nsisupports get or set the cache data
element.
... getmetadata
element() this method retrieves the meta data.
...And 4 more matches
nsILoginManager
to create an instance, use: var loginmanager = components.classes["@mozilla.org/login-manager;1"] .getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlinput
element a
element); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(in nsidomhtmlform
element aform); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void getalldisabledhosts([optional] out...
... nsiautocompleteresult autocompletesearch( in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlinput
element a
element ); parameters asearchstring missing description apreviousresult missing description a
element missing description return value missing description countlogins() returns the number of logins matching the specified criteria.
... boolean fillform( in nsidomhtmlform
element aform ); parameters aform the htmlform to attempt to fill out.
...And 4 more matches
nsIScriptableUnescapeHTML
implemented by: @mozilla.org/feed-unescapehtml;1 as a service: var scriptableunescapehtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml); method overview nsidomdocumentfragment parsefragment(in astring fragment, in prbool isxml, in nsiuri baseuri, in nsidom
element element); astring unescape(in astring src); methods parsefragment() parses a string of html or xml source into a sanitized documentfragment.
... this is equivalent to calling nsiparserutils::parsefragment(fragment, 0, isxml, baseuri,
element).
... nsidomdocumentfragment parsefragment( in astring fragment, in prbool isxml, in nsiuri baseuri, in nsidom
element element ); parameters fragment a string of html or xml source to parse as a fragment.
...And 4 more matches
nsISupportsArray
inherits from: nsicollection last changed in gecko 1.7 method overview boolean append
elements(in nsisupportsarray a
elements); violates the xpcom interface guidelines nsisupportsarray clone(); void compact(); void delete
elementat(in unsigned long aindex); void deletelast
element(in nsisupports a
element); nsisupports
elementat(in unsigned long aindex); violates the xpcom interface guidelines boolean enumeratebackwards(in nsisupportsarrayenumfunc afunc, in voidptr adata); violates the xpcom interface guidelines boolean enumerateforwards(in nsisupportsarrayenumfunc afunc, in voidptr adata); violates the xpcom interface guidelines boolean equals([const] in nsisupportsarray other); violates t...
...he xpcom interface guidelines long getindexof(in nsisupports apossible
element); long getindexofstartingat(in nsisupports apossible
element, in unsigned long astartindex); long getlastindexof(in nsisupports apossible
element); long indexof([const] in nsisupports apossible
element); violates the xpcom interface guidelines long indexofstartingat([const] in nsisupports apossible
element, in unsigned long astartindex); violates the xpcom interface guidelines boolean insert
elementat(in nsisupports a
element, in unsigned long aindex); violates the xpcom interface guidelines boolean insert
elementsat(in nsisupportsarray aother, in unsigned long aindex); violates the xpcom interface guidelines long lastindexof([const] in nsisupports apossible
element); violates the xpcom interface guidelines bo...
...olean move
element(in long afrom, in long ato); violates the xpcom interface guidelines boolean remove
elementat(in unsigned long aindex); violates the xpcom interface guidelines boolean remove
elementsat(in unsigned long aindex, in unsigned long acount); violates the xpcom interface guidelines boolean removelast
element([const] in nsisupports a
element); violates the xpcom interface guidelines boolean replace
elementat(in nsisupports a
element, in unsigned long aindex); violates the xpcom interface guidelines boolean sizeto(in long asize); violates the xpcom interface guidelines methods violates the xpcom interface guidelines append
elements() boolean append
elements( in nsisupportsarray a
elements ); parameters a
elements return value clone() nsisupportsarray clone(); parameters...
...And 4 more matches
nsITreeView
each property, x, that the view gives back will cause the css ::moz-tree-cell-*(x) pseudo
element to be matched on the treechildren
element.
...each property, x, that the view gives back will cause the css ::moz-tree-column(x) to be matched on the treechildren
element.
...if the empty string is returned, the ::moz-tree-image pseudo
element will be used.
...And 4 more matches
WebIDL bindings
any dictionary members and sequence
elements become js::value.
... the dictionary members and sequence
elements are guaranteed to be marked by whomever puts the sequence or dictionary on the stack, using sequencerooter and dictionaryrooter.
... object dictionary members and sequence
elements become jsobject*.
...And 4 more matches
Working with data
this is the same as new arraytype(type.
elementtype, value).
... example: creating an array of strings var cstr1 = ctypes.jschar.array()('rawr'); var cstr2 = ctypes.jschar.array()('boo'); var mycarray_ofstrings = ctypes.jschar.ptr.array(2)([cstr1, cstr2]); // specifying length of 2 is optional, can omit it, so can just do `ctypes.jschar.ptr.array()([cstr1, cstr2])` mycarray_ofstrings.addressof
element(0).contents.readstring(); // outputs: "rawr" mycarray_ofstrings.addressof
element(1).contents.readstring(); // outputs: "boo" example: creating an array of integers var jsarr = [4, 10]; var mycarr = ctypes.int.array(jsarr.length)(jsarr); // specifying length is optional, can omit.
... this will also work: `ctypes.int.array()(jsarr)` mycarr.addressof
element(0).contents; // outputs: 4 mycarr.addressof
element(1).contents; // outputs: 10 type casting you can type cast data from one type to another by using the ctypes.cast() function: var newobj = ctypes.cast(origobj, newtype); this will return a new object whose data block is shared with the original object, but whose type is newtype.
...And 4 more matches
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
discovering css grids when an html
element on your page has display: grid applied to it, a number of features are made available in the devtools to provide easy access to grid features.
... in the html pane in the html pane,
elements laid out using a grid have a "grid" marker beside them.
... clicking the icon toggles the display of a grid overlay on the page, which appears over the
element, laid out like a grid to show the position of its grid lines and tracks: the overlay is still shown when you select other
elements, so you can edit related css properties and see how the grid is affected.
...And 4 more matches
Waterfall - Firefox Developer Tools
recalculate style calculating the computed styles that apply to page
elements.
...the hint may be any of: self subtree latersiblings csstransitions cssanimations svgattranimations styleattribute styleattribute_animations force forcedescendants layout calculating the position and size of page
elements.
... recalculate style: if the browser thinks the computed styles for page
elements have changed, it must then recalculate them.
...And 4 more matches
CanvasRenderingContext2D.drawImage() - Web APIs
syntax void ctx.drawimage(image, dx, dy); void ctx.drawimage(image, dx, dy, dwidth, dheight); void ctx.drawimage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight); parameters image an
element to draw into the context.
... the specification permits any canvas image source (canvasimagesource), specifically, a cssimagevalue, an htmlimage
element, an svgimage
element, an htmlvideo
element, an htmlcanvas
element, an imagebitmap, or an offscreencanvas.
... type_mismatch_err the specified source
element isn't supported.
...And 4 more matches
CanvasRenderingContext2D - Web APIs
the canvasrenderingcontext2d interface, part of the canvas api, provides the 2d rendering context for the drawing surface of a <canvas>
element.
... basic example to get a canvasrenderingcontext2d instance, you must first have an html <canvas>
element to work with: <canvas id="my-house" width="300" height="300"></canvas> to get the canvas' 2d rendering context, call getcontext() on the <canvas>
element, supplying '2d' as the argument: const canvas = document.get
elementbyid('my-house'); const ctx = canvas.getcontext('2d'); with the context in hand, you can draw anything you like.
... canvasrenderingcontext2d.drawfocusifneeded() if a given
element is focused, this method draws a focus ring around the current path.
...And 4 more matches
Manipulating video using canvas - Web APIs
by combining the capabilities of the video
element with a canvas, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed.
...div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160" height="96"></canvas> <canvas id="c2" width="160" height="96"></canvas> </div> <script type="text/javascript" src="processor.js"></script> </body> </html> the key bits to take away from this are: this document establishes two canvas
elements, with the ids c1 and c2.
... var processor; processor.doload = function doload() { this.video = document.get
elementbyid('video'); this.c1 = document.get
elementbyid('c1'); this.ctx1 = this.c1.getcontext('2d'); this.c2 = document.get
elementbyid('c2'); this.ctx2 = this.c2.getcontext('2d'); let self = this; this.video.addeventlistener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercallback(); }, ...
...And 4 more matches
Hit regions and accessibility - Web APIs
« previousnext » the <canvas>
element on its own is just a bitmap and does not provide information about any drawn objects.
...you can use aria attributes to describe the behavior and purpose of the canvas
element.
...it allows you to make hit detection easier and lets you route events to dom
elements.
...And 4 more matches
Event - Web APIs
it can also be triggered programmatically, such as by calling the html
element.click() method of an
element, or by defining the event, then sending it to a specified target using eventtarget.dispatchevent().
... many dom
elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them.
... event-handlers are usually connected (or "attached") to various html
elements (such as <button>, <div>, <span>, etc.) using eventtarget.addeventlistener(), and this generally replaces using the old html event handler attributes.
...And 4 more matches
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.
... within the conditions can be placed content, member and triple
elements.
... this
element is used with firefox 2/mozilla 1.8 and earlier instead of the query
element.
...And 2 more matches
dialogheader - Archive of obsolete content
this
element should be placed inside a dialog
element.
....0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> attributes crop type: one of the values below if the label of the
element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
... depending on the platform and theme being used, some
elements will have set a maximum width so they will always appear cropped.
...And 2 more matches
groupbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the groupbox is used to group related
elements together.
... if a caption
element is placed inside the groupbox, it will be used as a caption which appears along the top of the groupbox.
... 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, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove...
...And 2 more matches
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 flex="1"/> <button label="connect"/> <button label="ping"/> </hbox> attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties al...
...And 2 more matches
member - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used within a rule's conditions
element to match
elements that are containers or are contained within another
element.
... properties child, container examples (example needed) attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties child type: ?
... a variable reference to a node that is expected to be a child of the
element that is referred to by the container
element.
...And 2 more matches
popupset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for menupopup, panel and tooltip
elements.
... this
element is optional; the given
elements need not appear in a popupset container.
... examples <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" context="clipmenu"/> attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, toolt...
...And 2 more matches
progressmeter - Archive of obsolete content
ies accessibletype, max, mode, value examples <progressmeter mode="determined" value="82"/> <progressmeter mode="undetermined"/> <!-- switching modes while the mouse is over a button --> <progressmeter mode="determined" id="myprogress"/> <button label="example" onmouseover="setloading(true)" onmouseout="setloading(false)"/> function setloading(state){ document.get
elementbyid('myprogress').mode = (state) ?
... inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove...
...
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the
element.
...And 2 more matches
query - Archive of obsolete content
for rdf datasources, the query should contain one content
element as well as member and/or triple
elements.
... for xml datasources, the query should have an expr attribute and may optionally contain assign
elements.
...any namespace prefixes declared on the
element may be used within the expression.
...And 2 more matches
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 flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortres...
...ource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the
element.
...And 2 more matches
tabpanel - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a individual panel in a tabpanels
element.
... this
element is optional and you may just use any other container in place of it.
... examples (example needed) attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, d...
...And 2 more matches
textnode - Archive of obsolete content
in the case of the textnode
element, the entire node is replaced with text corresponding to the result of the value attribute.
... this is useful if you want to use the html
element or other
elements that have text content inside them instead of in attributes.
... this
element does nothing outside of a template.
...And 2 more matches
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 flex="1"/> <label value="one"/> <label value="two"/> </vbox> attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , a...
...And 2 more matches
wizardpage - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this
element defines a page in a wizard.
... the content in the pages should be placed inside the wizardpage
element.
... label type: string the label that will appear on the
element.
...And 2 more matches
Dialogs in XULRunner - Archive of obsolete content
xul provides a dialog
element to act as the container for the dialog.
...alogheader title="my dialog" description="example dialog"/> <groupbox flex="1"> <caption label="select favorite fruit"/> <radiogroup> <radio id="1" label="oranges because they are fruity"/> <radio id="2" selected="true" label="strawberries because of color"/> <radio id="3" label="bananna because it pre packaged"/> </radiogroup> </groupbox> </dialog> xul window
elements have a special method to open dialogs, called window.opendialog().
... here is the code needed to open a dialog: function opendialog() { window.opendialog("chrome://basicapp/content/dialog.xul", "newdlg", "modal"); } the resulting dialog looks like this on windows 2000, and will look similar on other operating systems: the first thing that caught my eye about dialog is the button-related attributes on the
element.
...And 2 more matches
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
sure rss has the <comments>
element, but it points to a html page that isn't machine readable.
... an example using the most popular
element of the well-formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54321</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/article/54321</link> <wfw:commentrss>http://www.ex...
...e.com/feed/rss/54320/comments</wfw:commentrss> </item> <item> <title>huh?!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54319</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/article/54319</link> <wfw:commentrss>http://www.example.com/feed/rss/54319/comments</wfw:commentrss> </item> </channel> </rss> the <wfw:commentrss>
element is the reason that the well-formed web rss module is popular.
...And 2 more matches
AudioContext.createMediaStreamSource() - Web APIs
example in this example, we grab a media (audio + video) stream from navigator.getusermedia, feed the media into a <video>
element to play then mute the audio, but then also feed the audio into a mediastreamaudiosourcenode.
... the range slider below the <video>
element controls the amount of gain given to the lowpass filter — increase the value of the slider to make the audio sound more bass heavy!
... var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video
element if (navigator.mediadevices) { console.log('getusermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the htmlmedia
element into it var ...
...And 2 more matches
AudioTrackList.onremovetrack - Web APIs
the audiotracklist onremovetrack event handler is called when the removetrack event occurs, indicating that an audio track has been removed from the media
element, and therefore also from the audiotracklist.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the track that was removed from the media
element's audiotracklist.
... syntax audiotracklist.onremovetrack = eventhandler; value set onremovetrack to a function that accepts as input a trackevent object which indicates in its track property which audio track has been removed from the media
element.
...And 2 more matches
CanvasRenderingContext2D.addHitRegion() - Web APIs
they let you route events to dom
elements, and make it possible for users to explore the canvas without seeing it.
...inherits the cursor of the parent hit region, if any, or the canvas
element's cursor.
... control an
element (descendant of the canvas) to which events are to be routed.
...And 2 more matches
Compositing example - Web APIs
var canvas1 = document.create
element("canvas"); var canvas2 = document.create
element("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ].reverse(); var gcotext = [ 'this is the default setting and draws new shapes on top of the existing canvas conten...
... function createcanvas() { var canvas = document.create
element("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.create
element("dl"); document.body.appendchild(dl); while(gco.length) { var pop = gco.pop(); var dt = doc...
...ument.create
element("dt"); dt.textcontent = pop; dl.appendchild(dt); var dd = document.create
element("dd"); var p = document.create
element("p"); p.textcontent = gcotext.pop(); dd.appendchild(p); var canvastodrawon = createcanvas(); var canvastodrawfrom = createcanvas(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, ...
...And 2 more matches
Pixel manipulation with canvas - Web APIs
<canvas id="canvas" width="300" height="227" style="float:left"></canvas> <div id="color" style="width:200px;height:50px;float:left"></div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; var canvas = document.get
elementbyid('canvas'); var ctx = canvas.getcontext('2d'); img.onload = function() { ctx.drawimage(img, 0, 0); img.style.display = 'none'; }; var color = document.get
elementbyid('color'); function pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2...
... <canvas id="canvas" width="300" height="227"></canvas> <div> <input id="grayscalebtn" value="grayscale" type="button"> <input id="invertbtn" value="invert" type="button"> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.get
elementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height); var data = imagedata.data; var invert = function() { for (var i = 0; i < data.length; i += 4) { data[i] = 255 - data[i]; // red data[i + 1] = 255 - data[i + 1]; // green data[i + 2] =...
... 255 - data[i + 2]; // blue } ctx.putimagedata(imagedata, 0, 0); }; var grayscale = function() { for (var i = 0; i < data.length; i += 4) { var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; // red data[i + 1] = avg; // green data[i + 2] = avg; // blue } ctx.putimagedata(imagedata, 0, 0); }; var invertbtn = document.get
elementbyid('invertbtn'); invertbtn.addeventlistener('click', invert); var grayscalebtn = document.get
elementbyid('grayscalebtn'); grayscalebtn.addeventlistener('click', grayscale); } zooming and anti-aliasing with the help of the drawimage() method, a second canvas and the imagesmoothingenabled property, we are able to zoom into our picture and see the details.
...And 2 more matches
Transformations - Web APIs
function draw() { var ctx = document.get
elementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); // draw a rectangle with default settings ctx.save(); // save the default state ctx.fillstyle = '#09f'; // make changes to the settings ctx.fillrect(15, 15, 120, 120); // draw a rectangle with new settings ctx.save(); // save the current state ctx.fillstyle = '#fff'; // make ...
... function draw() { var ctx = document.get
elementbyid('canvas').getcontext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { ctx.save(); ctx.fillstyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample r...
... function draw() { var ctx = document.get
elementbyid('canvas').getcontext('2d'); // left rectangles, rotate from canvas origin ctx.save(); // blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(30, 30, 100, 100); ctx.rotate((math.pi / 180) * 25); // grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(30, 30, 100, 100); ctx.restore(); // right rectangles, rotate from rectangle center // draw blue rect ctx.fillstyle = '#00...
...And 2 more matches
ChildNode - Web APIs
it's implemented by
element, documenttype, and characterdata objects.
... living standard split the
elementtraversal interface in parentnode and childnode.
... previous
elementsibling and next
elementsibling are now defined on the latter.
...And 2 more matches
DataTransfer.setDragImage() - Web APIs
when a drag occurs, a translucent image is generated from the drag target (the
element the dragstart event is fired at), and follows the mouse pointer during the drag.
...the image will typically be an <image>
element but it can also be a <canvas> or any other visible
element.
... syntax void datatransfer.setdragimage(img |
element, xoffset, yoffset); arguments img |
element an image
element element to use for the drag feedback image.
...And 2 more matches
DataTransferItem.webkitGetAsEntry() - Web APIs
html content the html establishes the drop zone itself, which is a <div>
element with the id "dropzone", and an unordered list
element with the id "listing".
...this function takes as input a filesystementry representing an entry in the file system to be scanned and processed (the item parameter), and an
element into which to insert the list of contents (the container parameter).
... let dropzone = document.get
elementbyid("dropzone"); let listing = document.get
elementbyid("listing"); function scanfiles(item, container) { let elem = document.create
element("li"); elem.innerhtml = item.name; container.appendchild(elem); if (item.isdirectory) { let directoryreader = item.createreader(); let directorycontainer = document.create
element("ul"); container.appendchild(directorycontainer); directoryreader.readentries(function(entries) { entries.foreach(function(entry) { scanfiles(entry, directorycontainer); }); }); } } sc...
...And 2 more matches
Document.getBoxObjectFor() - Web APIs
returns a boxobject (x, y, width, height) for a specified
element.
...you should use the
element.getboundingclientrect() method instead.
... syntax boxobject = document.getboxobjectfor(
element); boxobject is an nsiboxobject.
...And 2 more matches
DocumentOrShadowRoot - Web APIs
properties documentorshadowroot.active
elementread only returns the
element within the shadow tree that has focus.
... documentorshadowroot.fullscreen
elementread only returns the
element that's currently in full screen mode for this document.
... documentorshadowroot.pointerlock
element read only returns the
element set as the target for mouse events while the pointer is locked.
...And 2 more matches
Events and the DOM - Web APIs
registering event listeners there are 3 ways to register event handlers for a dom
element.
... eventtarget.addeventlistener // assuming mybutton is a button
element mybutton.addeventlistener('click', greet, false) function greet(event){ // print and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments) alert('hello world') } this is the method you should use in modern web pages.
... dom
element properties // assuming mybutton is a button
element mybutton.onclick = function(event){alert('hello world')} the function can be defined to take an event parameter.
...And 2 more matches
Event.composed - Web APIs
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 text attribute and insert them into the
element's shadow dom as the text content of a <p>
element.
... the first definition looks like this, for example: custom
elements.define('open-shadow', class extends html
element { constructor() { super(); let pelem = document.create
element('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each
element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="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) { console.lo...
...g(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow>
element and then the <closed-shadow>
element, you'll notice two things.
...And 2 more matches
Event.composedPath() - Web APIs
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 text attribute and insert them into the
element's shadow dom as the text content of a <p>
element.
... the first definition looks like this, for example: custom
elements.define('open-shadow', class extends html
element { constructor() { super(); let pelem = document.create
element('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each
element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="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) { console.lo...
...g(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow>
element and then the <closed-shadow>
element, you'll notice two things.
...And 2 more matches
FileSystemDirectoryReader.readEntries() - Web APIs
html content the html establishes the drop zone itself, which is a <div>
element with the id "dropzone", and an unordered list
element with the id "listing".
...this function takes as input a filesystementry representing an entry in the file system to be scanned and processed (the item parameter), and an
element into which to insert the list of contents (the container parameter).
... let dropzone = document.get
elementbyid("dropzone"); let listing = document.get
elementbyid("listing"); function scanfiles(item, container) { let elem = document.create
element("li"); elem.innerhtml = item.name; container.appendchild(elem); if (item.isdirectory) { let directoryreader = item.createreader(); let directorycontainer = document.create
element("ul"); container.appendchild(directorycontainer); directoryreader.readentries(function(entries) { entries.foreach(function(entry) { scanfiles(entry, directorycontainer); }); }); } } sc...
...And 2 more matches
Authoring MathML - MathML
t insert one line in your document header: <script src="https://fred-wang.github.io/mathml.css/mspace.js"></script> if you need more complex constructions, you might instead consider using the heavier mathjax library as a mathml polyfill: <script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script> note that these two scripts perform feature detection of the mspace or mpadded
elements (see the browser compatibility table on these pages).
...for example the following function verifies the mathml support by testing the mspace
element (you may replace mspace with mpadded): function hasmathmlsupport() { var div = document.create
element("div"), box; div.innerhtml = "<math><mspace height='23px' width='77px'/></math>"; document.body.appendchild(div); box = div.firstchild.firstchild.getboundingclientrect(); document.body.removechild(div); return math.abs(box.height - 23) <= 1 && math.abs(box.width - 77) <= 1; } alte...
... texzilla has an <x-tex> custom
element, that can be used to write things like <x-tex>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</x-tex> and get it automatically converted into mathml.
...And 2 more matches
<maction> - MathML
the mathml <maction>
element provides a possibility to bind actions to (sub-) expressions.
...to specify which child
elements are addressed by the action, you can make use of the selection attribute.
... attributes actiontype the action which specifies what happens for this
element.
...And 2 more matches
CSS and JavaScript animation performance - Web Performance
even if an
element is in the middle of a transition, the new transition starts from the current style immediately instead of jumping to the end css state.
...developers can create an animation by simply changing an
element's style each time the loop is called (or updating the canvas draw, or whatever.) note: like css transitions and animations, requestanimationframe() pauses when the current tab is pushed into the background.
...this can occur because css transitions/animations are simply resampling
element styles in the main ui thread before each repaint event happens, which is almost the same as resampling
element styles via a requestanimationframe() callback, also triggered before the next repaint.
...And 2 more matches
SVG Conditional Processing Attributes - SVG: Scalable Vector Graphics
the svg conditional processing attributes are all the attributes that can be specified on some svg
elements to control whether or not the
element on which it appears should be rendered.
... externalresourcesrequired requiredextensions requiredfeatures systemlanguage attributes externalresourcesrequired deprecated since svg 2 if set to true, it indicates that the browser must wait for all the external resources necessary to render that
element to be loaded before processing the associated
element.
... value: false|true; animatable: no requiredextensions list all the browser specific capabilities that must be supported by the borwser to be allowed to render the associated
element.
...And 2 more matches
clip-path - SVG: Scalable Vector Graphics
the clip-path presentation attribute defines or associates a clipping path with the
element it is related to.
... 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>, <text>, <use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-right: apply a css basic shape on a fill-box geom...
... path with a clippathunits set to userspaceonuse --> <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg> usage notes value <url> | [ <basic-shape> || <geometry-box> ] | none default value none animatable yes <geometry-box> an extra information to tell how a <basic-shape> is applied to an
element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box.
...And 2 more matches
clip-rule - SVG: Scalable Vector Graphics
« svg attribute reference home the clip-rule attribute only applies to graphics
elements that are contained within a <clippath>
element.
... the following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because clip-rule is specified on the <path>
element that defines the clipping shape: <g> <clippath id="myclip"> <path d="..." clip-rule="evenodd" /> </clippath> <rect clip-path="url(#myclip)" ...
... /> </g> whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the clip-rule is specified on the referencing
element, not on the object defining the clipping shape: <g> <clippath id="myclip"> <path d="..." /> </clippath> <rect clip-path="url(#myclip)" clip-rule="evenodd" ...
...And 2 more matches
clip - SVG: Scalable Vector Graphics
the clip attribute is a presentation attribute defining the visible region of an
element.
...the value of auto defines a clipping path along the bounds of the viewport created by the given
element.
... as a presentation attribute, it can be applied to any
element but it has effect only on the following six
elements: <svg>, <symbol>, <image>, <foreignobject>, <pattern>, <marker> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- auto clipping --> <svg x="0" width="10" height="10" clip="auto"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> <!-- rect(top, right, bottom, left) clipping --> <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> </svg> usage notes warning: this property is deprecated.
...And 2 more matches
clipPathUnits - SVG: Scalable Vector Graphics
the clippathunits attribute indicates which coordinate system to use for the contents of the <clippath>
element.
... only one
element is using this attribute: <clippath> html,body,svg { height:100% } <svg viewbox="0 0 100 100"> <clippath id="myclip1" clippathunits="userspaceonuse"> <circle cx="50" cy="50" r="35" /> </clippath> <clippath id="myclip2" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".35" /> </clippath> <!-- some reference rect to materialized to clip path --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r3" x="55" y="55" width="45" height="45" /> <rect id="r4" x="55" y="0" width="45" height="45" /> <!-- the first 3 rect are clipped with usespaceonuse units --> <use clip-path="url(#myclip1)" xlink:href="#r1" fill="red" /> <use clip-path="url(#myclip1)" xlink:href="#r2" f...
...ill="red" /> <use clip-path="url(#myclip1)" xlink:href="#r3" fill="red" /> <!-- the last rect is clipped with objectboundingbox units --> <use clip-path="url(#myclip2)" xlink:href="#r4" fill="red" /> </svg> clippath for <clippath>, clippathunits define the coordinate system in use for the content of the
element.
...And 2 more matches
height - SVG: Scalable Vector Graphics
the height attribute defines the vertical length of an
element in the user coordinate system.
... twenty five
elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical length for the rendering area of the primi...
... note: in an html document if both the viewbox and height attributes are omitted, the svg
element will be rendered with a height of 150px value auto | <length> | <percentage> default value auto (treated as 100%) animatable yes note: starting with svg2, height is a geometry property meaning this attribute can also be used as a css property for <svg>.
...And 2 more matches
maskContentUnits - SVG: Scalable Vector Graphics
the maskcontentunits attribute indicates which coordinate system to use for the contents of the <mask>
element.
... only one
element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskcontentunits="userspaceonuse"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskcontentunits="objectboundingbox"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx=".5" cy=".5" r=".35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r3" x="55" y="55" width="45" height="45" /> <rect id="r4" x="55" y="0" width="45" height="45" /> <...
...mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskcontentunits defines the coordinate system in use for the content of the
element.
...And 2 more matches
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 context.
... when scroll is specified on an <svg>
element, a scrollbar or panner is normally shown for the svg viewport whether or not any of its content is clipped.
... within svg content, the value auto implies that all rendered content for child
elements must be visible, either through a scrolling mechanism, or by rendering with no clip.
...And 2 more matches
vector-effect - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any
element but it has effect only on the following ten
elements: <circle>, <ellipse>, <foreignobject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath> <tspan>, and <use> usage notes value none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position default value none animatable yes none this value specifies that no vector effect shall be applied, i.e.
...the resulting visual effect of this value is that the stroke width is not dependant on the transformations of the
element (including non-uniform scaling and shear transformations) and zoom level.
... non-scaling-size this value specifies a special user coordinate system used by the
element and its descendants.
...And 2 more matches
width - SVG: Scalable Vector Graphics
the width attribute defines the horizontal length of an
element in the user coordinate system.
... twenty five
elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length for the rendering area of the primi...
... note: in an html document if both the viewbox and width attributes are omitted, the svg
element will be rendered with a width of 300px value auto | <length> | <percentage> default value auto (treated as 100%) animatable yes note: starting with svg2, width is a geometry property meaning this attribute can also be used as a css property for <svg>.
...And 2 more matches
x - SVG: Scalable Vector Graphics
thirty seven
elements are using this attribute: <altglyph>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60"...
... value <length> | <percentage> default value 0% animatable yes fepointlight for <fepointlight>, x defines the x location for the light source in the coordinate system defined by the primitiveunits attribute on the <filter>
element.
... value <length> | <percentage> default value 0% animatable yes fespotlight for <fespotlight>, x defines the x location for the light source in the coordinate system defined by the primitiveunits attribute on the <filter>
element.
...And 2 more matches
xml:lang - SVG: Scalable Vector Graphics
the xml:lang attribute specifies the primary language used in contents and attributes containing text content of particular
elements.
... it is a universal attribute allowed in all xml dialects to mark up the natural human language that an
element contains.
... all
elements are using this attribute.
...And 2 more matches
<xsl:param> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt
elements, exslt functions, xpath functions, xpath axes the <xsl:param>
element establishes a parameter by name and, optionally, a default value for that parameter.
... when used as a top-level
element, the parameter is global .
... when used inside an <xsl:template>
element, the parameter is local to that template.
...And 2 more matches
<xsl:template> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt
elements, exslt functions, xpath functions, xpath axes the <xsl:template>
element defines an output producing template.
... this
element must have either the match attribute or the name attribute set.
... optional attributes match specifies a pattern that determines the
elements for which this template should be used.
...And 2 more matches
addon-page - Archive of obsolete content
create a page that does not contain navigational
elements.
... for pages like this, navigational
elements such as the awesome bar, search bar, or bookmarks toolbar are not usually relevant and distract from the content you are presenting.
... the addon-page module provides a simple way to have a page which excludes these
elements.
...after this, the page loaded from "data/index.html" will not contain navigational
elements: var addontab = require("sdk/addon-page"); var data = require("sdk/self").data; require("sdk/tabs").open(data.url("index.html")); this only affects the page at "data/index.html": all other pages are displayed normally.
page-worker - Archive of obsolete content
in this example we fetch the first paragraph of a page from wikipedia, then the first paragraph of a different page: var getfirstparagraph = "var paras = document.get
elementsbytagname('p');" + "console.log(paras[0].textcontent);" + "self.port.emit('loaded');" pageworker = require("sdk/page-worker").page({ contentscript: getfirstparagraph, contenturl: "http://en.wikipedia.org/wiki/chalk" }); pageworker.port.on("loaded", function() { pageworker.contenturl = "http://en.wikipedia.org/wiki/cheese" }); scripting page...
... for example, this add-on loads a page from wikipedia, and runs a content script in it to send all the headers back to the main add-on code: var pageworkers = require("sdk/page-worker"); // this content script sends header titles from the page to the add-on: var script = "var
elements = document.queryselectorall('h2 > span'); " + "for (var i = 0; i <
elements.length; i++) { " + " postmessage(
elements[i].textcontent) " + "}"; // create a page worker that loads wikipedia: pageworkers.page({ contenturl: "http://en.wikipedia.org/wiki/internet", contentscript: script, contentscriptwhen: "ready", onmessage: function(message) { co...
...this may take one of the following values: "start": load content scripts immediately after the document
element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults...
...this may have one of the following values: "start": load content scripts immediately after the document
element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to conte...
core/namespace - Archive of obsolete content
let { ns } = require('sdk/core/namespace'); let anamespace = ns(); anamespace(publicapi).secret = secret; one namespace may be used with multiple objects: let { ns } = require('sdk/core/namespace'); let dom = ns(); function view(
element) { let view = object.create(view.prototype); dom(view).
element =
element; // ....
... } view.prototype.destroy = function destroy() { let {
element } = dom(this);
element.parentnode.removechild(
element); // ...
... let sandboxes = ns(); function widget(options) { let {
element, contentscript } = options; let widget = object.create(widget.prototype); view.call(widget, options.
element); sandboxes(widget).sandbox = cu.sandbox(
element.ownerdocument.defaultview); // ...
... let { dom } = require('./view'); widget.prototype.setinnerhtml = function setinnerhtml(html) { dom(this).
element.innerhtml = string(html); }; ...
window/utils - Archive of obsolete content
: var { ci } = require('chrome'); var utils = require('sdk/window/utils'); var browserwindow = utils.getmostrecentbrowserwindow(); var window = browserwindow.content; // `window` object for the current webpage utils.gettoplevelwindow(window) == browserwindow // => true parameters window : nsidomwindow returns nsidomwindow getwindowdocshell(window) returns the nsidocshell for the tabbrowser
element.
... returns nsidomwindow getfocused
element() get the
element that is currently focused.
... this will always be an
element within the document loaded in the focused window, or null if no
element in that document is focused.
... returns nsidom
element getframes(window) get the frames contained by the given window.
JavaScript Daemons Management - Archive of obsolete content
lem.style.top = math.sin(oletter.pos) * ndist + "px"; oletter.elem.style.left = math.cos(oletter.pos) * ndist * 5 + "px"; } } function prepare () { // build letters list // http://tyleregeto.com/text-animation-in-javascript this.textcontent = ""; aletters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.create
element("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this }; aletters.push(oletter); oletter.pos = math.random() * 50; oletter.elem.style.position = "relative"; this.appendchild(ospan); } } var nmaxdist = 25, aletters = [], stext = "do you feel lucky, punk?", orecompose = new daemon(document.create
element("p"), perform, 33, 30, prepare);...
... "perform": function () { [custom code] }, // required |*| }, 200, 30); |*| \*/ var stext = "do you feel lucky, punk?", ounhide = daemon.buildaround({ // http://tyleregeto.com/text-animation-in-javascript "letters": [], "numletters": 0, "clock": 0, "interval": 0.0, "delta": 33, "letters": [], "pool": ["0","1","2","3","4","5","6","7","8","9"], "target": document.create
element("p"), "create": function () { // build letters list this.target.textcontent = ""; this.letters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.create
element("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this.target }; this.letters.push(oletter); ...
...lem.style.top = math.sin(oletter.pos) * ndist + "px"; oletter.elem.style.left = math.cos(oletter.pos) * ndist * 5 + "px"; } } function prepare () { // build letters list // http://tyleregeto.com/text-animation-in-javascript this.textcontent = ""; aletters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.create
element("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this }; aletters.push(oletter); oletter.pos = math.random() * 50; oletter.elem.style.position = "relative"; this.appendchild(ospan); } } var nmaxdist = 25, aletters = [], stext = "do you feel lucky, punk?", orecompose = new daemon.safe(document.create
element("p"), perform, 33, 30, prep...
...erform": function () { [custom code] }, // required |*| }, 200, 30); |*| \*/ var stext = "do you feel lucky, punk?", ounhide = daemon.safe.buildaround({ // http://tyleregeto.com/text-animation-in-javascript "letters": [], "numletters": 0, "clock": 0, "interval": 0.0, "delta": 33, "letters": [], "pool": ["0","1","2","3","4","5","6","7","8","9"], "target": document.create
element("p"), "create": function () { // build letters list this.target.textcontent = ""; this.letters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.create
element("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this.target }; this.letters.push(oletter); ...
Toolbar - Archive of obsolete content
you must not insert your toolbar button between any of the following
elements: the combined back/forward button, the location bar, the stop botton, or the reload button.
... these
elements have special behaviors when placed next to eachother, and will break if separated by another
element.
... * @param {string} afterid the id of the
element to insert after.
... @optional */ function installbutton(toolbarid, id, afterid) { if (!document.get
elementbyid(id)) { var toolbar = document.get
elementbyid(toolbarid); // if no afterid is given, then append the item to the toolbar var before = null; if (afterid) { let elem = document.get
elementbyid(afterid); if (elem && elem.parentnode == toolbar) before = elem.next
elementsibling; } toolbar.insertitem(id, before); toolbar.setattribute("currentset", toolbar.currentset); document.persist(toolbar.id, "currentset"); if (toolbarid == "addon-bar") toolbar.collapsed = false; } } if (firstrun) { installbutton("nav-bar", "my-extension-navbar-button"); // the "addon-bar" is availabl...
getAttributeNS - Archive of obsolete content
while namespaced attributes are less common than namespaced
elements, some standards such as xlink depend on them.
... note that all gecko-based browsers (including firefox) support dom:
element.getattributens.
... && attrs2[i].nodevalue === ns ) { // e.g., 'xmlns:xlink' and 'http://www.w3.org/1999/xlink' return attrs[j].nodevalue; } } thisitem = thisitem.parentnode; } } } return ''; // if not found (some implementations return 'null' but this is not standard) } alert(getattributenswrapper (some
element, 'http://www.w3.org/1999/xlink', 'href')); // gets xlink:href, xl:href, etc.
... on current
element, conditionally on whether its prefix matches a declared namespace see also http://www.w3.org/tr/dom-level-3-cor...mespaceurialgo ...
Extension Etiquette - Archive of obsolete content
other ui
elements in general, toolbar items are very useful to end users because they can be removed or added to various toolbars as necessary.
...likewise, use context menu items sparingly — only for tasks that are done frequently or on specific
elements of a web page.
... ids and class names in html and xul documents, when extensions add
elements to web pages or browser windows.
...class names for html
elements created by the cool beans extension, for instance, might all be prefixed with cool-beans-.
Listening to events in Firefox extensions - Archive of obsolete content
types of events there are multiple types of events that application and extension authors can use to receive notifications from <xul:browser> and <xul:tabbrowser>
elements to hear about changes relating to loads of the content contained within them.
... some of the more interesting dom events you may wish to monitor are listed here: event description domlinkadded dispatched when a new html <link>
element is detected in the document.
...both browser and tabbrowser
elements support the following: var progresslistener = { // add nsiwebprogressimplementation here } b.addprogresslistener(progresslistener); where b is the browser or tabbrowser you want to listen to events for.
... pageshoweventhandlers the pageshoweventhandlers() function is called by the pageshow event and is used to populate the character set menu and update the ui
elements associated with any detected feeds or opensearch plugins for the website.
JavaScript Object Management - Archive of obsolete content
this allows you to manipulate and possibly change
elements in the window without the user noticing the changes.
... */ init : function(aevent) { this._stringbundle = document.get
elementbyid("xulschoolhello-string-bundle"); // you can make changes to the window dom here.
...if you really need to do something like this anyway, one way to do it is to have a timeout execute the code after a delay: init : function(aevent) { let that = this; this._stringbundle = document.get
elementbyid("xs-hw-string-bundle"); window.settimeout( function() { window.alert(that._stringbundle.getstring("xulschoolhello.greeting.label")); }, 0); } the settimeout function executes the function in the first parameter, after a delay in miliseconds specified by the second parameter.
... a javascript code module is a regular js file that specifies which of the declared
elements in it are public.
XUL user interfaces - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: // xul demonstration var datebox, daybox, currentday, status; //
elements // called by window onload function init() { datebox = document.get
elementbyid("date-text") daybox = document.get
elementbyid("day-box") status = document.get
elementbyid("status") settoday(); } // called by clear button function cleardate() { datebox.value = "" refresh() } // called by today button function settoday() { var d = new date() datebox.value = (d.getmonth() + 1) ...
...it is made up of other
elements that are generated by its xbl binding.
... discover the class of its html:input
element.
... this is the
element that actually receives user input.
Case Sensitivity in class and id Names - Archive of obsolete content
in the authoring of both css and javascript/dom (otherwise known as dhtml) routines, it is a near-certainty that class and id names will be used to identify
elements.
...in section 7.5.2, which defines class and ids, we find the following text: id = name [cs] this attribute assigns a name to an
element.
...class = cdata-list [cs] this attribute assigns a class name or set of class names to an
element.
... any number of
elements may be assigned the same class name or names.
Creating a dynamic status bar extension - Archive of obsolete content
function inforeceived() { var samplepanel = document.get
elementbyid('stockwatcher'); var output = httprequest.responsetext; if (output.length) { // remove whitespace from the end of the string; // this gets rid of the end-of-line characters output = output.replace(/\w*$/, ''); // build the tooltip string var fieldarray = output.split(','); // assert that fieldarray[0] == 'goog' samplepanel.label = 'goog: ' + fieldarray[1]; ...
... samplepanel.tooltiptext = 'chg: ' + fieldarray[4] + ' | ' + 'open: ' + fieldarray[5] + ' | ' + 'low: ' + fieldarray[6] + ' | ' + 'high: ' + fieldarray[7] + ' | ' + 'vol: ' + fieldarray[8]; } } the first thing we do here is get the status bar panel into the variable samplepanel by calling the document.get
elementbyid() dom function.
...we use the split() string function to split the comma-separated value string into its individual parts, with each field in a separate
element in the array fieldarray.
...the string is built from a combination of static strings and various
elements from the fieldarray array.
Using XML Data Islands in Mozilla - Archive of obsolete content
javascript can use the content of a <script>
element as a data block if the src attribute is omitted and the type attribute does not specify an executable script type.
...ike this: <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> the xml source text can then be retrieved like this: var ordersource = document.get
elementbyid("purchase-order").textcontent; the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera, webkit-based browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
...tle>xml data block demo</title> <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> <script> function rundemo() { var ordersource = document.get
elementbyid("purchase-order").textcontent; var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); var lineitems = doc.get
elementsbytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].get
elementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.body.textcontent = "the...
...for this demo, you must create an external document called purchase_order.xml: <!doctype html> <html> <head> <title>xml data block demo</title> <script> function rundemo() { var doc = document.get
elementbyid("purchase-order").contentdocument; var lineitems = doc.get
elementsbytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].get
elementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.get
elementbyid("output-box").textcontent = "the purchase order contains " + lineitems.length + " line items.
Block and Line Layout Cheat Sheet - Archive of obsolete content
ns_frame_external_reference ns_frame_replaced_
element ns_frame_generated_content ns_frame_has_loaded_images ns_frame_out_of_flow ns_frame_selected_content ns_frame_is_dirty ns_frame_is_unflowable an unflowable frame is an error condition; for example, due to system limitations.
... max
elementwidth the maximum width for
elements within the frame that cannot be broken down further; e.g., the longest word in a paragraph.
... brs_computemax
elementsize this flag is set if reflow should recompute an
element's maximum size.
... it is set in the nsblockreflowstate constructor if the "max
elementsize" member of the nshtmlreflowmetrics object has been provided by (the parent frame?).
Monitoring downloads - Archive of obsolete content
onload: function() { // initialization code this.initialized = true; this.strings = document.get
elementbyid("downloadlogger-strings"); this.dlmgr = components.classes["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); this.dlmgr.addlistener(downloadlogger); // open the database, placing its file in the profile directory this.dbfile = components.classes["@mozilla.org/file/directory_service;1"] .getse...
...ofd", components.interfaces.nsifile); this.dbfile.append("downloadlogger.sqlite"); // get access to the storage service and open the database this.storageservice = components.classes["@mozilla.org/storage/service;1"] .getservice(components.interfaces.mozistorageservice); var dbconn = this.storageservice.opendatabase(this.dbfile); var loglist = document.get
elementbyid("loglist"); var statement = dbconn.createstatement("select * from items"); // get all items in table try { while (statement.executestep()) { var row = document.create
element('listitem'); // add the cells to the row var cell = document.create
element('listcell'); var sourcestr = statement.getstring(0); row.setattribute("tooltiptext", sourcestr)...
...; sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell = document.create
element('listcell'); cell.setattribute("label", (statement.getint64(1) / 1024).tofixed(1) + "kb"); // size cell.setattribute("style", "text-align:right"); row.appendchild(cell); var thedate = new date(statement.getint64(2) / 1000); // start time cell = document.create
element('listcell'); var datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); thedate = new date(statement.getint64(3)); // end time cell = document.create
element('listcell'); datestr = thedate.tolocalestring()...
...; cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell = document.create
element('listcell'); cell.setattribute("label", speed.tofixed(1) + "kb/sec"); cell.setattribute("style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var style = "color:black"; cell = document.create
element('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete"; style = "color:green"; break; case 2: statusstr = "failed"; style = "color:red"; break; case 3: ...
Mozilla Application Framework in Detail - Archive of obsolete content
themes are simply collections of images and css which can augment or replace your current ui
elements.
...xbl (extensible binding language) allows you to expand your library of interface
elements, and even construct your own xml language for defining your ui.
...you could easily create xml
elements such as <chessboard> or <chesspiece> and via xbl map these to images and application logic.
...rdf, a core
element to the framework, allows you to define dynamic
elements in your ui (
elements that may change after you have completed the application, such as a "history" menu item).
PyDOM - Archive of obsolete content
for example, let's say you have xul similar to pyxultest: top-level script code says something like: button = document.get
elementbyid("some-button") button.foo = 0 and the button itself might look like: <button id="some-button" label="click here" onclick="event.target.foo += 1; print 'foo is now', event.target.foo"/> note that (a) we have stuck an arbitrary attribute on a dom
element and (b) in all cases (e.g., event handler and top-level script), the dom node needs to be explicitly specified - the globals are th...
...the event handler could also have used get
elementbyid - the point is that both the event handler and top-level script share the same namespace.
...this means that if you set the script-type to python for the window, python is the default script type for all child
elements in the window.
... xul use a script-type attribute on your
elements.
Properties - Archive of obsolete content
properties major most siginificant
element of the installversion object.
...major version of netscape 6 is "6" minor second most siginificant
element of the installversion object.e.g.
... minor version of netscape communicator 4.7 is "7" release second least siginificant
element of the installversion object.
... build least siginificant
element of the installversion object.e.g.
Flexgroup - Archive of obsolete content
"flexgroup" is used to group flexible
elements together and should be set to an integer.
...
elements with a lower flexgroup are flexed first.
... when those
elements have reached their maximum sizes, the
elements with the next higher flexgroup are flexed.
... this process continues until there are no more
elements remaining.
browser.type - Archive of obsolete content
subdocuments of chrome documents are of chrome type, unless the container
element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type.
... warning: the type attribute must be set before the
element is inserted into the document.
...for instance, in a web browser, this would be the
element that displays the web page.
...this is the preferred value for any browser
element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment.
collapse - Archive of obsolete content
you should put a grippy
element inside the splitter when it is used for collapsing.
... before when the grippy is clicked, the
element immediately before the splitter in the same parent is collapsed so that its width or height is 0.
... after when the grippy is clicked, the
element immediately after the splitter in the same parent is collapsed so that its width or height is 0.
... both either the
element immediately before the splitter, or the
element immediately after the splitter can be collapsed, if the size of that
element would fall below the minimum size due to the position of the splitter.
orient - Archive of obsolete content
« xul reference home orient type: one of the values below used to specify whether the children of the
element are oriented horizontally or vertically.
... the default value depends on the
element.
... horizontal child
elements of the
element are placed next to each other in a row in the order that they appear in the xul source.
... vertical child
elements of the
element are placed under each other in a column in the order that they appear in the xul source.
pack - Archive of obsolete content
« xul reference home pack type: one of the values below the pack attribute specifies where child
elements of the box are placed when the box is larger that the size of the children.
... start child
elements are placed starting from the left or top edge of the box.
... center extra space is split equally along each side of the child
elements, resulting the children being placed in the center of the box.
... end child
elements are placed on the right or bottom edge of the box.
preference-editable - Archive of obsolete content
« xul reference home preference-editable mozilla 1.8 type: boolean if true, the
element may be used as one that modifies a preference in a prefwindow.
... the preference attribute may be used to connect to a preference
element.
... this is useful for custom
elements implemented in xbl.
... the
element should fire change, command, or input event when the value is changed so that the preference will update accordingly.
resizebefore - Archive of obsolete content
« xul reference home resizebefore type: one of the values below this attribute indicates which
element to the left or above the splitter should be resized when the splitter is repositioned.
... closest the
element immediately to the left or above the splitter resizes.
... farthest the
element that is the farthest away from the splitter to the left or above the splitter resizes.
... flex the closest flexible
element resizes.
uri - Archive of obsolete content
« xul reference home uri type: string for template-generated content, the attribute should be placed on the
element where content generation should begin.
... thus, it should be placed on an
element that is a descendant of a template.
...
elements that appear inside the
element with the attribute will be repeated for each node in the rdf datasource.
...
elements outside will appear only once.
value - Archive of obsolete content
« xul reference home value type: string the string attribute allows you to associate a data value with an
element.
...be aware, however, that some
elements, such as textbox will display the value visually, so in order to merely associate data with an
element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
... for user editable menulist
elements, the contents, as visible to the user, are read and set using the menulist.value syntax.
... for those
elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user.
command - Archive of obsolete content
the command event is executed when an
element is activated.
... how it is activated varies for each
element and in many cases, there are several ways to activate an
element.
...command
elements can be activated by any of their observing
elements being activated.
... general info specification xul interface xulcommandevent bubbles yes cancelable yes target
element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
findbar - Archive of obsolete content
for example, the standard findbar in firefox 3.5 looks like this on the mac: you may attach a findbar to a particular browser
element by either setting the findbar's browserid attribute to the id of the browser
element before the findbar
element is bound, or by setting the findbar's browser property to the browser
element itself.
...nextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser
element to which the findbar is attached.
...ies align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width browser type: browser
element lets you set and get the browser in which the findbar is located.
... possible values are: find_normal (0): normal find find_typeahead (1): typeahead find find_links (2): link find methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
insertItem - Archive of obsolete content
« xul reference home insertitem( id, beforenode, wrapper, beforepermanent ) not in seamonkey 1.x return type:
element add an item with the given id to the toolbar.
...the third argument can be used to wrap the new item in another
element.
... the id should match an
element in the toolbar's toolbarpalette.
... the method returns the dom
element for the created item.
Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen checkadjacent
element clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensure
elementisvisible ensureindexisvisible ensureselected
elementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor get
elementsbyattribute get
elementsbyattributens getformattedstring gethtmleditor getindexoffirstvi...
...goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferencefor
element reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypix...
...els scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection related dom
element methods dom:
element.addeventlistener dom:
element.appendchild dom:
element.comparedocumentposition dom:
element.dispatchevent dom:
element.getattribute dom:
element.getattributenode dom:
element.getattributenodens dom:
element.getattributens dom:
element.get
elementsbytagname dom:
element.get
elementsbytagnamens dom:
element.getfeature fixme: brokenlink dom:
element.getuserdata dom:
element.hasattribute dom:
element.hasattributens dom:
element.hasattributes dom:
element.haschildnodes dom:
element.insertbefore dom:el...
...ement.isequalnode dom:
element.issamenode dom:
element.issupported dom:
element.lookupnamespaceuri dom:
element.lookupprefix dom:
element.normalize dom:
element.removeattribute dom:
element.removeattributenode dom:
element.removeattributens dom:
element.removechild dom:
element.removeeventlistener dom:
element.replacechild dom:
element.setattribute dom:
element.setattributenode dom:
element.setattributenodens dom:
element.setattributens dom:
element.setuserdata ...
MenuButtons - Archive of obsolete content
both the button and the toolbar button
elements support two special types used for creating menu buttons.
... in either case, a menupopup
element should be placed as a direct child of the button.
... when the command is fired, it bubbles up through the chain of
elements to the top of the document.
... as with the 'menu' type, the 'menu-button' type may be applied to either the button or the toolbarbutton
element.
PopupEvents - Archive of obsolete content
this event will be fired even for
elements that don't have a context menu associated with them.
...<script> function openfilemenu() { var filemenu = document.get
elementbyid("file-menu"); filemenu.addeventlistener("popupshown", filemenuopened, false); filemenu.open = true; } function filemenuopened(event) { if (event.target != document.get
elementbyid("file-menupopup")) return; var filemenu = document.get
elementbyid("file-menu"); filemenu.removeeventlistener("popupshown", filemenuopened, false); var openmenu = document.get
elementbyid("open-menu"...
...<panel onpopuphiding="document.get
elementbyid('search').value = '';"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> </panel> you can prevent a popup from hiding by calling the event's preventdefault method.
...this is because there is no longer an
element to send the events to.
PopupKeys - Archive of obsolete content
handling keys within menus when using a menupopup
element, a keyboard listener is attached to the window that will handle keypresses for the menu.
...unlike with a menu, when a panel is opened, the focus is removed from any
element that has it.
... this allows the focus to be shifted to
elements within the panel.
...when the ignorekeys attribute is placed on a <menupopup> or <panel>
element, and its value is set to the value true, the key listener is not used.
tag - Archive of obsolete content
if set, the conditions will only match if the template builder is parsing content for an
element directly inside this tag.
... for example, by using a value of treechildren, the condition will only match when placing
elements directly inside a treechildren tag.
... thus, nested
elements will not match because they are directly inside a treeitem.
... this attribute is useful to provide different rules for outer and inner
elements.
Property - Archive of obsolete content
node firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label label
element lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage ...
...open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position predicate preference
elements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll ...
...ings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpages wraparound year yearleadingzero related dom
element properties dom:
element.attributes dom:
element.baseuri dom:
element.child
elementcount dom:
element.childnodes dom:
element.children dom:
element.clientheight dom:
element.clientleft dom:
element.clienttop dom:
element.clientwidth dom:
element.clonenode dom:
element.firstchild dom:
element.first
elementchild dom:
element.lastchild dom:
element.last
elementchild dom:
element.localnam...
...e dom:
element.namespaceuri dom:
element.next
elementsibling dom:
element.nextsibling dom:
element.nodename dom:
element.nodetype dom:
element.nodevalue dom:
element.ownerdocument dom:
element.parentnode dom:
element.prefix dom:
element.previous
elementsibling dom:
element.previoussibling dom:
element.scrollheight dom:
element.scrollleft dom:
element.scrolltop dom:
element.scrollwidth dom:
element.tagname dom:
element.textcontent ...
Sorting and filtering a custom tree view - Archive of obsolete content
sort(this)" class="sortdirectionindicator"/> <splitter class="tree-splitter"/> <treecol id="weapon" label="weapon" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> </treecols> <treechildren id="tree-children"/> </tree> </window> sort.js var table = null; var data = null; var tree; var filtertext = ""; function init() { tree = document.get
elementbyid("tree"); loadtable(); } //this function is called every time the tree is sorted, filtered, or reloaded function loadtable() { //remember scroll position.
...h({name: "shredder", description: "armored man", weapon: "blades"}); data.push({name: "casey jones", description: "goalie masked man", weapon: "hockey stick"}); data.push({name: "april o'neil", description: "journalist", weapon: "none"}); } if (filtertext == "") { //show all of them table = data; } else { //filter out the ones we want to display table = []; data.foreach(function(
element) { //we'll match on every property for (var i in
element) { if (prepareforcomparison(
element[i]).indexof(filtertext) != -1) { table.push(
element); break; } } }); } sort(); //restore scroll position if (topvisiblerow) { settopvisiblerow(topvisiblerow); } } //generic custom tree view stuff function treeview(table) { this.rowcount = table.length; this.getcell...
..."ascending" : "descending"); tree.setattribute("sortresource", columnname); tree.view = new treeview(table); //set the appropriate attributes to show to indicator var cols = tree.get
elementsbytagname("treecol"); for (var i = 0; i < cols.length; i++) { cols[i].removeattribute("sortdirection"); } document.get
elementbyid(columnname).setattribute("sortdirection", order == 1 ?
... return o.tolowercase(); } return o; } function gettopvisiblerow() { return tree.treeboxobject.getfirstvisiblerow(); } function settopvisiblerow(topvisiblerow) { return tree.treeboxobject.scrolltorow(topvisiblerow); } function inputfilter(event) { //do this now rather than doing it at every comparison var value = prepareforcomparison(event.target.value); setfilter(value); document.get
elementbyid("clearfilter").disabled = value.length == 0; } function clearfilter() { document.get
elementbyid("clearfilter").disabled = true; var filter
element = document.get
elementbyid("filter"); filter
element.focus(); filter
element.value = ""; setfilter(""); } function setfilter(text) { filtertext = text; loadtable(); } ...
Introduction - Archive of obsolete content
in xul, the datasource is specified by placing the datasources attribute on an
element.
...when the xul parser sees an
element with this attribute, it constructs a template builder for the
element and attaches it to the
element.
... it is expected that there will be a template inside the
element.
...you can get this composite datasource in a script by using an
element's 'database' property if you want to add or remove datasources from it.
Tree Widget Changes - Archive of obsolete content
there are no changes to xul tree tags, however the id attribute is no longer required on treecol
elements just to get them to work.
...a tree will have one of these objects for each column (each treecol
element) in the tree.
... to get a column in javascript: tree.columns.getcolumnfor(treecol
element); tree.columns.getnamedcolumn(treecolid); tree.columns.getcolumnat(index); you can also just use array syntax to get a column: tree.columns["lastname"]; tree.columns[5]; once you have a column, you can get various properties of it: column.index - the index of the column in displayed order column.id - the id attribute of the column column.
element - the treecol
element column.x - the x p...
... the nsitreeview.cycleheader() method has been changed, cycleheader(colid,
element) is now just cycleheader(column), since the code can get the
element from the column object.
Accesskey display rules - Archive of obsolete content
xul
elements display their accesskeys in their label automatically if it's necessary.
...xul
elements don't display any accesskeys on mac xul
elements don't display any accesskeys on mac.
... if a label doesn't have the character, xul
elements append the accesskey character with parentheses.
...xul
elements check "intl.menuitems.alwaysappendaccesskeys" pref value whether they should append accesskey text always.
Creating a Skin - Archive of obsolete content
four
elements, the menubar, the menupopup, the toolbar and the tabpanels appear in light blue.
... the border around these four
elements has been changed to give a heavier 3d appearance.
...opensearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(48px 16px 64px 0); -moz-box-orient: vertical; } #savesearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(80px 16px 96px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an
element use part of an image.
...we could continue by changing the menus, the grippies on the toolbar and the input and checkbox
elements.
Features of a Window - Archive of obsolete content
for example: var mywin = window.open("chrome://findfile/content/findfile.xul", "findfile", "chrome"); specifying the width and height you should have noticed that whenever
elements were added to a window, the window's width expanded to fit the new
elements.
...if you leave it out, the size is determined by the
elements that are in it.
...even if there aren't enough
elements to fit this size, the window will still open at this size and there will be blank space in the remaining area.
... if there are too many
elements, the window will not be large enough to fit the
elements.
Tree Box Objects - Archive of obsolete content
example 1 : source view <script> function doscroll(){ var value = document.get
elementbyid("tbox").value; var tree = document.get
elementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.scrolltorow(value); } </script> <tree id="thetree" rows="4"> <treecols> <treecol id="row" label="row" primary="true" flex="1"/> </treecols> <treechildren> <treeitem label="row 0"/> <treeitem label=...
... example 2 : source view <script> function updatefields(event){ var row = {}, column = {}, part = {}; var tree = document.get
elementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.getcellat(event.clientx, event.clienty, row, column, part); if (column.value && typeof column.value != "string") column.value = column.value.id; document.get
elementbyid("row").value = row.value; document.get
elementbyid("column").value = column.value; doc...
...ument.get
elementbyid("part").value = part.value; } </script> <tree id="thetree" flex="1" onmousemove="updatefields(event);"> <treecols> <treecol id="utensil" label="utensil" primary="true" flex="1"/> <treecol id="count" label="count" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="fork"/> <treecell label="5"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="knife"/> <treecell label="2"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="spoon"/> <treecell label="8"/> </treerow> </treeitem> </treechildren> </tree> <label value="row:"/> <label id="row"/> <label value="column:"/> <label id="column"/> <label value="child typ...
... next, we'll look at rdf which can be used to automatically populate trees and other
elements.
Using Visual Studio as your XUL IDE - Archive of obsolete content
compared to a simple text-editor, visual studio gives you some special features when writing xul: intellisense / autocompletion for
elements and attributes validation syntax coloring (okay, more sophisticated editors like notepad++ provide this as well) before you can use all of this, you have to adjust visual studio a little.
...visual studio will use the schema based on the namespace, so make sure your window
element uses the correct xul namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul.
...xbl if you are writing your own
elements in xbl, you can download a xbl schema from mozilla.doslash.org/xblschema.
...to combine both, you can also add your own xbl
elements to the xul schema to get autocompletion-support and validation for those in your xul files.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul
elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script ...
...tbox textbox (firefox autocomplete) textbox (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 of 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 --- text 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 textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) ti...
...rollbox action assign binding bindings conditions content member param query queryset rule template textnode 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 ...
action - Archive of obsolete content
the action should be contained within a query or rule
element.
...this
element and its descendants may use variables in place of attribute values.
... examples example needed attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, s...
..., ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
dialog - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this
element should be used in place of the window
element for dialog boxes.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(),...
... getbutton( type ) return type: button
element returns the button
element in the dialog corresponding to the given type.
... related
elements dialogheader ...
dropmarker - Archive of obsolete content
a dropmarker is not intended to be used as a separate
element, but as part of another
element.
... examples properties accessibletype attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer ...
... a value indicating the type of accessibility object for the
element.
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
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.
... inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove...
...
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getcli...
...entrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
spacer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an
element that takes up space but does not display anything.
... examples <box> <button label="left"/> <spacer flex="1"/> <button label="right"/> </box> attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove...
...
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getcli...
...entrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related
elements separator, splitter ...
toolbargrippy - Archive of obsolete content
this
element is used internally by the toolbar and should only be used directly when modifying its theme.
... properties accessible examples (example needed) attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the
element.
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
...ibutenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related
elements toolbar, toolbarbutton, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarseparator - Archive of obsolete content
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, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove...
...
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the
element.
...s, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
...ibutenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related
elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarset, toolbarspacer, toolbarspring, toolbox ...
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, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, ,...
...s, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
...ibutenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related
elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarspacer, toolbox ...
toolbarspacer - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties ...
...accessibletype type: integer a value indicating the type of accessibility object for the
element.
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
...ibutenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related
elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarspring - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties accessibletype type: integer a value indicating the type of accessibility object for the
element.
...s, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
...ibutenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related
elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbox interfaces nsiaccessibleprovider ...
treeseparator - Archive of obsolete content
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, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidd...
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
...ibutenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related
elements tree, treecols, treecol, treechildren, treeitem, treerow and treecell.
where - Archive of obsolete content
for more information, see where
elements.
... inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove...
...
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getcli...
...entrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
2006-09-29 - Archive of obsolete content
discussions discussion on how the firefox 1.5.0.7 dom generates xhtml inline
elements using wordpress.
... it was determined that the generated
elements from wordpress do not follow the wc3 guidelines in appendix c of xhtml 1.0.
... although the w3 validation accepted the generated xhtml as valid, a bug identified within the html working group ignored the invalid
elements.
... * * @param aavailwidth the available width into which the
element is * being placed (i.e., the width of its containing * block).
SAX - Archive of obsolete content
elements, attributes, whitespace, and processing instructions).
... an example implementation of the most commonly used content handler: function print(s) { dump(s + "\n"); } xmlreader.contenthandler = { // nsisaxcontenthandler startdocument: function() { print("startdocument"); }, enddocument: function() { print("enddocument"); }, start
element: function(uri, localname, qname, /*nsisaxattributes*/ attributes) { var attrs = []; for(var i=0; i<attributes.length; i++) { attrs.push(attributes.getqname(i) + "='" + attributes.getvalue(i) + "'"); } print("start
element: namespace='" + uri + "', localname='" + localname + "', qname='" + qname + "', attributes={" + attrs.join(",") + "}")...
...; }, end
element: function(uri, localname, qname) { print("end
element: namespace='" + uri + "', localname='" + localname + "', qname='" + qname + "'"); }, characters: function(value) { print("characters: " + value); }, processinginstruction: function(target, data) { print("processinginstruction: target='" + target + "', data='" + data + "'"); }, ignorablewhitespace: function(whitespace) { // don't care }, startprefixmapping: function(prefix, uri) { // don't care }, endprefixmapping: function(prefix) { // don't care }, // nsisupports queryinterface: function(iid) { if(!iid.equals(components.interfaces.nsisupports) && !iid.equals(components.interfaces.nsisaxcontenthandler)) throw components.results.ns_e...
...below is an example of parsing from a string: xmlreader.parsefromstring("<f:a xmlns:f='g' d='1'><bbq/></f:a>", "text/xml"); this call results in the following output (assuming the content handler from the example above is used): startdocument start
element: namespace='g', localname='a', qname='f:a', attributes={d='1'} start
element: namespace='', localname='bbq', qname='bbq', attributes={} end
element: namespace='', localname='bbq', qname='bbq' end
element: namespace='g', localname='a', qname='f:a' enddocument ...
-moz-stack-sizing - Archive of obsolete content
normally, a <xul:stack> will change its size so that all of its child
elements are completely visible.
... /* keyword values */ -moz-stack-sizing: auto; -moz-stack-sizing: ignore; /* global values */ -moz-stack-sizing: inherit; -moz-stack-sizing: initial; -moz-stack-sizing: unset; if you wish to prevent the stack from resizing automatically to accommodate its children, you can set -moz-stack-sizing to ignore on the child
element.
... note: in previous versions of gecko it was possible to work around the problem by setting very large negative bottom and right margins on the stack
element and equally large positive bottom and right margins on the children whose size you didn't want to ignore.
... (the problem does not affect children moved above or to the left of the stack.) initial valuestretch-to-fitapplies toall
elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values stretch-to-fit the child will influence the stack's size.
-ms-content-zoom-chaining - Archive of obsolete content
initial valuenoneapplies tonon-replaced block-level
elements and non-replaced inline-block
elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values none the initial value.
... chained the nearest zoomable parent
element begins zooming when the user hits a zoom limit during page manipulation.
... remarks this property has no effect on non-zoomable
elements.
... for information on zoomable
elements, see -ms-content-zooming.
-ms-content-zoom-limit-max - Archive of obsolete content
the -ms-content-zoom-limit-max css property is a microsoft extension that specifies the selected
elements' maximum zoom factor.
... initial value400%applies tonon-replaced block-level
elements and non-replaced inline-block
elementsinheritednopercentagesthe largest allowed zoom factor.
...this property has no effect on non-zoomable
elements.
... see -ms-content-zooming for details on zoomable
elements.
Descendants and Filters - Archive of obsolete content
« previousnext » accessing descendants in many cases, the node that you're interested in is not the direct child of the top xml
element.
...for instance var
element = <pets> <dogs> <fido color="red"/> <spike color="blue"/> </dogs> </pets>;
element..fido.@color = "green";
element..spike.@color = "purple"; changes the colors of both of our pet dogs.
...that is, if there are multiple descendants of the requested type, an xml list is returned, instead of the normal
element.
...consider var
element = <dogs> <fido color="brown"/> <spike color="black"/> <killer color="brown"/> </dogs>; var list =
element.*.(@color == "brown"); originally,
elements.* returns a list with all 3 dogs in it.
Namespaces - Archive of obsolete content
« previousnext » e4x and namespaces oftentimes, xml documents will contain
elements from a variety of namespaces.
...the localname property returns the name of the
element, without any namespace prefix.
... the uri property returns the uri of the namespace that the
element is in.
...info.uri; // returns "http://www.w3.org/1999/xhtml"
elements in no namespace return the empty string as their uri.
The global XML object - Archive of obsolete content
xml
elements will remember the settings of the xml object from the time of their creation.
...the following example defines the foocount() method, which returns the amount of <foo>
elements in the xml: xml.prototype.function::foocount = function foocount() { return this..foo.length(); }; <foobar><foo/><foo/><foo/></foobar>.foocount() // returns 3 ignorecomments true by default.
...observe: var
element = <foo> <!-- my comment --> <bar/> </foo>;
element.comments().length(); // returns 0
element.toxmlstring(); // returns <foo><bar/></foo> xml.ignorecomments = false;
element = <foo> <!-- my comment --> <bar/> </foo>;
element.comments().length(); // returns 1
element.toxmlstring(); // returns <foo><!-- my comment --><bar/></foo> ignoreprocessinginstructions true by default.
...for example var
element = <foo> <?process x="true"?> <bar/> <?process x="false"?> </foo>;
element.toxmlstring(); // returns <foo><bar/></foo> xml.ignoreprocessinginstructions = false; var
element = <foo> <?process x="true"?> <bar/> <?process x="false"?> </foo>;
element.toxmlstring(); // returns <foo><?process x="true"?><bar/><?process x="false"?></foo> ignorewhitespace true by default.
New in JavaScript 1.3 - Archive of obsolete content
array.prototype.push(): in javascript 1.2, the push method returned the last
element added to an array.
... array.prototype.slice(): in javascript 1.2, the splice method returned the
element removed, if only one
element was removed (howmany parameter is 1).
... in javascript 1.3, splice always returns an array containing the removed
elements.
... if one
element is removed, an array of one
element is returned.
JSObject - Archive of obsolete content
getslot retrieves the value of an array
element of a javascript object.
... setslot sets the value of an array
element of a javascript object.
...retrieves the value of an array
element of a javascript object.
...sets the value of an array
element of a javascript object.
Examples - Archive of obsolete content
</p> <p> this document contains inline css rules contained in a <code>style</code>
element and surrounded by a comment and javascript contained in a <code>script</code>
element and surrounded by a comment.
... </p> <p> this document contains inline css rules contained in a <code>style</code>
element and surrounded by a sgml comment.
... </p> <p> this document contains inline css rules contained in a <code>style</code>
element and surrounded by a sgml comment.
... </p> <p> this document contains inline css rules contained in a <code>style</code>
element and surrounded by a sgml comment.
Troubleshooting XForms Forms - Archive of obsolete content
ensure that your <html>
element contains the supported namespace declaration: xmlns="http://www.w3.org/1999/xhtml" (instead of the newer, unratified version, xhtml 2.0, located at http://www.w3.org/2002/06/xhtml2 ) inline instance, no controls get bound have you remembered to use the correct namespace for the instance nodes?
... if your binding expression contains a /, look for any containing xf:group, xf:repeat, xf:input or other
elements that set the context node.
... instance(...) not working be aware that the instance(...) returns an
element node, and not the document node.
... so with an instance like this: <xf:instance id="ins2" xmlns=""> <data> <value>42</value> </data> </xf:instance> you should use <output ref="instance('ins2')/value"/> to show the contents of the value
element.
RDF in Mozilla FAQ - Archive of obsolete content
xul templates xul templates are created by specifying a datasources attribute on an
element in a xul document.
...*/; // get the dom
element for 'my-tree' var tree = document.get
elementbyid('my-tree'); // add our datasource to it tree.database.adddatasource(ds); // force the tree to rebuild *now*.
...tree.builder.rebuild(); any xul
element with a datasources attribute will "get" a database property and a builder property.
... to insert plaintext in a template, use the <text>
element.
Building up a basic demo with Three.js - Game development
body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="three.min.js"></script> <script> var width = window.innerwidth; var height = window.innerheight; /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas>
element, that three.js will insert on the page to 100% to fill the entire available viewport space.
... the first <script>
element includes the three.js library in the page, and we will write our example code inside the second.
... var renderer = new three.webglrenderer({antialias:true}); renderer.setsize(width, height); renderer.setclearcolor(0xdddddd, 1); document.body.appendchild(renderer.dom
element); we are creating a new webgl renderer, setting its size to fit the whole available space on the screen, and appending the dom structure to the page.
... add this code into our second <script>
element, just below the javascript comment.
Plug-in Development Overview - Gecko Plugin API Reference
for information about the html
elements to use, see using html to display plug-ins.
...the data can come from either an object
element in an html file (where the object or embed
element either specifies the mime type directly or references a file of that type), from a separate non-html file of that mime type, or from the server.
... making plug-ins scriptable scriptable plug-ins are plug-ins that have been extended to provide methods that can be called from javascript and the dom when accessed through the object or embed
element.
... consider the following example, where a media player plug-in can be controlled with an advancetonextsong() method called inside the script
element: <object id="myplugin" type="audio/wav" data="music.wav"> </object> <script type="application/javascript"> var theplugin = document.get
elementbyid('myplugin'); if (theplugin && theplugin.advancetonextsong) theplugin.advancetonextsong(); else alert("plugin not installed correctly"); </script> in the past, liveconnect and later xpconnect were used to make plug-ins scriptable.
Block (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
a block on a webpage is an html
element that appears on a new line, i.e.
... underneath the preceding
element in a horizontal writing mode, and above the following
element (commonly known as a block-level
element).
... for example, <p> is by default a block-level
element, whereas <a> is an inline
element — you can put several links next to one another in your html source and they will sit on the same line as one another in the rendered output.
... using the display property you can change whether an
element displays inline or as a block (among many other options); blocks are also subject to the effects of positioning schemes and use of the position property.
IDL - MDN Web Docs Glossary: Definitions of Web-related terms
the content attribute is the attribute as you set it from the content (the html code) and you can set it or get it via
element.setattribute() or
element.getattribute().
...for example, to set an <input>
element's maxlength to 42 using the content attribute, you have to call setattribute("maxlength", "42") on that
element.
...these are the attributes you can read or set using javascript properties like
element.foo.
...for example, the default type for <input>
elements is "text", so if you set input.type="foobar", the <input>
element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar".
Intrinsic Size - MDN Web Docs Glossary: Definitions of Web-related terms
in css, the intrinsic size of an
element is the size it would be based on its content, if no external factors were applied to it.
... for example, inline
elements are sized intrinsically: width, height, and vertical margin and padding have no impact, though horizontal margin and padding do.
... intrinsic sizing takes into account the min-content and max-content size of an
element.
...the keyword value of min-content for the width property will size an
element according to the min-content size.
Tag - MDN Web Docs Glossary: Definitions of Web-related terms
in html, a tag is used for creating an
element.
... the name of an html
element is the name used in angle brackets such as <p> for paragraph.
... note that the end tag's name is preceded by a slash character, </p>, and that in empty
elements, the end tag is neither required nor allowed.
... learn more general knowledge html
element on wikipedia html
elements syntax on whatwg technical reference introduction to html ...
caret - MDN Web Docs Glossary: Definitions of Web-related terms
on the web, a caret is used to represent the insertion point in <input> and <textarea>
elements, as well as any
elements whose contenteditable attribute is set, thereby allowing the contents of the
element to be edited by the user.
... learn more general knowledge caret navigation on wikipedia css related to the caret you can set the color of the caret for a given
element's editable content by setting the
element's css caret-color property to the appropriate <color> value.
... html
elements that may present a caret these
elements provide text entry fields or boxes and therefore make use of the caret.
... <input type="text"> <input type="password"> <input type="search"> <input type="date">, <input type="time">, <input type="datetime">, and <input type="datetime-local"> <input type="number">, <input type="range"> <input type="email">, <input type="tel">, and <input type="url"> <textarea> any
element with its contenteditable attribute set ...
Grids - Learn web development
a grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design
elements.
... they help us to create designs where
elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.
... we will instead place all of the
elements for our site on the grid, using the grid lines.
... positioning with grid-template-areas an alternative way to place items on your grid is to use the grid-template-areas property and giving the various
elements of your design a name.
Beginner's guide to media queries - Learn web development
this feature means you can test if the user has the ability to hover over an
element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.
... @media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; column-gap: 20px; } nav ul { display: flex; } nav li { flex: 1; } } this css gives us a two-column layout inside the article, of the article content and related information in the aside
element.
...inside a media query we'll make the main
element into a two column grid.
... the viewport meta tag if you look at the html source in the above example, you'll see the following
element included in the head of the document: <meta name="viewport" content="width=device-width,initial-scale=1"> this is the viewport meta tag — it exists as a way control how mobile browsers render content.
Multiple-column layout - Learn web development
spanning columns you can cause an
element to span across all of the columns.
... in this case the content breaks when the spanning
element is introduced and continues below creating a new set of column boxes.
... to cause an
element to span all of the columns use the column-span property set to all.
... note that it isn't possible to cause an
element to span some columns.
Responsive design - Learn web development
flexible floated layouts were achieved by giving each
element a percentage width, and ensuring that across the layout the totals were not more than 100%.
... responsive images, using the <picture>
element and the <img> srcset and sizes attributes solve both of these problems.
... responsive typography an
element of responsive design not covered in earlier work was the idea of responsive typography.
...they can be used to tweak any
element to make it more usable or attractive at alternate screen sizes.
How can we design for all types of users? - Learn web development
relative units also called proportional units, relative units are computed relative to a parent
element.
... relative units are expressed in em, % and rem: percent-based sizes: % this unit tells your browser that an
element's font size must be n% of the previous
element whose font size was expressed.
... rem-based sizes: rem this unit is proportional to the root
element's font size and is expressed as portions of 1, like em.
...this unit is relative to the root
element's size and not to any other parent.
Using data attributes - Learn web development
html5 is designed with extensibility in mind for data that should be associated with a particular
element but need not have any defined meaning.
... data-* attributes allow us to store extra information on standard, semantic html
elements without other hacks such as non-standard attributes, extra properties on dom, or node.setuserdata().
...any attribute on any
element whose attribute name starts with data- is a data attribute.
... that said, though, for custom
element-associated metadata, they are a great solution.
Silly story generator - Learn web development
if the online editor you are using doesn't have a separate javascript panel, feel free to put it inline in a <script>
element inside the html page.
... apply the external javascript file to your html by inserting a <script>
element into your html referencing main.js.
...this gives you three variables that store references to the "enter custom name" text field (customname), the "generate random story" button (randomize), and the <p>
element at the bottom of the html body that the story will be copied into (story), respectively.
...the following for example turns the background of the <html>
element red — so the entire browser window should go red if the javascript is applied properly: document.queryselector('html').style.backgroundcolor = 'red'; math.round() is a built-in javascript method that simply rounds the result of a calculation to the nearest whole number.
Object building practice - Learn web development
these contain the following, respectively: a very simple html document featuring an <h1>
element, a <canvas>
element to draw our balls on, and
elements to apply our css and javascript to our html.
... some javascript that serves to set up the <canvas>
element and provide a general function that we're going to use.
... the first part of the script looks like so: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); const width = canvas.width = window.innerwidth; const height = canvas.height = window.innerheight; this script gets a reference to the <canvas>
element, then calls the getcontext() method on it to give us a context on which we can start to draw.
... next, we set constants called width and height, and the width and height of the canvas
element (represented by the canvas.width and canvas.height properties) to equal the width and height of the browser viewport (the area that the webpage appears on — this can be gotten from the window.innerwidth and window.innerheight properties).
CSS performance optimization - Learn web development
some
elements, including <video>, <canvas> and <iframe>, are also on their own layer.
... when an
element is promoted as a layer, also known as composited, animating transform properties is done in the gpu, resulting in improved performance, especially on mobile.
... will-change property the css will-change property tells browsers which properties of an
element are expected to change enabling browsers to set up optimizations before the
element is actually changed, improving performance by doing potentially expensive work before it is required.
... @font-face { font-family: somefont; src: url(/path/to/fonts/somefont.woff) format('woff'); font-weight: 400; font-style: normal; font-display: fallback; } the contain property the contain css property allows an author to indicate that an
element and its contents are, as much as possible, independent of the rest of the document tree.
Multimedia: Images - Learn web development
this can be done via the <picture>
element with the help of a <source>
element equipped with a type attribute.
... and finally, should you want to include animated images into your page, then know that safari allows using video files within <img> and <picture>
elements.
...that's where you would need to upgrade your <picture> and <source>
elements with media and/or sizes attributes.
... the first thing to check is that your content images use <img>
elements and your background images are defined in css with background-image — images referenced in <img>
elements are assigned a higher loading priority than background images.
Perceived performance - Learn web development
largest contentful paint (lcp) metric, definited in the largest contentful paint api, reports the render time of the largest content
element visible in the viewport.
...if some assets are going to be slower to load than others, with
elements loading after other content has already been painted to the screen, plan ahead and leave space in the layout for them so that content doesn't jump or resize, especially after the site has become interactive.
... interactive
elements are interactive make sure visible interactive
elements are always interactive and responsive.
... if input
elements are visible, the user should be able to interact with them without a lag.
Framework main features - Learn web development
the following shows a simple jsx example: const subject = "world"; const header = ( <header> <h1>hello, {subject}!</h1> </header> ); this expression represents an html <header>
element with a <h1>
element inside.
... when used with react, the jsx from the previous snippet would be compiled into this: var subject = "world"; var header = react.create
element("header", null, react.create
element("h1", null, "hello, ", subject, "!") ); when ultimately rendered by the browser, the above snippet will produce html that looks like this: <header> <h1>hello, world!</h1> </header> handlebars the handlebars templating language is not specific to ember applications, but it is heavily utilized in ember apps.
...to render this component, we would write code like this in the place where we want it rendered (which will probably be inside another component): <authorcredit src="./assets/zelda.png" alt="portrait of zelda schiff" byline="zelda schiff is editor-in-chief of the library times." /> this will ultimately render the following <figure>
element in the browser, with its structure as defined in the authorcredit component, and its content as defined in the props included on the authorcredit component call: <figure> <img src="assets/zelda.png" alt="portrait of zelda schiff" > <figcaption> zelda schiff is editor-in-chief of the library times.
... rendering
elements just as with lifecycles, frameworks take different-but-similar approaches to how they render your applications.
Working with Svelte stores - Learn web development
the problem is
elements that are dynamically added and removed from the page.
... a transition is applied with the transition:fn directive, and is triggered by an
element entering or leaving the dom as a result of a state change.
...svelte also supports specifying different transitions to apply when the
element is added or removed from the dom with the in:fn/out:fn directives, and it also allows you to define your custom css and javascript transitions.
... at the end we had a look at using the svelte transition directive to implement animations on dom
elements.
Getting started with Vue - Learn web development
installation to use vue in an existing site, you can drop one of the following <script>
elements onto a page.
...currently, this file initializes your vue application and signifies which html
element in the index.html file your app should be attached to.
...open the app.vue file, and delete the <img>
element from the template section: <img alt="vue logo" src="./assets/logo.png"> if your server is still running, you should see the logo removed from the rendered site almost instantly.
...we also need to remove the lines from inside the <script>
element that import and register the component: delete these lines now: import helloworld from './components/helloworld.vue' components: { helloworld } your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <template>.
Mozilla accessibility architecture
xul
elements are checked for support of the nsiaccessibleprovider interface, which can return an accessible.
... html
elements ask the node's primary frame for an accessible via nsiframe::getaccessible().
... nsouterdocaccessible: used for
elements such as <iframe>, <browser> and <editor>, which spawn an entire new document, but don't actually have any child nodes in their own dom.
...we need to listen to some attribute changes because they might signal the need to invalidate parts of our cache; for example, if the name or href attribute on an anchor
element changes, or the usemap attribute of an img changes.
A bird's-eye view of the Mozilla framework
javascript client example suppose the javascript service in figure 2 is getlink() in help.js, which responds to the user clicking on a link in thecontents panel within thehelp viewer window by obtaining the link from thecontents panel
elements stored in a dom tree.
... as a client, getlink() begins by obtaining the xul
element in the dom tree representing thecontents panel.
... var toctree = document.get
elementbyid("help-toc-panel"); the document object is a xuldocument, and toctree is thecontents panel xul
element.
... using the database attribute of the xul
element, getlink() obtains an nsirdfcompositedatasource, which presents the individual datasources of the xul
element as a single rdf graph.
Chrome registration
chrome is the set of user interface
elements of the application window that are outside the window's content area.
... toolbars, menu bars, progress bars, and window title bars are all examples of
elements that are typically part of the chrome.
... contentaccessible chrome resources can no longer be referenced from within <img>, <script>, or other
elements contained in, or added to, content that was loaded from an untrusted source.
... this restriction applies to both
elements defined by the untrusted source and to
elements added by trusted extensions.
Eclipse CDT
for example, in content/svg/content/src/nssvgellipse
element.cpp eclipse shows a parse error due to ns_dom_interface_map_entry_classinfo not being defined.
... this define is in nsdomclassinfoid.h, which is included via the following include chain: content/svg/content/src/nssvgellipse
element.cpp content/svg/content/src/nssvgpathgeometry
element.h content/svg/content/src/nssvggraphic
element.h content/svg/content/src/nssvgstylable
element.h content/svg/content/src/nssvg
element.h content/base/src/nsgeneric
element.h obj-debug/dist/include/nsdomclassinfoid.h in nsdomclassinfoid.h the ns_dom_interface_map_entry_classinfo define is behind an |ifdef _impl_ns_layout|.
... the properties for nssvgellipse
element.cpp show that this define was picked up by the build option discovery and set on nssvgellipse
element.cpp, but somehow it's not set for nsdomclassinfoid.h.
... however, if you right click on nsdomclassinfoid.h in the project explorer and select "index > create parser log file", the log shows "context" is set to "accessible/src/base/accevent.cpp", not "content/svg/content/src/nssvgellipse
element.cpp", and if you check the properties for accevent.cpp, indeed it is not built with the _impl_ns_layout define.
SVG Guidelines
you should avoid line breaks between every single
element or within attribute values.
... unused attributes on root <svg>
element the root <svg>
element can also host many useless attributes.
... here's an example taking into account the list below: version x="0" and y="0" enable-background (unsupported by gecko and now deprecated by the filter effects specification) id (id on root
element has no effect) xmlns:xlink attribute when there are no xlink:href attributes used throughout the file other unused xml namespace definitions xml:space when there is no text used in the file other empty tags, this may be obvious, but those are sometimes found in svgs unreferenced ids (usually on gradient stops, but also on shapes or paths) clip-rule attribute when the
element is not a descendant of a <clippath> fill-rule attribute when the
element is a descendant of a <clippath> unreferenced/unused clip paths, masks or defs (example) styling basics privilege short lowercase hex f...
...here are some commonly seen examples: style="display: none;" on <defs>
elements (a <defs>
element is hidden by default) type="text/css" on <style>
elements stroke: none or stroke-width: 0 svg grouping style grouping group similarly styled shapes under one <g> tag; this avoids having to set the same class/styles on many shapes.
Localization Use Cases
first, there is devicestoragehelper.showformatedsize (sic): function showformatedsize(
element, l10nid, size) { if (size === undefined || isnan(size)) {
element.textcontent = ''; return; } // kb - 3 kb (nearest ones), mb, gb - 1.2 mb (nearest tenth) var fixeddigits = (size < 1024 * 1024) ?
... 0 : 1; var sizeinfo = filesizeformatter.getreadablefilesize(size, fixeddigits); var _ = navigator.mozl10n.get;
element.textcontent = _(l10nid, { size: sizeinfo.size, unit: _('byteunit-' + sizeinfo.unit) }); } the function is used like so: // application storage updateappfreespace: function storage_updateappfreespace() { var self = this; this.getfreespace(this.appstorage, function(freespace) { devicestoragehelper.showformatedsize(self.appstoragedesc, 'availablesize', freespace); }); }, problem definition for all values of freespace, the following string is enough to construct a grammatically-correct sentence in english: availablesize = {{$size}} {{$unit}} available however, other languages might need to pluralize this string with different forms of the av...
... you'll notice that devicestoragehelper.showformatedsize passes a localized name of the unit to availablesize: function showformatedsize(
element, l10nid, size) { // … var _ = navigator.mozl10n.get;
element.textcontent = _(l10nid, { size: sizeinfo.size, unit: _('byteunit-' + sizeinfo.unit) }); } problem definition even though there's no need to localize the units in english at all, we still need to do it, because in other languages we might need to use localized names.
... in the javascript code, the developer needs to pass sizeinfo.unit instead of a localized value: function showformatedsize(
element, l10nid, size) { // …
element.textcontent = document.l10n.get(l10nid, { size: sizeinfo.size, unit: sizeinfo.unit }); } and then use the $unit variable verbatim in the english message: <availablesize "{{ $size }} {{ $unit }} available"> in french, the localizer can then use the value of $unit to match it against a translated abbreviation, like so: <_unitedemesure { b: "o", ...
AsyncTestUtils extended framework
to: (automatically generated single recipient) a list of recipients, where each recipient is a list whose first
element is a (display) name and second
element is an email address.
... from: (automatically generated) a list whose first
element is a (display) name and second
element is an email address.
... folderswithmsghdrs [getter] return a list where each
element is a list with two sub-
elements.
... folderswithxpcomhdrarrays [getter] same as folderswithmsghdrs but the second
element in each sub-list is an nsimutablearray instead of a js list.
PR_INSERT_AFTER
inserts an
element after another
element in a circular list.
... syntax #include <prclist.h> pr_insert_after ( prclist *elemp1 prclist *elemp2); parameters elemp1 a pointer to the
element to be inserted.
... elemp2 a pointer to the
element after which elemp1 is to be inserted.
... description pr_insert_after inserts the
element specified by elemp1 into the circular list, after the
element specified by elemp2.
PR_INSERT_BEFORE
inserts an
element before another
element in a circular list.
... syntax #include <prclist.h> pr_insert_before ( prclist *elemp1 prclist *elemp2); parameters elemp1 a pointer to the
element to be inserted.
... elemp2 a pointer to the
element before which elemp1 is to be inserted.
... description pr_insert_before inserts the
element specified by elemp1 into the circular list, before the
element specified by elemp2.
JSAPI User Guide
the spidermonkey universe in order to run any javascript code in spidermonkey, an application must have three key
elements: a jsruntime, a jscontext, and a global object.
... a minimal example each of the three key
elements described in the previous section requires a few jsapi calls: the runtime: use js_newruntime to create it and js_destroyruntime to clean it up when you're done.
... if you just need the value to remain reachable for the duration of a jsnative call, store it in *rval or an
element of the argv array.
....; break; } } return true; } defining classes this pulls together the above api
elements by defining a constructor function, a prototype object, and properties of the prototype and of the constructor, all with one api call.
JS_InitClass
ps jspropertyspec * either null or a pointer to the first
element of an array of jspropertyspecs, terminated by the null jspropertyspec, which can be written {0, 0, 0, 0, 0}.
... fs jsfunctionspec * either null or a pointer to the first
element of an array of jsfunctionspecs, terminated by js_fs_end.
...(this is the javascript equivalent of public, non-static methods in c++ or java.) static_ps jspropertyspec * either null or a pointer to the first
element of an array of jspropertyspecs, terminated by the null jspropertyspec.
...(this is the nearest javascript equivalent of public static member variables in c++ or public static fields in java.) static_fs jsfunctionspec * either null or a pointer to the first
element of an array of jsfunctionspecs, terminated by js_fs_end.
Scripting plugins - Plugins
« previousnext » xxx: dummy p
element this document describes the new cross-browser npapi extensions, commonly called npruntime, that have been developed by a group of browser and plugin vendors, including the mozilla foundation, adobe, apple, opera, and sun microsystems (see press release).
...echanism needs to return the appropriate npobject (which is created by calling npn_createobject) when the browser requests it by calling: npp_getvalue(npp, nppvpluginscriptablenpobject, ...); accessing browser objects from a plugin a plugin that wishes to access objects in the browser window that loaded the plugin can do this by getting the npobject for the browser's window object, or the dom
element that loaded the plugin.
...the extensions are two additions to the npnvariables enumeration; the new enumerations are npnvwindownpobject and npnvplugin
elementnpobject.
... the new npnvariable enumerations are defined in npapi.h as: npnvwindownpobject = 15, npnvplugin
elementnpobject = 16 how to call plugin native methods the following html code will do the job: <embed type="application/plugin-mimetype"> <script> var embed = document.embeds[0]; embed.nativemethod(); alert(embed.nativeproperty); embed.nativeproperty.anothernativemethod(); </script> the api extensions the api extensions are based on four new structs: npstring npvariant npn_relea...
Debugger.Object - Firefox Developer Tools
for example, in firefox, code in privileged compartments sees content dom
element objects without redefinitions or extensions made to that object’s properties by content code.
... (in firefox terminology, privileged code sees the
element through an “xray wrapper”.) to ensure that debugger code sees each object just as the debuggee would, each debugger.object instance presents its referent as it would be seen from a particular compartment.
... if the referent is a host function for which parameter names are not available, return an array with one
element per parameter, each of which is undefined.
... if the referent uses destructuring parameters, then the array’s
elements reflect the structure of the parameters.
Debugger.Object - Firefox Developer Tools
for example, in firefox, code in privileged compartments sees content dom
element objects without redefinitions or extensions made to that object's properties by content code.
... (in firefox terminology, privileged code sees the
element through an "xray wrapper".) to ensure that debugger code sees each object just as the debuggee would, each debugger.object instance presents its referent as it would be seen from a particular compartment.
... if the referent is a host function for which parameter names are not available, return an array with one
element per parameter, each of which is undefined.
... if the referent uses destructuring parameters, then the array's
elements reflect the structure of the parameters.
All keyboard shortcuts - Firefox Developer Tools
lbox is in a separate window and not in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 close toolbox (if the toolbox is in a separate window and in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 open web console 1 ctrl + shift + k cmd + opt + k ctrl + shift + k toggle "pick an
element from the page" (opens the toolbox and/or focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * shift + f7 open profiler shift + f5 shift + f5 * shift + f5 open network monitor 2 ctrl + shift + e cmd + opt + e ctrl + shift + e toggle responsive design mode ctrl + ...
... / ctrl + y indent tab tab tab unindent shift + tab shift + tab shift + tab move line(s) up alt + up alt + up alt + up move line(s) down alt + down alt + down alt + down comment/uncomment line(s) ctrl + / cmd + / ctrl + / page inspector command windows macos linux inspect
element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active.
... command windows macos linux select the
element under the mouse and cancel picker mode click click click select the
element under the mouse and stay in picker mode shift+click shift+click shift+click html pane these shortcuts work while you're in the inspector's html pane.
... command windows macos linux move to the previous
element in the breadcrumbs bar left arrow left arrow left arrow move to the next
element in the breadcrumbs bar right arrow right arrow right arrow focus the html pane shift + tab shift + tab shift + tab focus the css pane tab tab tab css pane these shortcuts work when you're in the inspector's css pane.
Taking screenshots - Firefox Developer Tools
you can use the developer tools to take a screenshot of the entire page, or of a single
element in the page.
...the screenshot is saved to your browser's "downloads" directory: taking a screenshot of an
element to take a screenshot of a single
element in the page, activate the context menu on that
element in the inspector's html pane, and select "screenshot node".
... --selector string a css selector that selects a single
element on the page.
... when supplied, only this
element and its descendants will be included in the screenshot.
AnalyserNode.getByteFrequencyData() - Web APIs
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.
... 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.
AnalyserNode.getByteTimeDomainData() - Web APIs
if the array has fewer
elements than the analysernode.fftsize, excess
elements are dropped.
... if it has more
elements than needed, excess
elements are ignored.
... if the array has fewer
elements than the analysernode.fftsize, excess
elements are dropped.
... if it has more
elements than needed, excess
elements are ignored.
AnalyserNode.getFloatTimeDomainData() - Web APIs
if the array has fewer
elements than the analysernode.fftsize, excess
elements are dropped.
... if it has more
elements than needed, excess
elements are ignored.
... 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.
Animation - Web APIs
animation.commitstyles() commits the end styling state of an animation to the
element being animated, even after that animation has been removed.
... it will cause the end styling state to be written to the
element being animated, in the form of properties inside a style attribute.
... automatically removing filling animations it is possible to trigger a large number of animations on the same
element.
...the related javascript features are: animation.commitstyles() for commiting the end styling state of an animation to the
element being animated, even after that animation has been removed.
BaseAudioContext.createStereoPanner() - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio>
element along with a slider <input> to increase and decrease pan value.
... in the javascript we create a media
elementaudiosourcenode and a stereopannernode, and connect the two together using the connect() method.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a media
elementaudiosourcenode // feed the htmlmedia
element into it var source = audioctx.createmedia
elementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.inner...
...html = pancontrol.value; } // connect the media
elementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'createstereopanner()' in that specification.
CanvasCaptureMediaStreamTrack.canvas - Web APIs
the canvascapturemediastreamtrack canvas read-only property returns the htmlcanvas
element from which frames are being captured.
... syntax var elt = stream.canvas; value an htmlcanvas
element indicating the canvas which is the source of the frames being captured.
... example // find the canvas
element to capture var canvaselt = document.get
elementsbytagname("canvas")[0]; // get the stream var stream = canvaselt.capturestream(25); // 25 fps // do things to the stream ...
... // obtain the canvas associated with the stream var canvas = stream.canvas; specifications specification status comment media capture from dom
elementsthe definition of 'canvascapturemediastreamtrack.canvas' in that specification.
CanvasRenderingContext2D.arcTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // tangential lines ctx.beginpath(); ctx.strokestyle = 'gray'; ctx.moveto(200, 20); ctx.lineto(200, 130); ctx.lineto(50, 20); ctx.stroke(); // arc ctx.beginpath(); ctx.strokestyle = 'black'; ctx.linewidth = 5; ctx.moveto(200, 20); ctx.arcto(200,130, 50,20, 40); ctx.stroke(); // start point ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.arc(200,...
... const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); const p0 = { x: 230, y: 20 } const p1 = { x: 90, y: 130 } const p2 = { x: 20, y: 20 } const labelpoint = function (p) { const offset = 15; ctx.filltext('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset); } ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, 50); ctx.lineto(p2.x, p2.y); labelpoint(p0); lab...
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(180, 90); ctx.arcto(180,130, 110,130, 130); ctx.lineto(110, 130); ctx.stroke(); result live demo more sophisticated demo of the method.
... html <div> <label for="radius">radius: </label> <input name="radius" type="range" id="radius" min=0 max=100 value=50> <label for="radius" id="radius-output">50</label> </div> <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); const controlout = document.get
elementbyid('radius-output'); const control = document.get
elementbyid('radius'); control.oninput = () => { controlout.textcontent = r = control.value; }; const mouse = { x: 0, y: 0 }; let r = 100; // radius const p0 = { x: 0, y: 50 }; const p1 = { x: 100, y: 100 }; const p2 = { x: 150, y: 50 }; const p3 = { x: 200, y: 100 }; const labelpoint = function (p, off...
CanvasRenderingContext2D.canvas - Web APIs
the canvasrenderingcontext2d.canvas property, part of the canvas api, is a read-only reference to the htmlcanvas
element object that is associated with a given context.
... it might be null if there is no associated <canvas>
element.
... syntax ctx.canvas; examples given this <canvas>
element: <canvas id="canvas"></canvas> ...
... you can get a reference to the canvas
element within the canvasrenderingcontext2d by using the canvas property: var canvas = document.get
elementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.canvas // htmlcanvas
element specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.canvas' in that specification.
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
the canvasrenderingcontext2d.drawfocusifneeded() method of the canvas 2d api draws a focus ring around the current or given path, if the specified
element is focused.
... syntax void ctx.drawfocusifneeded(
element); void ctx.drawfocusifneeded(path,
element); parameters
element the
element to check whether it is focused or not.
... html <canvas id="canvas"> <button id="button1">continue</button> <button id="button2">quit</button> </canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); const button1 = document.get
elementbyid('button1'); const button2 = document.get
elementbyid('button2'); document.addeventlistener('focus', redraw, true); document.addeventlistener('blur', redraw, true); canvas.addeventlistener('click', handleclick, false); redraw(); function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawbutton(button1, 20, 20); drawbutton(button2, 20, 80); ...
...const x = e.clientx - canvas.offsetleft; const y = e.clienty - canvas.offsettop; // focus button1, if appropriate drawbutton(button1, 20, 20); if (ctx.ispointinpath(x, y)) { button1.focus(); } // focus button2, if appropriate drawbutton(button2, 20, 80); if (ctx.ispointinpath(x, y)) { button2.focus(); } } function drawbutton(el, x, y) { const active = document.active
element === el; const width = 150; const height = 40; // button background ctx.fillstyle = active ?
Drawing text - Web APIs
function draw() { var ctx = document.get
elementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle.
... function draw() { var ctx = document.get
elementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.stroketext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default size.
...e 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> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textbaseline = "hanging"; ctx.stroketext("hello world", 0, 100);</textarea> var canvas = document.get
elementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.get
elementbyid('code'); var reset = document.get
elementbyid('reset'); var edit = document.get
elementbyid('edit'); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanv...
... function draw() { var ctx = document.get
elementbyid('canvas').getcontext('2d'); var text = ctx.measuretext('foo'); // textmetrics object text.width; // 16; } gecko-specific notes in gecko (the rendering engine of firefox, firefox os and other mozilla based applications), some prefixed apis were implemented in earlier versions to draw text on a canvas.
Canvas tutorial - Web APIs
<canvas> is an html
element which can be used to draw graphics via scripting (usually javascript).
... this tutorial describes how to use the <canvas>
element to draw 2d graphics, starting with the basics.
... before you start using the <canvas>
element is not very difficult, but you do need a basic understanding of html and javascript.
... the <canvas>
element is not supported in some older browsers, but is supported in recent versions of all major browsers.
ChildNode.after() - Web APIs
examples inserting an
element var parent = document.create
element("div"); var child = document.create
element("p"); parent.appendchild(child); var span = document.create
element("span"); child.after(span); console.log(parent.outerhtml); // "<div><p></p><span></span></div>" inserting text var parent = document.create
element("div"); var child = document.create
element("p"); parent.appendchild(child); child.after("text"); c...
...onsole.log(parent.outerhtml); // "<div><p></p>text</div>" inserting an
element and text var parent = document.create
element("div"); var child = document.create
element("p"); parent.appendchild(child); var span = document.create
element("span"); child.after(span, "text"); console.log(parent.outerhtml); // "<div><p></p><span></span>text</div>" childnode.after() is unscopable the after() method is not scoped into the with statement.
...argitem : document.createtextnode(string(argitem))); }); this.parentnode.insertbefore(docfrag, this.nextsibling); } }); }); })([
element.prototype, characterdata.prototype, documenttype.prototype]); another polyfill // from: https://github.com/fabiovergani/js-polyfill_
element.prototype.after/blob/master/after.js (function(x){ var o=x.prototype,p='after'; if(!o[p]){ o[p]=function(){ var e, m=arguments, l=m.length, i=0, t=this, p=t.parentnode, n=node, s=string, d=document; if(p!==null){ while(i<l){ ...
... e=m[i]; if(e instanceof n){ t=t.nextsibling; if(t!==null){ p.insertbefore(e,t); }else{ p.appendchild(e); }; }else{ p.appendchild(d.createtextnode(s(e))); }; ++i; }; }; }; }; })(
element); /* minified: (function(x){ var o=x.prototype; o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentnode,n=node,s=string,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextsibling )!==null)?p.insertbefore(e,t):p.appendchild(e)):p.appendchild(d.createtextnode(s(e)));++i;}}}); }(
element)); */ specification specification status comment domthe definition of 'childnode.after()' in that specificati...
DataTransfer.clearData() - Web APIs
html <span class="tweaked" id="source" draggable="true"> select this
element, drag it to the drop zone and then release the selection to move the
element.
...op zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html
elements var draggable = document.get
elementbyid('source'); var dropable = document.get
elementbyid('target'); var status = document.get
elementbyid('status'); var data = document.get
elementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend', dragendhandler); dropable.addeventlistene...
...r('dragover', dragoverhandler); dropable.addeventlistener('dragleave', dragleavehandler); dropable.addeventlistener('drop', drophandler); function dragstarthandler (event) { status.innerhtml = 'drag in process'; // change target
element's border to signify drag has started event.currenttarget.style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all types since we // don't give a specific type.
...event.preventdefault(); } function dragleavehandler (event) { status.innerhtml = 'drag in process (drop was available)'; event.preventdefault(); } function drophandler (event) { dropped = true; status.innerhtml = 'drop done'; event.preventdefault(); // get data linked to event format « text » var _data = event.datatransfer.getdata('text/plain'); var
element = document.get
elementbyid(_data); // append drag source
element to event's target
element event.target.appendchild(
element); // change css styles and displayed text
element.style.csstext = 'border: 1px solid black;display: block; color: red';
element.innerhtml = "i'm in the drop zone!"; } }) specifications specification status comment html livi...
DataTransfer.dropEffect - Web APIs
for example, when the user hovers over a target drop
element, the browser's cursor may indicate which type of operation will occur.
... html content <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this
element, drag it to the drop zone and then release the selection to move the
element.
...ndragover="dragover_handler(event);">drop zone</div> css content div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript content function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); // add this
element's id to the drag payload so the drop handler will // know which
element to add to its tree ev.datatransfer.setdata("text", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // get the id of the target and add...
... the moved
element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.get
elementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } specifications specification status comment html living standardthe definition of 'dropeffect' in that specification.
Document.body - Web APIs
the document.body property represents the <body> or <frameset> node of the current document, or null if no such
element exists.
... syntax const objref = document.body document.body = objref example // given this html: <body id="oldbody
element"></body> alert(document.body.id); // "oldbody
element" const anewbody
element = document.create
element("body"); anewbody
element.id = "newbody
element"; document.body = anewbody
element; alert(document.body.id); // "newbody
element" notes document.body is the
element that contains the content for the document.
... in documents with <body> contents, returns the <body>
element, and in frameset documents, this returns the outermost <frameset>
element.
... though the body property is settable, setting a new body on a document will effectively remove all the current children of the existing <body>
element.
Document.createTreeWalker() - Web APIs
typically this will be an
element owned by the document.
... nodefilter.show_
element 1 shows
element nodes.
... example the following example goes through all nodes in the body, reduces the set of nodes to
elements, simply passes through as acceptable each node (it could reduce the set in the acceptnode() method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all
elements) and push them into an array.
... var treewalker = document.createtreewalker( document.body, nodefilter.show_
element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var nodelist = []; var currentnode = treewalker.currentnode; while(currentnode) { nodelist.push(currentnode); currentnode = treewalker.nextnode(); } specifications specification status comment domthe definition of 'document.createtreewalker' in that specification.
Document.fullscreenEnabled - Web APIs
full-screen mode is available only for a page that has no windowed plug-ins in any of its documents, and if all <iframe>
elements which contain the document have their allowfullscreen attribute set.
... syntax var isfullscreenavailable = document.fullscreenenabled; value a boolean value which is true if the document and the
elements within can be placed into full-screen mode by calling
element.requestfullscreen().
... example in this example, before attempting to request full-screen mode for a <video>
element, the value of fullscreenenabled is checked, in order to avoid making the attempt when not available.
... function requestfullscreen() { if (document.fullscreenenabled) { video
element.requestfullscreen(); } else { console.log('your browser cannot use fullscreen right now'); } } specifications specification status comment fullscreen apithe definition of 'document.fullscreenenabled' in that specification.
Document: fullscreenchange event - Web APIs
bubbles yes cancelable no interface event event handler property onfullscreenchange the event is sent to the
element that is transitioning into or out of full-screen mode, and this event then bubbles up to the document.
... to find out whether the
element is entering or exiting full-screen mode, check the value of documentorshadowroot.fullscreen
element: if this value is null then the
element is exiting full-screen mode, otherwise it is entering full-screen mode.
... document.addeventlistener('fullscreenchange', (event) => { // document.fullscreen
element will point to the
element that // is in fullscreen mode if there is one.
... if (document.fullscreen
element) { console.log(`
element: ${document.fullscreen
element.id} entered full-screen mode.`); } else { console.log('leaving full-screen mode.'); } }); see
element: fullscreenchange event for another example.
Document.releaseCapture() - Web APIs
the releasecapture() method releases mouse capture if it's currently enabled on an
element within this document.
... enabling mouse capture on an
element is done by calling
element.setcapture().
... syntax document.releasecapture(); once mouse capture is released, mouse events will no longer all be directed to the
element on which capture is enabled.
... example see the example for
element.setcapture().
DocumentFragment.querySelector() - Web APIs
the documentfragment.queryselector() method returns the first
element, or null if no matches are found, within the documentfragment (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.
... if the selector matches an id and this id is erroneously used several times in the document, it returns the first matching
element.
... syntax
element = documentfragment.queryselector(selectors); parameters selectors is a domstring containing one or more css selectors separated by commas.
... examples basic example in this basic example, the first
element in the documentfragment with the class "myclass" is returned: var el = documentfragment.queryselector(".myclass"); css syntax and the method's argument the string argument pass to queryselector must follow the css syntax.
Comparison of Event Targets - Web APIs
there are five targets to consider: property defined in purpose event.target dom event interface the dom
element on the lefthand side of the call that triggered this event, eg:
element.dispatchevent(event) event.currenttarget dom event interface the eventtarget whose eventlisteners are currently being processed.
...on-standard { background-color: #902d37; } </style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event listener is being processed <small>event.currenttarget</small></td> <td class="standard">identify other
element (if any) involved in the event <small>event.relatedtarget</small></td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.explicitoriginaltarget</small> contains the target before retargetting (never contains anonymous targets)</td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.o...
... </thead> <tr> <td id="target"></td> <td id="currenttarget"></td> <td id="relatedtarget"></td> <td id="explicitoriginaltarget"></td> <td id="originaltarget"></td> </tr> </table> <p>clicking on the text will show the difference between explicitoriginaltarget, originaltarget, and target</p> <script> function handleclicks(e) { document.get
elementbyid('target').innerhtml = e.target; document.get
elementbyid('currenttarget').innerhtml = e.currenttarget; document.get
elementbyid('relatedtarget').innerhtml = e.relatedtarget; document.get
elementbyid('explicitoriginaltarget').innerhtml = e.explicitoriginaltarget; document.get
elementbyid('originaltarget').innerhtml = e.originaltarget; } function handlemouse...
...over(e) { document.get
elementbyid('target').innerhtml = e.target; document.get
elementbyid('relatedtarget').innerhtml = e.relatedtarget; } document.addeventlistener('click', handleclicks, false); document.addeventlistener('mouseover', handlemouseover, false); </script> </body> </html> use of target and relatedtarget the relatedtarget property for the mouseover event holds the node that the mouse was previously over.
EventListener - Web APIs
example html <button id="btn">click here!</button> javascript const button
element = document.get
elementbyid('btn'); // add a handler for the 'click' event by providing a callback function.
... // whenever the
element is clicked, a pop-up with "
element clicked!" will // appear.
... button
element.addeventlistener('click', function (event) { alert('
element clicked through function!'); }); // for compatibility, a non-function object with a `handleevent` property is // treated just the same as a function itself.
... button
element.addeventlistener('click', { handleevent: function (event) { alert('
element clicked through handleevent property!'); } }); result see also: addeventlistener specifications specification status comment domthe definition of 'eventlistener' in that specification.
EventTarget.removeEventListener() - Web APIs
for example, consider this call to addeventlistener():
element.addeventlistener("mousedown", handlemousedown, true); now consider each of these two calls to removeeventlistener():
element.removeeventlistener("mousedown", handlemousedown, false); // fails
element.removeeventlistener("mousedown", handlemousedown, true); // succeeds the first call fails because the value of usecapture doesn't match.
... now consider this:
element.addeventlistener("mousedown", handlemousedown, { passive: true }); here, we specify an options object in which passive is set to true, while the other options are left to the default value of false.
...
element.removeeventlistener("mousedown", handlemousedown, { passive: true }); // succeeds
element.removeeventlistener("mousedown", handlemousedown, { capture: false }); // succeeds
element.removeeventlistener("mousedown", handlemousedown, { capture: true }); // fails
element.removeeventlistener("mousedown", handlemousedown, { passive: false }); // succeeds
element.removeeventlistener("mousedown", handlemousedown, false); // succeeds
element.removeeventlistener("mousedown", handlemousedown, true); // fails it's worth noting that some browser relea...
... const body = document.queryselector('body') const clicktarget = document.get
elementbyid('click-target') const mouseovertarget = document.get
elementbyid('mouse-over-target') let toggle = false; function makebackgroundyellow() { if (toggle) { body.style.backgroundcolor = 'white'; } else { body.style.backgroundcolor = 'yellow'; } toggle = !toggle; } clicktarget.addeventlistener('click', makebackgroundyellow, false ); mouseovertarget.addev...
GlobalEventHandlers.ondblclick - Web APIs
the ondblclick property of the globaleventhandlers mixin is an eventhandler that processes dblclick events on the given
element.
... the dblclick event is raised when the user double clicks an
element.
...within the function, this will be the
element upon which the event was triggered.
... html <p>double click anywhere in this example.</p> <p id="log"></p> javascript let log = document.get
elementbyid('log'); document.ondblclick = logdoubleclick; function logdoubleclick(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; } result specifications specification status comment html living standardthe definition of 'ondblclick' in that specification.
GlobalEventHandlers.ondrag - Web APIs
syntax var draghandler = target
element.ondrag; return value draghandler the drag event handler for
element target
element.
... example this example includes the use of the ondrag attribute handler to set an
element's drag event handler.
... } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.get
elementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <!-- <div class="source"> --> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this
element, dra...
...g it to the drop zone and then release the selection to move the
element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondrag' in that specification.
GlobalEventHandlers.ondragover - Web APIs
syntax var dragoverhandler = target
element.ondragover; return value dragoverhandler the dragover event handler for
element target
element.
... example this example demonstrates using the ondragover attribute handler to set an
element's dragover event handler.
... } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.get
elementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this
element, drag it to the drop zone and then...
... release the selection to move the
element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragover' in that specification.
GlobalEventHandlers.ondragstart - Web APIs
syntax var dragstarthandler = target
element.ondragstart; return value dragstarthandler the dragstart event handler for
element target
element.
... example this example demonstrates using the ondragstart attribute handler to set an
element's dragstart event handler.
... } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.get
elementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this
element, drag it to the drop zone and then...
... release the selection to move the
element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragstart' in that specification.
GlobalEventHandlers.ondrop - Web APIs
syntax var drophandler = target
element.ondrop; return value drophandler the drop event handler for
element target
element.
... example this example demonstrates the use of the ondrop attribute to define an
element's drop event handler.
... } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.get
elementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div class="source"> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this
element, drag it to the dro...
...p zone and then release the selection to move the
element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondrop' in that specification.
GlobalEventHandlers.onerror - Web APIs
when a resource (such as an <img> or <script>) fails to load, an error event using interface event is fired at the
element that initiated the load, and the onerror() handler on the
element is invoked.
... syntax for historical reasons, different arguments are passed to window.onerror and
element.onerror handlers (as well as on error-type window.addeventlistener handlers).
...
element.onerror
element.onerror = function(event) { ...
... }
element.onerror accepts a function with a single argument of type event.
GlobalEventHandlers.onfocus - Web APIs
the onfocus property of the globaleventhandlers mixin is an eventhandler that processes focus events on the given
element.
... the focus event is raised when the user sets focus on an
element.
... for onfocus to fire on non-input
elements, they must be given the tabindex attribute (see building keyboard accessibility back in for more details).
... example this example uses onblur and onfocus to change the text within an <input>
element.
GlobalEventHandlers.onmouseout - Web APIs
the mouseout event fires when the mouse leaves an
element.
... for example, when the mouse moves off of an image in the web page, the mouseout event is raised for that image
element.
... syntax
element.onmouseout = function; example this example adds an onmouseout and an onmouseover event to a paragraph.
... try moving your mouse over and out of the
element.
GlobalEventHandlers.onpointerdown - Web APIs
this event can be sent to window, document, and
element objects.
... syntax target.onpointerdown = downhandler; var downhandler = target.onpointerdown; value a function to handle the pointerdown event for the target
element, document, or window.
... var targetbox = document.get
elementbyid("target"); targetbox.onpointerdown = handledown; function handledown(evt) { var action; switch(evt.pointertype) { case "mouse": action = "clicking"; break; case "pen": action = "tapping"; break; case "touch": action = "touching"; break; default: action = "interacting with"; break; } targetbox.innerhtml = "<strong>thanks for " + action + " me!</strong>"; evt.preventde...
... 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 text 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).
HTMLCollection - Web APIs
the htmlcollection interface represents a generic collection (array-like object similar to arguments) of
elements (in document order) and offers methods and properties for selecting from the list.
... note: this interface is called htmlcollection for historical reasons (before the modern dom, collections implementing this interface could only have html
elements as their items).
...matching by name is only done as a last resort, only in html, and only if the referenced
element supports the name attribute.
... for example, assuming there is one <form>
element in the document and its id is myform: var elem1, elem2; // document.forms is an htmlcollection elem1 = document.forms[0]; elem2 = document.forms.item(0); alert(elem1 === elem2); // shows: "true" elem1 = document.forms.myform; elem2 = document.forms.nameditem("myform"); alert(elem1 === elem2); // shows: "true" elem1 = document.forms["named.item.with.periods"]; specifications spec...
IntersectionObserver.root - Web APIs
the intersectionobserver interface's read-only root property identifies the
element or document whose bounds are treated as the bounding box of the viewport for the
element which is the observer's target.
... syntax var root = intersectionobserver.root; value a
element or document object whose bounding box is used as the bounds of the viewport for the purposes of determining how much of the target
element is visible.
... the intersection of this bounding rectangle, offset by any margins specified in the options passed to the intersectionobserver() constructor, the target
element's bounds, minus the bounds of every
element or other object which overlaps the target
element, is considered to be the visible area of the target
element.
... example this example sets the border of the intersection observer's root
element to be a 2-pixel medium green line.
IntersectionObserverEntry.boundingClientRect - Web APIs
the intersectionobserverentry interface's read-only boundingclientrect property returns a domrectreadonly which in essence describes a rectangle describing the smallest rectangle that contains the entire target
element.
... syntax var boundsrect = intersectionobserverentry.boundingclientrect; value a domrectreadonly which describes the smallest rectangle that contains every part of the target
element whose intersection change is being described.
... this value is obtained using the same algorithm as
element.getboundingclientrect(), so refer to that article for details on precisely what is done to obtain this rectangle and what is and is not included within its bounds.
... in the general case, however, it's safe to simply think of this as the bounds rectangle of the target
element.
IntersectionObserverEntry.intersectionRatio - Web APIs
the intersectionobserverentry interface's read-only intersectionratio property tells you how much of the target
element is currently visible within the root's intersection ratio, as a value between 0.0 and 1.0.
... syntax var intersectionratio = intersectionobserverentry.intersectionratio; value a number between 0.0 and 1.0 which indicates how much of the target
element is actually visible within the root's intersection rectangle.
... example in this simple example, an intersection callback sets each target
element's opacity to the intersection ratio of that
element with the root.
... function intersectioncallback(entries) { entries.foreach(function(entry) { entry.target.style.opacity = entry.intersectionratio; }); } to see a more concrete example, take a look at handling intersection changes in timing
element visibility with the intersection observer api.
IntersectionObserverEntry.intersectionRect - Web APIs
the intersectionobserverentry interface's read-only intersectionrect property is a domrectreadonly object which describes the smallest rectangle that contains the entire portion of the target
element which is currently visible within the intersection root.
... syntax var intersectionrect = intersectionobserverentry.intersectionrect; value a domrectreadonly which describes the part of the target
element that's currently visible within the root's intersection rectangle.
... example in this simple example, an intersection callback stores the intersection rectangle for later use by the code that draws the target
elements' contents, so that only the visible area is redrawn.
... function intersectioncallback(entries) { entries.foreach(function(entry) { refreshzones.push({
element: entry.target, rect: entry.intersectionrect }); }); } specifications specification status comment intersection observerthe definition of 'intersectionobserverentry.intersectionrect' in that specification.
IntersectionObserverEntry.isIntersecting - Web APIs
the intersectionobserverentry interface's read-only isintersecting property is a boolean value which is true if the target
element intersects with the intersection observer's root.
... syntax var isintersecting = intersectionobserverentry.isintersecting; value a boolean value which indicates whether the target
element has transitioned into a state of intersection (true) or out of a state of intersection (false).
... example in this simple example, an intersection callback is used to update a counter of how many targeted
elements are currently intersecting with the intersection root.
... function intersectioncallback(entries) { entries.foreach(function(entry) { if (entry.isintersecting) { intersectingcount += 1; } else { intersectingcount -= 1; } }); } to see a more concrete example, take a look at handling intersection changes in timing
element visibility with the intersection observer api.
IntersectionObserverEntry.target - Web APIs
the intersectionobserverentry interface's read-only target property indicates which targeted
element has changed its amount of intersection with the intersection root.
... syntax var target = intersectionobserverentry.target; value the intersectionobserverentry's target property specifies which
element previously targeted by calling intersectionobserver.observe() experienced a change in intersection with the root.
... example in this simple example, each targeted
element's opacity is set to its intersectionratio.
... function intersectioncallback(entries) { entries.foreach(function(entry) { entry.target.opacity = entry.intersectionratio; }); } to see a more concrete example, take a look at handling intersection changes in timing
element visibility with the intersection observer api.
KeyboardLayoutMap - Web APIs
keyboardlayoutmap.size read only returns the number of
elements in the keyboardlayoutmap object.
... methods keyboardlayoutmap.foreach() read only executes a provided function once for each
element of keyboardlayoutmap.
... keyboardlayoutmap.get() returns the
element with the given key from the keyboardlayoutmap object.
... keyboardlayoutmap.has() returns a boolean indicating whether the keyboardlayoutmap object has an
element with the specified key.
KeyframeEffect.target - Web APIs
the target property of a keyframeeffect interface represents the
element or pseudo-
element being animated.
... it may be null for animations that do not target a specific
element.
... syntax var target
element = document.get
elementbyid("
elementtoanimate"); var keyframes = new keyframeeffect( target
element, keyframeblock, timingoptions ); // returns #
elementtoanimate keyframes.target; // assigns keyframes a new target keyframes.target = newtarget
element; value an
element, csspseudo
element, or null.
... examples in the follow the white rabbit example, whiterabbit sets the target
element to be animated: var whiterabbit = document.get
elementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id="rabbit">click the rabbit's ears!</div> rabbitdownkeyframes.target; specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification.
KeyframeEffectOptions - Web APIs
the keyframeeffectoptions dictionary, part of the web animations api, is used by
element.animate(), keyframeeffectreadonly() and keyframeeffect() to describe timing properties for animation effects.
... pseudo
element optional the selector of the pseudo-
element to be targeted, if any.
... fill optional dictates whether the animation's effects should be reflected by the
element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both.
...defaults to 1, and can also take a value of infinity to make it repeat for as long as the
element exists.
LayoutShiftAttribution - Web APIs
the layoutshiftattribution interface of the layout instability api provides debugging information about
elements which have shifted.
... properties layoutshiftattribution.node returns the
element that has shifted (null if it has been removed).
... layoutshiftattribution.previousrect returns a domrect representing the position of the
element before the shift.
... layoutshiftattribution.currentrect returns a domrect representing the position of the
element after the shift.
MediaDevices.getUserMedia() - Web APIs
for example, this line in the http headers will enable use of a camera for the document and any embedded <iframe>
elements that are loaded from the same origin: feature-policy: camera 'self' this will request access to the microphone for the current origin and the specific origin https://developer.mozilla.org: feature-policy: microphone 'self' https://developer.mozilla.org if you're using getusermedia() within an <iframe>, you can request permission just for that frame, which is clearly more secure than requesti...
...the following are examples of situations in which getusermedia() is not permitted to be called: a document loaded into a sandboxed <iframe>
element cannot call getusermedia() unless the <iframe> has its sandbox attribute set to allow-same-origin.
... examples width and height this example gives a preference for camera resolution, and assigns the resulting mediastream object to a video
element.
... var front = false; document.get
elementbyid('flip-button').onclick = function() { front = !front; }; var constraints = { video: { facingmode: (front?
MediaKeyStatusMap - Web APIs
methods mediakeystatusmap.entries() read only returns a new iterator object containing an array of [key, value] for each
element in the status map, in insertion order.
... mediakeystatusmap.keys() read only returns a new iterator object containing keys for each
element in the status map, in insertion order.
... mediakeystatusmap.values() read only returns a new iterator object containing values for each
element in the status map, in insertion order.
... mediakeystatusmap.[@@iterator]() read only returns a new iterator object containing an array of [key, value] for each
element in the status map, in insertion order.
MediaSource - Web APIs
the mediasource interface of the media source extensions api represents a source of media data for an htmlmedia
element object.
... a mediasource object can be attached to a htmlmedia
element to be played in the user agent.
... mediasource.readystate read only returns an enum representing the state of the current mediasource, whether it is not currently attached to a media
element (closed), attached and ready to receive sourcebuffer objects (open), or attached but the stream has been ended via mediasource.endofstream() (ended.) mediasource.duration gets and sets the duration of the current media being presented.
... mediasource.setliveseekablerange() sets the range that the user can seek to in the media
element.
Using the Media Capabilities API - Web APIs
in short, this api replaces—and improves upon—the mediasource method istypesupported() or the htmlmedia
element method canplaytype().
...n> <option>2500</option> <option>800</option> </select> </li> </ul> <p><input type="button" value="test this video configuration" id="tryit"></p> </form> <ul id="results"></ul> javascript let mc = { videoconfiguration : new object(), tryit: function () { mc.createconfiguration(); mc.testit(); }, createconfiguration: function () { var size = document.get
elementbyid('size').value.split('x'); mc.videoconfiguration = { type: 'file', video: { contenttype: document.get
elementbyid('codec').value, width: size[0], height: size[1], bitrate: document.get
elementbyid('bitrate').value, framerate: document.get
elementbyid('framerate').value, } } }, testit: function () { let content = ''; na...
...vigator.mediacapabilities.decodinginfo(mc.videoconfiguration).then(result => { var li = document.create
element('li'), mcv = mc.videoconfiguration.video; content = 'a ' + mcv.width + 'x' + mcv.height + ', ' + mcv.contenttype + ' at ' + mcv.framerate + 'fps and ' + mcv.bitrate + ' bps video ' + (result.supported ?
...' is ' : ' is not ') + 'power efficient.'; var ul = document.get
elementbyid("results") li.innerhtml = content; ul.appendchild(li); }).catch((error) => { var li = document.create
element('li'), ul = document.get
elementbyid("results"); li.innertext = 'codec ' + mc.videoconfiguration.video.contenttype + ' threw an error: ' + error; ul.appendchild(li); }); } } document.get
elementbyid('tryit').addeventlistener('click', mc.tryit); live result ...
MutationObserver.MutationObserver() - Web APIs
example this example simply creates a new mutationobserver configured to watch a node and all of its children for additions and removals of
elements to the tree, as well as any changes to attributes on any of the
elements in the tree.
... (see mutation.addednodes and mutation.removednodes.) */ break; case 'attributes': /* an attribute value changed on the
element in mutation.target.
... const targetnode = document.queryselector("#some
element"); const observeroptions = { childlist: true, attributes: true, // omit (or set to false) to observe only changes to the parent node subtree: true } const observer = new mutationobserver(callback); observer.observe(targetnode, observeroptions); the desired subtree is located by finding an
element with the id some
element.
... from this point until disconnect() is called, callback() will be called each time an
element is added to or removed from the dom tree rooted at targetnode, or any of those
elements' attributes are changed.
Node.nodeName - Web APIs
values for the different types of nodes are: interface nodename value attr the value of attr.name cdatasection "#cdata-section" comment "#comment" document "#document" documentfragment "#document-fragment" documenttype the value of documenttype.name
element the value of
element.tagname entity the entity name entityreference the name of entity reference notation the notation name processinginstruction the value of processinginstruction.target text "#text" example given the following markup: <div id="d1">hello world</div> <input type="text" id="t"> and the following script: var...
... div1 = document.get
elementbyid("d1"); var text_field = document.get
elementbyid("t"); text_field.value = div1.nodename; in xhtml (or any other xml format), text_field's value would read "div".
... however, in html, text_field's value would read "div", because nodename and tagname return in upper case on html
elements in doms flagged as html documents.
... note that the
element.tagname property could have been used instead, since nodename has the same value as tagname for an
element.
Node.removeChild() - Web APIs
if child is actually not a child of the
element node, the method throws an exception.
... this will also happen if child was in fact a child of
element at the time of the call, but was removed by an event handler invoked in the course of trying to remove the
element (e.g., blur.) errors thrown the method throws an exception in 2 different ways: if the child was in fact a child of
element and so existing on the dom, but was removed the method throws the following exception: uncaught notfounderror: failed to execute 'removechild' on 'node': the node to be removed is not a child of this node.
... examples simple examples given this html: <div id="top"> <div id="nested"></div> </div> to remove a specified
element when knowing its parent node: let d = document.get
elementbyid("top"); let d_nested = document.get
elementbyid("nested"); let throwawaynode = d.removechild(d_nested); to remove a specified
element without having to specify its parent node: let node = document.get
elementbyid("nested"); if (node.parentnode) { node.parentnode.removechild(node); } to remove all children from an
element: let
element = document.get
elementbyid("top"); while (
element.firstchild) { el...
...ement.removechild(
element.firstchild); } causing a typeerror <!--sample html code--> <div id="top"> </div> <script type="text/javascript"> let top = document.get
elementbyid("top"); let nested = document.get
elementbyid("nested"); // throws uncaught typeerror let garbage = top.removechild(nested); </script> causing a notfounderror <!--sample html code--> <div id="top"> <div id="nested"></div> </div> <script type="text/javascript"> let top = document.get
elementbyid("top"); let nested = document.get
elementbyid("nested"); // this first call correctly removes the node let garbage = top.removechild(nested); // throws uncaught notfounderror garbage = top.removechild(nested); </script> specifications specification status comment domthe defini...
NodeList.prototype.forEach() - Web APIs
syntax somenodelist.foreach(callback[, thisarg]); parameters callback a function to execute on each
element of somenodelist.
... it accepts 3 parameters: currentvalue the current
element being processed in somenodelist.
... example let node = document.create
element("div"); let kid1 = document.create
element("p"); let kid2 = document.createtextnode("hey"); let kid3 = document.create
element("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); let list = node.childnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above code results in the following: [object htmlparagraph
element], 0, mythisarg [object text], 1, mythisar...
...g [object htmlspan
element], 2, mythisarg polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } or if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = array.prototype.foreach; } the above behavior is how many browsers actually implement nodelist.prototype.foreach() (chrome, for example).
ParentNode.prepend() - Web APIs
examples prepending an
element var parent = document.create
element("div"); var p = document.create
element("p"); var span = document.create
element("span"); parent.append(p); parent.prepend(span); console.log(parent.childnodes); // nodelist [ <span>, <p> ] prepending text var parent = document.create
element("div"); parent.append("some text"); parent.prepend("headline: "); console.log(parent.textcontent); // "headline: some...
... text" appending an
element and text var parent = document.create
element("div"); var p = document.create
element("p"); parent.prepend("some text", p); console.log(parent.childnodes); // nodelist [ #text "some text", <p> ] parentnode.prepend() is unscopable the prepend() method is not scoped into the with statement.
... var parent = document.create
element("div"); with(parent) { prepend("foo"); } // referenceerror: prepend is not defined polyfill you can polyfill the prepend() method if it's not available: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/prepend()/prepend().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('prepend')) { return; } object.defineproperty(item, 'prepend', { configurable: true, enumerable: true, writable: true, value: function prepend() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node...
...argitem : document.createtextnode(string(argitem))); }); this.insertbefore(docfrag, this.firstchild); } }); }); })([
element.prototype, document.prototype, documentfragment.prototype]); specification specification status comment domthe definition of 'parentnode.prepend()' in that specification.
PublicKeyCredentialCreationOptions.pubKeyCredParams - Web APIs
the pubkeycredparams property of the publickeycredentialcreationoptions dictionary is an array whose
elements are objects describing the desired features of the credential to be created.
... if this array contains multiple
elements, they are sorted by descending order of preference.
... syntax pubkeycredparams = publickeycredentialcreationoptions.pubkeycredparams value an array whose
elements are objects with the following properties: type a string describing type of public-key credential to be created.
... though those
elements are sorted by preference (the first
element being the most prefered), it is up to the client to choose among those
elements for building the credential.
RTCPeerConnection.addTrack() - Web APIs
otherwise, the first time ontrack is called, a new stream is created and attached to the video
element, and then the track is added to the new stream.
... peer: async opencall(pc) { const gumstream = await navigator.mediadevices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track, gumstream); } } the remote peer might then use a track event handler that looks like this: pc.ontrack = ({streams: [stream]} => videoelem.srcobject = stream; this sets the video
element's current stream to the one that contains the track that's been added to the connection.
... var mediaconstraints = { audio: true, // we want an audio track video: true // ...and we want a video track }; var desc = new rtcsessiondescription(sdp); pc.setremotedescription(desc).then(function () { return navigator.mediadevices.getusermedia(mediaconstraints); }) .then(function(stream) { preview
element.srcobject = stream; stream.gettracks().foreach(track => pc.addtrack(track, stream)); }) this code takes sdp which has been received from the remote peer and constructs a new rtcsessiondescription to pass into setremotedescription().
... if that succeeds, the resulting stream is assigned as the source for a <video>
element which is referenced by the variable preview
element.
ResizeObserverEntry.contentBoxSize - Web APIs
the contentboxsize read-only property of the resizeobserverentry interface returns an array containing the new content box size of the observed
element when the callback is run.
... syntax var mycontentboxsize = resizeobserverentry.contentboxsize; value an object containing the new content box size of the observed
element.
... this object contains two properties: blocksize the length of the observed
element's content box in the block dimension.
... inlinesize the length of the observed
element's content box in the inline dimension.
ResizeObserverEntry.contentRect - Web APIs
the contentrect read-only property of the resizeobserverentry interface returns a domrectreadonly object containing the new size of the observed
element when the callback is run.
... syntax var contentrect = resizeobserverentry.contentrect; value a domrectreadonly object containing the new size of the
element indicated by the target property.
... if the target is an html
element, the returned contentrect is the
element's content box.
... if the target is an svg
element, the returned contentrect is the svg's bounding box.
cx - Web APIs
the cx read-only property of the svgcircle
element interface reflects the cx attribute of a <circle>
element and by that defines the x-coordinate of the circleʼs center.
... syntax var xcoordinate =
element.cx; value an svganimatedlength representing the x-coordinate of the circleʼs center.
... example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cx="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.get
elementbyid('circle'); console.log(circle.cx); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircle
element.cx' in that specification.
... candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcircle
element.cx' in that specification.
cy - Web APIs
the cy read-only property of the svgcircle
element interface reflects the cy attribute of a <circle>
element and by that defines the y-coordinate of the circleʼs center.
... syntax var ycoordinate =
element.cy; value an svganimatedlength representing the y-coordinate of the circleʼs center.
... example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cy="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.get
elementbyid('circle'); console.log(circle.cy); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircle
element.cy' in that specification.
... candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcircle
element.cy' in that specification.
r - Web APIs
the r read-only property of the svgcircle
element interface reflects the r attribute of a <circle>
element and by that defines the radius of the circle.
... syntax var radius =
element.r; value an svganimatedlength representing the radius of the circle.
... example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle r="50" r="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.get
elementbyid('circle'); console.log(circle.r); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircle
element.r' in that specification.
... candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcircle
element.r' in that specification.
SVGDocument - Web APIs
svg document interface when an "svg"
element is embedded inline as a component of a document from another namespace, such as when an "svg"
element is embedded inline within an xhtml document, then an svgdocument object will not exist; instead, the root object in the document object hierarchy will be a document object of a different type, such as an htmldocument object.
... interface overview also implement none methods none properties domstring domain domstring referrer svgsvg
element root
element domstring title domstring url normative document svg 1.1 (2nd edition) properties name type description domain domstring the domain name of the server that served the document, or a null string if the server cannot be identified by a domain name.
... root
element svgsvg
element the root "svg" in the document hierarchy.
... title domstring the title of a document as specified by the "title" sub-
element of the "svg" root
element (i.e., <svg><title>here is the title</title>...</svg>) url domstring the complete uri of the document.
SVGTests - Web APIs
the svgtests interface is used to reflect conditional processing attributes and is mixed into other interfaces for
elements that support these attributes.
... properties svgtests.requiredfeatures read only an svgstringlist corresponding to the requiredfeatures attribute of the given
element.
... svgtests.requiredextensions read only an svgstringlist corresponding to the requiredextensions attribute of the given
element.
... svgtests.systemlanguage read only an svgstringlist corresponding to the systemlanguage attribute of the given
element.
SVGTransformList - Web APIs
example using multiple svgtransform objects in this example we create a function that will apply three different transformations to the svg
element that has been clicked on.
...we apply multiple transformation by appending the transform object to the svgtransformlist associated with an svg
element.
... <svg id="my-svg" viewbox="0 0 300 280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg
elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root
element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist of the
element that has been clicked on var tfmlist = evt.target.transform.baseval; // create a seperate transform object for each transform var translate = svgroot.createsvgtransform(); translate.settranslate(50,5); var rotate = svgroot.createsvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvgtransform(); scale.setscale(0...
....8,0.8); // apply the transformations by appending the svgtranform objects to the svgtransformlist associated with the
element tfmlist.appenditem(translate); tfmlist.appenditem(rotate); tfmlist.appenditem(scale); } ]]> </script> <polygon fill="orange" stroke="black" stroke-width="5" points="100,225 100,115 130,115 70,15 70,15 10,115 40,115 40,225" onclick="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="5" onclick="transformme(evt)"/> <text x="40" y="250" font-family="verdana" font-size="16" fill="green" > click on a shape to transform it </text> </svg> live preview: specifications specification status comment scalable...
ShadowRoot.host - Web APIs
the host read-only property of the shadowroot returns a reference to the dom
element the shadowroot is attached to.
... syntax const some
element = shadowroot.host value a dom
element.
... examples let customelem = document.queryselector('my-shadow-dom-
element'); let shadow = customelem.shadowroot; ...
... // return the original host
element some time later let hostelem = shadow.host; specifications specification status comment domthe definition of 'shadowroot.host' in that specification.
StereoPannerNode.pan - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio>
element along with a slider <input> to increase and decrease pan value.
... in the javascript we create a media
elementaudiosourcenode and a stereopannernode, and connect the two together using the connect() method.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a media
elementaudiosourcenode // feed the htmlmedia
element into it var source = audioctx.createmedia
elementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.inner...
...html = pancontrol.value; } // connect the media
elementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'pan' in that specification.
StereoPannerNode - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio>
element along with a slider <input> to increase and decrease pan value.
... in the javascript we create a media
elementaudiosourcenode and a stereopannernode, and connect the two together using the connect() method.
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a media
elementaudiosourcenode // feed the htmlmedia
element into it var source = audioctx.createmedia
elementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.inner...
...html = pancontrol.value; } // connect the media
elementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'stereopannernode' in that specification.
SubmitEvent.submitter - Web APIs
the read-only submitter property found on the submitevent interface specifies the submit button or other
element that was invoked to cause the form to be submitted.
... syntax let submitter = submitevent.submitter; value an
element, indicating the
element that sent the submit event to the form.
... while this is often an <input>
element whose type or a <button> whose type is submit, it could be some other
element which has initiated a submission process.
...each of the submit
elements' id is used to identify which payment processor the button corresponds to.
Text.wholeText - Web APIs
what happened was you removed the strong
element, but the removed sentence’s
element separated two text nodes.
...not separated by an
element boundary) text nodes combined.
...what we have now is this: <p>thru-hiking is great, but <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> some uses of the whole-text functionality may be better served by using node.textcontent, or the longstanding
element.innerhtml; that’s fine and probably clearer in most circumstances.
... if you have to work with mixed content within an
element, as seen here, wholetext and replacewholetext() may be useful.
TouchEvent.targetTouches - Web APIs
the targettouches read-only property is a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same target
element as the current target
element.
... syntax var touches = touchevent.targettouches; return value touches a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same target
element as the current target
element.
...the touchevent.targettouches property is a touchlist object that includes those tps that are currently touching the surface and started on the
element that is the target of the current event.
... function touches_in_target(ev) { // return true if all of the touches are within the target
element; // otherwise return false.
TrackEvent - Web APIs
the trackevent interface, which is part of the html dom specification, is used for events which represent changes to a set of available tracks on an html media
element; these events are addtrack and removetrack.
... events based on trackevent are always sent to one of the media track list types: events involving video tracks are always sent to the videotracklist found in htmlmedia
element.videotracks events involving audio tracks are always sent to the audiotracklist specified in htmlmedia
element.audiotracks events affecting text tracks are sent to the texttracklist object indicated by htmlmedia
element.texttracks.
... example this example sets up a function, handletrackevent(), which is callled for any addtrack or removetrack event on the first <video>
element found in the document.
... console.log("added a " + trackkind + " track"); break; case "removetrack": console.log("removed a " + trackkind + " track"); break; } } the event handler uses the javascript instanceof operator to determine which type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether it's being added to or removed from the
element.
UIEvent.layerX - Web APIs
this property takes scrolling of the page into account and returns a value relative to the whole of the document unless the event occurs inside a positioned
element, where the returned value is relative to the top left of the positioned
element.
...owcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned
element.
...this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned
element.
... note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent
element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent.layerY - Web APIs
this property takes scrolling of the page into account, and returns a value relative to the whole of the document, unless the event occurs inside a positioned
element, where the returned value is relative to the top left of the positioned
element.
...owcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned
element.
...this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned
element.
... note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent
element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
VideoPlaybackQuality.droppedVideoFrames - Web APIs
the read-only droppedvideoframes property of the videoplaybackquality interface returns the number of video frames which have been dropped rather than being displayed since the last time the media was loaded into the htmlvideo
element.
... syntax value = videoplaybackquality.droppedvideoframes; value an unsigned 64-bit value indicating the number of frames that have been dropped since the last time the media in the <video>
element was loaded or reloaded.
...that value is then presented in an
element for the user's reference.
... var videoelem = document.get
elementbyid("my_vid"); var percentelem = document.get
elementbyid("percent"); var quality = videoelem.getvideoplaybackquality(); var droppercent = (quality.droppedvideoframes/quality.totalvideoframes)*100; percentelem.innertext = math.trunc(droppercent).tostring(10); specifications specification status comment media playback qualitythe definition of 'videoplaybackquality.droppedvideoframes' in that specification.
WebGL2RenderingContext.texSubImage3D() - Web APIs
pixels); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, htmlimage
element?
... pixels); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, htmlcanvas
element?
... pixels); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, htmlvideo
element?
... imagebitmap, imagedata, htmlimage
element, htmlcanvas
element, htmlvideo
element.
WebGLRenderingContext.bufferData() - Web APIs
gl.
element_array_buffer: buffer used for
element indices.
... srcoffset a gluint specifying the
element index offset where to start reading the buffer.
... examples using bufferdata var canvas = document.get
elementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, 1024, gl.static_draw); getting buffer information to check the current buffer usage and buffer size, use the webglrenderingcontext.getbufferparameter() method.
... var dataarray = new float32array([1, 2, 3, 4]); var sizeinbytes = dataarray.length * dataarray.bytes_per_
element; specifications specification status comment webgl 1.0the definition of 'bufferdata' in that specification.
WebGLRenderingContext.canvas - Web APIs
the webglrenderingcontext.canvas property is a read-only reference to the htmlcanvas
element or offscreencanvas object that is associated with the context.
... it might be null if it is not associated with a <canvas>
element or an offscreencanvas object.
... syntax gl.canvas; return value either a htmlcanvas
element or offscreencanvas object or null.
... examples canvas
element given this <canvas>
element: <canvas id="canvas"></canvas> you can get back a reference to it from the webglrenderingcontext using the canvas property: var canvas = document.get
elementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.canvas; // htmlcanvas
element offscreen canvas example using the experimental offscreencanvas object.
WebGLRenderingContext.getVertexAttrib() - Web APIs
gl.vertex_attrib_array_size: returns a glint indicating the size of an
element of the vertex array.
... gl.vertex_attrib_array_stride: returns a glint indicating the number of bytes between successive
elements in the array.
... 0 means that the
elements are sequential.
... gl.current_vertex_attrib: returns a float32array (with 4
elements) representing the current value of the vertex attribute at the given index.
Canvas size and WebGL - Web APIs
« previousnext » this webgl example explores the effect of setting (or not setting) the canvas size to its
element size in css pixels, as it appears in the browser window.
... the size of the first canvas is set to the styled
element size, determined by css.
...the internal width and height properties of the canvas remain at default values, which are different than the actual size of the canvas
element in the browser window.
...oes not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.get
elementsbytagname("canvas")[0], secondcanvas = document.get
elementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = ...
WebGL tutorial - Web APIs
webgl
elements can be mixed with other html
elements and composited with other parts of the page or page background.
... this tutorial describes how to use the <canvas>
element to draw webgl graphics, starting with the basics.
... before you start using the <canvas>
element is not very difficult, but you do need a basic understanding of html and javascript.
... the <canvas>
element and webgl are not supported in some older browsers, but are supported in recent versions of all major browsers.
Web Animations API Concepts - Web APIs
while four out of five browsers supported smil, it only animated svg
elements, could not be used from css, and was very complex — often leading to inconsistent implementations.
... assembling the animation from disparate pieces we can assemble all these pieces together to create a working animation with the animation() constructor or we can use the
element.animate() shortcut function.
... (read more about how to use
element.animate() in using the web animations api.) uses the api allows for the creation of dynamic animations that can be updated on the fly as well as more straightforward, declarative animations like those css creates.
...(see animating like you just don’t care with
element.animate.) in some instances, it may negate the need for a fully fledged library entirely in the same way vanilla javascript can be used without jquery for many purposes.
Using the Web Storage API - Web APIs
for example: function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.get
elementbyid('bgcolor').value = currentcolor; document.get
elementbyid('font').value = currentfont; document.get
elementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } here, the first three lines grab the values from local storage.
... next, we set the values displayed in the form
elements to those values, so that they keep in sync when you reload the page.
... function populatestorage() { localstorage.setitem('bgcolor', document.get
elementbyid('bgcolor').value); localstorage.setitem('font', document.get
elementbyid('font').value); localstorage.setitem('image', document.get
elementbyid('image').value); setstyles(); } the populatestorage() function sets three items in local storage — the background color, font, and image path.
... we've also included an onchange handler on each form
element so that the data and styling are updated whenever a form value is changed: bgcolorform.onchange = populatestorage; fontform.onchange = populatestorage; imageform.onchange = populatestorage; responding to storage changes with the storageevent the storageevent is fired whenever a change is made to the storage object (note that this event is not fired for sessionstorage changes).
Using the aria-invalid attribute - Accessibility
this attribute can be used with any typical html form
element; it is not limited to
elements that have an aria role assigned.
... the snippet below shows a very simple validation function, which only checks for the presence of a particular character (in the real world, validation will likely be more sophisticated): function checkvalidity(aid, asearchterm, amsg){ var elem = document.get
elementbyid(aid); var invalid = (elem.value.indexof(asearchterm) < 0); if (invalid) { elem.setattribute("aria-invalid", "true"); updatealert(amsg); } else { elem.setattribute("aria-invalid", "false"); updatealert(); } } the snippet below shows the alert functions, which add (or remove) the error message: function updatealert(msg) { var oldalert = doc...
...ument.get
elementbyid("alert"); if (oldalert) { document.body.removechild(oldalert); } if (msg) { var newalert = document.create
element("div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var content = document.createtextnode(msg); newalert.appendchild(content); document.body.appendchild(newalert); } } note that the alert has the aria role attribute set to "alert." working examples: alert role example (uses the aria-invalid attribute) notes when aria-invalid is used in conjunction with the aria-required attribute, aria-invalid should not be set to true before the form is submitted - only in response to validation.
... used in aria roles all
elements of the base markup related aria techniques using the aria-required attribute using the alert role compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-invalid property wai authoring practices for forms ...
Using the aria-label attribute - Accessibility
the aria-label attribute is used to define a string that labels the current
element.
...if there is visible text labeling the
element, use aria-labelledby instead.
... this attribute can be used with any typical html
element; it is not limited to
elements that have an aria role assigned.
... used by aria roles all
elements of the base markup related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-label ...
Using the group role - Accessibility
when the role is added to an
element, the browser will send out an accessible group event to assistive technology products which can then notify the user about it.
...however, when a group is used in the context of list, authors must limit its children to listitem
elements.
... group
elements may be nested.
... possible effects on user agents and assistive technology when the group role is added to an
element, or such an
element becomes visible, the user agent should do the following: expose the
element as having a group role in the operating system's accessibility api.
Using the log role - Accessibility
the log role is used to identify an
element that creates a live region where new information is added in a meaningful order and old information may disappear.
...when this role is added to an
element, the browser will send out an accessible log event to assistive technology products which can then notify the user about it.
... possible effects on user agents and assistive technology when the log role is added to an
element, or such an
element becomes visible, the user agent should do the following: expose the
element as having a log role in the operating system's accessibility api.
... <div id="chatarea" role="log"> <ul id="chatregion" aria-live="polite" aria-atomic="false"> <li>please choose a user name to begin using ajax chat.</li> </ul> <ul id="userlistregion" aria-live="off" aria-relevant="additions removals text"> </ul> </div> working examples: http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ notes using the log role on an
element implies that
element has aria-live="polite".
x-ms-aria-flowfrom - Accessibility
the x-ms-aria-flowfrom property specifies the id of the previous
element in an alternative reading order, allowing assistive technology to override the general default of reading in document source order.
... the property serves to define
element relationships utilizing aria relationship attributes and the aria-flowto property.
... syntax x-ms-aria-flowfrom="
elementid"; value the x-ms-aria-flowfrom property value uses an id selector to define which previous
element the reading order will flow from.
... example <div tabindex="0" class="foo" id="
element2" role="option" aria-posinset="1" aria-setsize="15" aria-flowto="
element8" x-ms-aria-flowfrom="
element5"> see also aria relationship attributes microsoft api extensions ...
ARIA: img role - Accessibility
the aria img role can be used to identify multiple
elements inside page content that should be considered as a single image.
... these
elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.
... you shouldn't count on the alt text of individual
elements images for conveying context to assistive technologies; most screenreaders will consider the
element with role="img" set on it to be to be like a black box, and not access the individual
elements inside it.
... <p id="image-1">text that describes the group of images.</p> </div> svg and role="img" if you are using embedded svg images in your page, it is a good idea to set role="img" on the outer <svg>
element and give it a label.
ARIA: Suggestion role - Accessibility
this should be used on an
element that wraps an
element with an insertion role, and one with a deletion role.
...this is the job of role="suggestion", which should be set on an
element wrapping both of them like so: <p>freida’s pet is a <span role="suggestion"> <span role="deletion">black cat called luna</span> <span role="insertion">purple tyrannosaurus rex called tiny</span> </span>.
... best practices prefer html using the <ins> and <del>
element will automatically communicate a section has a role of insertion or deletion.
... if at all possible, prefer using the html
elements.
ARIA: heading role - Accessibility
the heading role defines this
element as a heading to a page or section.
... description the heading role indicates to assistive technologies that this
element should be treated like a heading.
... instead of using a <div> or <span> with a heading role and aria-level, consider using a native <h1> through <h6>
element instead to indicate that this text is a heading, and what part of the structure it represents.
... recommendation precedence order the heading role overrides the native semantic meaning of the
element it is being used for.
Operable - Accessibility
if you need to place
elements in an unusual layout, it is better to make sure the source order is sensible, then use css features like positioning to handle the layout.
...<h2>) and <label>
elements clearly describe the purpose of the content and form
elements they are supposed to be describing.
... see ui controls, meaningful text labels, the basics of headings and paragraphs, the <label>
element.
... 2.4.7 visible focus for focusable
elements (aa) when tabbing through focusable
elements such as links or form inputs, there should be a visual indicator to show you which
element currently has focus.
-moz-image-rect - CSS: Cascading Style Sheets
function rotate() { var prevstyle = window.getcomputedstyle(document.get
elementbyid("box4"), null).getpropertyvalue("background-image"); // now that we've saved the last one, start rotating for (var i=1; i<=4; i++) { var curid = "box" + i; // shift the background images var curstyle = window.getcomputedstyle(document.get
elementbyid(curid), null).getpropertyvalue("background-image"); document.get
elementbyid(curid).style.backgroundimage = prevstyle; ...
... prevstyle = curstyle; } } this uses window.getcomputedstyle() to fetch the style of each
element, shifting it to the following
element.
... notice that before it begins doing so it saves a copy of the last box's style since it will be overwritten by the third
element's style.
... by simply copying the values of the background-image property from one
element to the next with each mouse click, we achieve the desired effect.
-moz-image-region - CSS: Cascading Style Sheets
for certain xul
elements and pseudo-
elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image.
... this allows
elements to use different pieces of the same image to improve performance.
... formal definition initial valueautoapplies toxul <image>
elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-
elements.
... note: -moz-image-region only works with <image>
elements where the icon is specified using list-style-image.
-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-bottomleft css property can be used to round the bottom-left corner of an
element's outline.
... values <length> the radius of the circle defining the curvature of the bottom and left edges of the
element, specified as a css <length>.
... <percentage> the radius of the circle defining the rounding of the bottom-left corner of the
element, specified as the percentages of the bottom and left sides of the border box.
... formal definition initial value0applies toall
elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples rounding a outline since this is a firefox-only property, this example will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-bottomright css property can be used to round the bottom-right corner of an
element's outline.
... values <length> the radius of the circle defining the curvature of the bottom and right edges of the
element, specified as a css <length>.
... <percentage> the radius of the circle defining the rounding of the bottom-right corner of the
element, specified as the percentages of the bottom and right sides of the border box.
... formal definition initial value0applies toall
elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's bottom-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-bottomright: 2em; } result the example above will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-topleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-topleft css property can be used to round the top-left corner of an
element's outline.
... values <length> the radius of the circle defining the curvature of the top and left edges of the
element, specified as a css <length>.
... <percentage> the radius of the circle defining the rounding of the top-left corner of the
element, specified as the percentages of the top and left sides of the border box.
... formal definition initial value0applies toall
elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples the example below will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-topright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-topright css property can be used to round the top-right corner of an
element's outline.
... values <length> the radius of the circle defining the curvature of the top and right edges of the
element, specified as a css <length>.
... <percentage> the radius of the circle defining the rounding of the top-right corner of the
element, specified as the percentages of the top and right sides of the border box.
... formal definition initial value0applies toall
elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's top-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-topright: 2em; } result the example above will not display the desired effect if you are viewing this in a browser other than firefox.
:-moz-focusring - CSS: Cascading Style Sheets
the :-moz-focusring css pseudo-class is a mozilla extension that is similar to the :focus pseudo-class, but it only matches an
element if it's currently focused and a focus ring or other indicator should be drawn around it.
... if :-moz-focusring matches, then :focus also matches, but the converse is not always true: it depends on whether the user agent has focus ring drawing enabled and how the
element was focused.
... note: developers tend to use :-moz-focusring to differentiate between the focus state when the user focuses an
element via a mouse click versus keyboard tabbing.
... it is also potentially useful if you are creating a custom
element and you want to change its style based on its behavior.
::-webkit-progress-bar - CSS: Cascading Style Sheets
the ::-webkit-progress-bar css pseudo-
element represents the entire bar of a <progress>
element.
... normally it's only visible as the unfilled portion of the bar, since by default it's rendered below the ::-webkit-progress-value pseudo-
element.
... it is a child of the ::-webkit-progress-inner-
element pseudo-
element and the parent of the ::-webkit-progress-value pseudo-
element.
... note: for ::-webkit-progress-value to take effect, appearance needs to be set to none on the <progress>
element.
::-webkit-scrollbar - CSS: Cascading Style Sheets
the ::-webkit-scrollbar css pseudo-
element affects the style of the scrollbar of an
element.
... css scrollbar selectors you can use the following pseudo
elements to customize various parts of the scrollbar for webkit browsers: ::-webkit-scrollbar — the entire scrollbar.
... ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some
elements.
... proin at nulla
elementum, consectetur ex eget, commodo ante.
::selection - CSS: Cascading Style Sheets
the ::selection css pseudo-
element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
...(wcag defines large text as between 18.66px and 24px and bold, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 specifications specification status comment css pseudo-
elements level 4the definition of '::selection' in that specification.
... note: ::selection was in drafts of css selectors level 3, but it was removed in the candidate recommendation phase because its was under-specified (especially with nested
elements) and interoperability wasn't achieved (based on discussion in the w3c style mailing list).
... it returned in pseudo-
elements level 4.
:active - CSS: Cascading Style Sheets
the :active css pseudo-class represents an
element (such as a button) that is being activated by the user.
... /* selects any <a> that is being activated */ a:active { color: red; } the :active pseudo-class is commonly used on <a> and <button>
elements.
... other common targets of this pseudo-class include
elements that contain an activated
element, and form
elements that are being activated through their associated <label>.
...</p> css a:link { color: blue; } /* unvisited links */ a:visited { color: purple; } /* visited links */ a:hover { background: yellow; } /* hovered links */ a:active { color: red; } /* active links */ p:active { background: #eee; } /* active paragraphs */ result active form
elements html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking me or my label!</button> </form> css form :active { color: red; } form button { background: white; } result specifications specification status comment html living standardthe definition of ':active' in that specification.
:any-link - CSS: Cascading Style Sheets
the :any-link css pseudo-class selector represents an
element that acts as the source anchor of a hyperlink, independent of whether it has been visited.
... in other words, it matches every <a>, <area>, or <link>
element that has an href attribute.
... thus, it matches all
elements that match :link or :visited.
... /* selects any
element that would be matched by :link or :visited */ :any-link { color: green; } syntax :any-link examples html <a href="https://example.com">external link</a><br> <a href="#">internal target link</a><br> <a>placeholder link (won't get styled)</a> css a:any-link { border: 1px solid blue; color: orange; } /* webkit browsers */ a:-webkit-any-link { border: 1px solid blue; color: orange; } result specifications specification status comment selectors level 4the definition of ':any-link' in that specification.
:disabled - CSS: Cascading Style Sheets
the :disabled css pseudo-class represents any disabled
element.
... an
element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus.
... the
element also has an enabled state, in which it can be activated or accept focus.
...xt" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.get
elementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specifi...
:enabled - CSS: Cascading Style Sheets
the :enabled css pseudo-class represents any enabled
element.
... an
element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus.
... the
element also has a disabled state, in which it can't be activated or accept focus.
...this helps the user understand which
elements can be interacted with.
:first-of-type - CSS: Cascading Style Sheets
the :first-of-type css pseudo-class represents the first
element of its type among a group of sibling
elements.
... /* selects any <p> that is the first
element of its type among its siblings */ p:first-of-type { color: red; } note: as originally defined, the selected
element had to have a parent.
... syntax :first-of-type examples styling the first paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:first-of-type { color: red; font-style: italic; } result nested
elements this example shows how nested
elements can also be targeted.
... working draft matching
elements are not required to have a parent.
:focus-visible - CSS: Cascading Style Sheets
the :focus-visible pseudo-class applies while an
element matches the :focus pseudo-class and the ua (user agent) determines via heuristics that the focus should be made evident on the
element.
...note the difference in behavior from
elements styled with :focus.
...nly">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> input, button { margin: 10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible-only:focus-visible { outline: 4px dashed darkorange; } selectively showing the focus indicator a custom control, such as a custom
element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus.
...for users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive
elements may be confusing.
:focus - CSS: Cascading Style Sheets
the :focus css pseudo-class represents an
element (such as a form input) that has received focus.
... it is generally triggered when the user clicks or taps on an
element or selects it with the keyboard's tab key.
... /* selects any <input> when focused */ input:focus { color: red; } note: this pseudo-class applies only to the focused
element itself.
... use :focus-within if you want to select an
element that contains a focused
element.
:in-range - CSS: Cascading Style Sheets
the :in-range css pseudo-class represents an <input>
element whose current value is within the range limits specified by the min and max attributes.
... note: this pseudo-class only applies to
elements that have (and can take) a range limitation.
... in the absence of such a limitation, the
element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and 10 are valid.
... living standard defines when :in-range matches
elements in html.
:last-of-type - CSS: Cascading Style Sheets
the :last-of-type css pseudo-class represents the last
element of its type among a group of sibling
elements.
... /* selects any <p> that is the last
element of its type among its siblings */ p:last-of-type { color: lime; } note: as originally defined, the selected
element had to have a parent.
... syntax :last-of-type examples styling the last paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:last-of-type { color: red; font-style: italic; } result nested
elements this example shows how nested
elements can also be targeted.
... working draft matching
elements are not required to have a parent.
:link - CSS: Cascading Style Sheets
the :link css pseudo-class represents an
element that has not yet been visited.
... it matches every unvisited <a>, <area>, or <link>
element that has an href attribute.
... note: use :any-link to select an
element independent of whether it has been visited or not.
... recommendation lift the restriction to only apply it for <a>
element.
:nth-last-of-type() - CSS: Cascading Style Sheets
the :nth-last-of-type() css pseudo-class matches
elements of a given type, based on their position among a group of siblings, counting from the end.
... /* selects every fourth <p>
element among any group of siblings, counting backwards from the last one */ p:nth-last-of-type(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-of-type, except it counts items backwards from the end, not forwards from the beginning.
... syntax the nth-last-of-type pseudo-class is specified with a single argument, which represents the pattern for matching
elements, counting from the end.
... working draft matching
elements are not required to have a parent.
:nth-of-type() - CSS: Cascading Style Sheets
the :nth-of-type() css pseudo-class matches
elements of a given type (tag name), based on their position among a group of siblings.
... /* selects every fourth <p>
element among any group of siblings */ p:nth-of-type(4n) { color: lime; } syntax the nth-of-type pseudo-class is specified with a single argument, which represents the pattern for matching
elements.
... formal syntax :nth-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples basic example html <div> <div>this
element isn't counted.</div> <p>1st paragraph.</p> <p>2nd paragraph.</p> <div>this
element isn't counted.</div> <p>3rd paragraph.</p> <p class="fancy">4th paragraph.</p> </div> css /* odd paragraphs */ p:nth-of-type(2n+1) { color: red; } /* even paragraphs */ p:nth-of-type(2n) { color: blue; } /* first paragraph */ p:nth-of-type(1) { font-weight: bold; } /* this has no effect, as the .fancy class is only on the 4th p
element, not the 1st */ p.fancy:nth-of-type(1) { text-decoration: underline; } result specifications specification status comment selector...
... working draft matching
elements are not required to have a parent.
:only-child - CSS: Cascading Style Sheets
the :only-child css pseudo-class represents an
element without any siblings.
... /* selects each <p>, but only if it is the */ /* only child of its parent */ p:only-child { background-color: lime; } note: as originally defined, the selected
element had to have a parent.
... <div>i am an only child.</div> </div> <div> <div>i am the 1st sibling.</div> <div>i am the 2nd sibling.</div> <div>i am the 3rd sibling, <div>but this is an only child.</div></div> </div> css div:only-child { color: red; } div { display: inline-block; margin: 6px; outline: 1px solid; } result a list example html <ol> <li>first <ul> <li>this list has just one
element.</li> </ul> </li> <li>second <ul> <li>this list has three
elements.</li> <li>this list has three
elements.</li> <li>this list has three
elements.</li> </ul> </li> </ol> css li li { list-style-type: disc; } li:only-child { color: red; list-style-type: square; } result specifications specification status comment selector...
... working draft matching
elements are not required to have a parent.
:only-of-type - CSS: Cascading Style Sheets
the :only-of-type css pseudo-class represents an
element that has no siblings of the same type.
... /* selects each <p>, but only if it is the */ /* only <p>
element inside its parent */ p:only-of-type { background-color: lime; } note: as originally defined, the selected
element had to have a parent.
... syntax :only-of-type examples styling
elements with no siblings of the same type html <main> <div>i am `div` #1.</div> <p>i am the only `p` among my siblings.</p> <div>i am `div` #2.</div> <div>i am `div` #3.
... working draft matching
elements are not required to have a parent.
:out-of-range - CSS: Cascading Style Sheets
the :out-of-range css pseudo-class represents an <input>
element whose current value is outside the range limits specified by the min and max attributes.
... note: this pseudo-class only applies to
elements that have (and can take) a range limitation.
... in the absence of such a limitation, the
element can neither be "in-range" nor "out-of-range." syntax :out-of-range examples html <form action="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications ...
... living standard defines when :out-of-range matches
elements in html.
:target - CSS: Cascading Style Sheets
the :target css pseudo-class represents a unique
element (the target
element) with an id matching the url's fragment.
... /* selects an
element with an id matching the current url's fragment */ :target { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an
element called section2: http://www.example.com/index.html#section2 the following
element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
...isn't that delightful?</p> css p:target { background-color: gold; } /* add a pseudo-
element inside the target
element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic
elements within the target
element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
... this technique relies on the ability of anchor links to point to
elements that are initially hidden on the page.
Mozilla CSS extensions - CSS: Cascading Style Sheets
mozilla applications such as firefox support a number of special mozilla extensions to css, including properties, values, pseudo-
elements and pseudo-classes, at-rules, and media queries.
...some of them apply only to xul
elements.
...r-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient
elements -moz-
element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead.
... -moz-urdu overflow -moz-scrollbars-none -moz-scrollbars-horizontal -moz-scrollbars-vertical -moz-hidden-unscrollable text-align -moz-center -moz-left -moz-right text-decoration -moz-anchor-decoration -moz-user-select -moz-all -moz-none width, min-width, and max-width -moz-min-content -moz-fit-content -moz-max-content -moz-available pseudo-
elements and pseudo-classes a – d ::-moz-anonymous-block eg@:- bug 331432 ::-moz-anonymous-positioned-block :-moz-any :-moz-any-link [matches :link and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-focus-inner ::-moz-focus-outer :-moz-focusring :-moz-full-screen :-moz-full-screen-ancestor :-moz...
Pseudo-classes - CSS: Cascading Style Sheets
a css pseudo-class is a keyword added to a selector that specifies a special state of the selected
element(s).
... /* any button over which the user's pointer is hovering */ button:hover { color: blue; } pseudo-classes let you apply a style to an
element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form
elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an
element or not).
... note: in contrast to pseudo-classes, pseudo-
elements can be used to style a specific part of an
element.
... html living standard living standard defines when particular selectors match html
elements.
Type selectors - CSS: Cascading Style Sheets
the css type selector matches
elements by node name.
... in other words, it selects all
elements of the given type within a document.
... /* all <a>
elements.
... */ a { color: red; } syntax
element { style properties } examples css span { background-color: skyblue; } html <span>here's a span with some text.</span> <p>here's a p with some text.</p> <span>here's a span with more text.</span> result specifications specification status comment selectors level 4the definition of 'type (tag name) selector' in that specification.
Universal selectors - CSS: Cascading Style Sheets
the css universal selector (*) matches
elements of any type.
... /* selects all
elements */ * { color: green; } beginning with css3, the asterisk may be used in combination with namespaces: ns|* - matches all
elements in namespace ns *|* - matches all
elements |* - matches all
elements without any declared namespace syntax * { style properties } the asterisk is optional with simple selectors.
... examples css * [lang^=en] { color: green; } *.warning { color: red; } *#maincontent { border: 1px solid blue; } .floating { float: left } /* automatically clear the next sibling after a floating
element */ .floating + * { clear: left; } html <p class="warning"> <span lang="en-us">a green span</span> in a red paragraph.
... recommendation defines behavior regarding namespaces and adds hint that omitting the selector is allowed within pseudo-
elements css level 2 (revision 1)the definition of 'universal selector' in that specification.
background-blend-mode - CSS: Cascading Style Sheets
the background-blend-mode css property sets how an
element's background images should blend with each other and with the
element's background color.
... formal definition initial valuenormalapplies toall
elements.
... in svg, it applies to container
elements, graphics
elements, and graphics referencing
elements..
...on>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } document.get
elementbyid("select").onchange = function(event) { document.get
elementbyid("div").style.backgroundblendmode = document.get
elementbyid("select").selectedoptions[0].innerhtml; } console.log(document.get
elementbyid('div')); specifications specification status comment compositing and blending level 1the definition of 'background-blend-mode' in that specification.
background-position - CSS: Cascading Style Sheets
a position defines an x/y coordinate, to place an item relative to the edges of an
element's box.
... formal definition initial value0% 0%applies toall
elements.
...] ]where <length-percentage> = <length> | <percentage> examples positioning background images each of these three examples uses the background property to create a yellow, rectangular
element containing a star image.
...the third example illustrates how to specify positions for two different background images within one
element.
background-repeat - CSS: Cascading Style Sheets
by default, the repeated images are clipped to the size of the
element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
...the first and last images are pinned to either side of the
element, and whitespace is distributed evenly between the images.
... formal definition initial valuerepeatapplies toall
elements.
... candidate recommendation adds support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the space and round keywords, and for backgrounds on inline-level
elements by precisely defining the background painting area.
border-block-start-width - CSS: Cascading Style Sheets
the border-block-start-width css property defines the width of the logical block-start border of an
element, which maps to a physical border width depending on the
element's writing mode, directionality, and text orientation.
... syntax /* <'border-width'> values */ border-block-start-width: 5px; border-block-start-width: thick; related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the
element.
... initial valuemediumapplies toall
elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border.
... formal definition initial valuemediumapplies toall
elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-bottom-left-radius - CSS: Cascading Style Sheets
the border-bottom-left-radius css property rounds the bottom-left corner of an
element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-radius shorthand property that is applied to the
element after the border-bottom-left-radius css property, the value of this property is then reset to its initial value by the shorthand property.
... formal definition initial value0applies toall
elements; but user agents are not required to apply to table and inline-table
elements when border-collapse is collapse.
... the behavior on internal table
elements is undefined for the moment..
border-bottom-right-radius - CSS: Cascading Style Sheets
the border-bottom-right-radius css property rounds the top-left corner of an
element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
... note: if the value of this property is not set in a border-radius shorthand property that is applied to the
element after the border-bottom-right-radius css property, the value of this property is then reset to its initial value by the shorthand property.
... formal definition initial value0applies toall
elements; but user agents are not required to apply to table and inline-table
elements when border-collapse is collapse.
... the behavior on internal table
elements is undefined for the moment..
border-image-source - CSS: Cascading Style Sheets
the border-image-source css property sets the source image used to create an
element's border image.
... formal definition initial valuenoneapplies toall
elements, except internal table
elements when border-collapse is collapse.
... it also applies to ::first-letter.inheritednocomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <
element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<image-set()> = image-set( <image-set-option># )<
element()> =
element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>?
border-inline-end-color - CSS: Cascading Style Sheets
the border-inline-end-color css property defines the color of the logical inline-end border of an
element, which maps to a physical border color depending on the
element's writing mode, directionality, and text orientation.
... syntax border-inline-end-color: rebeccapurple; border-inline-end-color: #663399; related properties are border-block-start-color, border-block-end-color, and border-inline-start-color, which define the other border colors of the
element.
... initial valuecurrentcolorapplies toall
elementsinheritednocomputed valuecomputed coloranimation typea color values <'color'> the color of the border.
... formal definition initial valuecurrentcolorapplies toall
elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-end-color: red; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-color' in that specification.
border-inline-end-width - CSS: Cascading Style Sheets
the border-inline-end-width css property defines the width of the logical inline-end border of an
element, which maps to a physical border width depending on the
element's writing mode, directionality, and text orientation.
... syntax /* <'border-width'> values */ border-inline-end-width: 2px; border-inline-end-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-start-width, which define the other border widths of the
element.
... initial valuemediumapplies toall
elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border.
... formal definition initial valuemediumapplies toall
elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.
border-inline-end - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-inline-end-color border-inline-end-style border-inline-end-width syntax border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; the physical border to which border-inline-end maps depends on the
element's writing mode, directionality, and text orientation.
... related properties are border-block-start, border-block-end, and border-inline-start, which define the other borders of the
element.
...of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall
elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the ...
...of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall
elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the ...
border-inline-start-style - CSS: Cascading Style Sheets
the border-inline-start-style css property defines the style of the logical inline start border of an
element, which maps to a physical border style depending on the
element's writing mode, directionality, and text orientation.
... syntax /* <'border-style'> values */ border-inline-start-style: dashed; border-inline-start-style: dotted; border-inline-start-style: groove; related properties are border-block-start-style, border-block-end-style, and border-inline-end-style, which define the other border styles of the
element.
... initial valuenoneapplies toall
elementsinheritednocomputed valueas specifiedanimation typediscrete values <'border-style'> the line style of the border.
... formal definition initial valuenoneapplies toall
elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-start-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-style' in that specification.
mask-position - CSS: Cascading Style Sheets
values <position> one to four values representing a 2d position regarding the edges of the
element's box.
...note that the position can be set outside of the
element's box.
... formal definition initial valuecenterapplies toall
elements; in svg, it applies to container
elements excluding the defs
element and all graphics
elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
...p</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.get
elementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.get
elementbyid("masked").style.maskposition = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-position' in that specification.
mask-repeat - CSS: Cascading Style Sheets
e syntax: horizontal | vertical */ mask-repeat: repeat space; mask-repeat: repeat repeat; mask-repeat: round space; mask-repeat: no-repeat round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the
element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
...the first and last images are pinned to either side of the
element, and whitespace is distributed evenly between the images.
... formal definition initial valueno-repeatapplies toall
elements; in svg, it applies to container
elements excluding the defs
element and all graphics
elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; ...
...0px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.get
elementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.get
elementbyid("masked").style.maskrepeat = evt.target.value; }); result multiple mask image support you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { mask-image: url('mask1.png'), url('mask2.png'); mask-repeat: repeat-x, repeat-y; } each image is m...
mask-type - CSS: Cascading Style Sheets
the mask-type css property sets whether an svg <mask>
element is used as a luminance or an alpha mask.
... it applies to the <mask>
element itself.
... /* keyword values */ mask-type: luminance; mask-type: alpha; /* global values */ mask-type: inherit; mask-type: initial; mask-type: unset; this property may be overridden by the mask-mode property, which has the same effect but applies to the
element where the mask is used.
... formal definition initial valueluminanceapplies to<mask>
elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1"...
offset-distance - CSS: Cascading Style Sheets
the offset-distance css property specifies a position along an offset-path for an
element to be placed.
... syntax /* default value */ offset-distance: 0; /* the middle of the offset-path */ offset-distance: 50%; /* a fixed length positioned along the path */ offset-distance: 40px; <length-percentage> a length that specifies how far the
element is along the path (defined with offset-path).
... formal definition initial value0applies totransformable
elementsinheritednopercentagesrefer to the total path lengthcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples using offset-distance in an animation the motion aspect in css motion path typically comes from animating the offset-distance property.
... if you want to animate an
element along its full path, you would define its offset-path and then set up an animation that takes the offset-distance from 0% to 100%.
outline-color - CSS: Cascading Style Sheets
the outline-color css property sets the color of an
element's outline.
... description an outline is a line that is drawn around an
element, outside the border.
... unlike the
element's border, the outline is drawn outside the
element's frame, and may overlap other content.
... webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall
elementsinheritednocomputed valuefor the keyword invert, the computed value is invert.
overscroll-behavior-y - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior-y: auto; /* default */ overscroll-behavior-y: contain; overscroll-behavior-y: none; /* global values */ overscroll-behavior-y: inherit; overscroll-behavior-y: initial; overscroll-behavior-y: unset; initial valueautoapplies tonon-replaced block-level
elements and non-replaced inline-block
elementsinheritednocomputed valueas specifiedanimation typediscrete syntax the overscroll-behavior-y property is specified as a keyword chosen from the list of values below.
... contain default scroll overflow behavior is observed inside the
element this value is set on (e.g.
...underlying
elements will not scroll.
... formal definition initial valueautoapplies tonon-replaced block-level
elements and non-replaced inline-block
elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying
element from scrolling vertically .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } see overscroll-behavior for a full example and explanation.
overscroll-behavior - CSS: Cascading Style Sheets
contain default scroll overflow behavior is observed inside the
element this value is set on (e.g.
...underlying
elements will not scroll.
... formal definition initial valueautoapplies tonon-replaced block-level
elements and non-replaced inline-block
elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying
element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window.
...this can be prevented by setting overscroll-behavior: none on the <body>
element: body { margin: 0; overscroll-behavior: none; } specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior' in that specification.
padding-bottom - CSS: Cascading Style Sheets
the padding-bottom css property sets the height of the padding area on the bottom of an
element.
... an
element's padding area is the space between its content and its border.
... note: the padding property can be used to set paddings on all four sides of an
element with a single declaration.
... formal definition initial value0applies toall
elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
padding-left - CSS: Cascading Style Sheets
the padding-left css property sets the width of the padding area to the left of an
element.
... an
element's padding area is the space between its content and its border.
... note: the padding property can be used to set paddings on all four sides of an
element with a single declaration.
... formal definition initial value0applies toall
elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
padding-right - CSS: Cascading Style Sheets
the padding-right css property sets the width of the padding area on the right of an
element.
... an
element's padding area is the space between its content and its border.
... note: the padding property can be used to set paddings on all four sides of an
element with a single declaration.
... formal definition initial value0applies toall
elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
padding-top - CSS: Cascading Style Sheets
the padding-top css property sets the height of the padding area on the top of an
element.
... an
element's padding area is the space between its content and its border.
... note: the padding property can be used to set paddings on all four sides of an
element with a single declaration.
... formal definition initial value0applies toall
elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
perspective-origin - CSS: Cascading Style Sheets
the perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the
element being transformed.
...it can have one of the following values: <length-percentage> indicating the position as an absolute length value or relative to the width of the
element.
...it can have one of the following values: <length-percentage> indicating the position as an absolute length value or relative to the height of the
element.
... formal definition initial value50% 50%applies totransformable
elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
revert - CSS: Cascading Style Sheets
the revert css keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current
element.
... revert will not affect rules applied to children of an
element you reset (but will remove effects of a parent rule on a child).
... examples revert vs unset although revert and unset are similar they differ for some properties for some
elements.
... h3 { font-weight: normal; color: blue; border-bottom: 1px solid grey; } <h3>this will have custom styles</h3> <p>just some text</p> <h3 style="all: revert">this should be reverted to browser/user defaults</h3> <p>just some text</p> revert on a parent reverting effectively removes the value for the
element you select with some rule and only for that
element.
rotate - CSS: Cascading Style Sheets
syntax /* keyword values */ rotate: none; /* angle value */ rotate: 90deg; rotate: 0.25turn; rotate: 1.57rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57rad; /* vector plus angle value */ rotate: 1 1 1 90deg; values angle value an <angle> specifying the angle to rotate the affected
element through, around the z axis.
... x, y, or z axis name plus angle value the name of the axis you want to rotate the affected
element around ("x", "y", or "z"), plus an <angle> specifying the angle to rotate the
element through.
... vector plus angle value three <number>s representing an origin-centered vector that defines a line around which you want to rotate the
element, plus an <angle> specifying the angle to rotate the
element through.
... formal definition initial valuenoneapplies totransformable
elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes 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; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications ...
ruby-align - CSS: Cascading Style Sheets
the ruby-align css property defines the distribution of the different ruby
elements over the base.
... space-between is a keyword indicating that the extra space will be distributed between the
elements of the ruby.
... space-around is a keyword indicating that the extra space will be distributed between the
elements of the ruby, and around it.
... text html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: start; } result ruby aligned at the center of the base text html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: center; } result extra space distributed between ruby
elements html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: space-between; } result extra space distributed between and around ruby
elements html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: space-around; } result specifications ...
scroll-margin-inline - CSS: Cascading Style Sheets
the scroll-margin-inline shorthand property sets the scroll margins of an
element in the inline dimension.
... 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 child
elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; 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 rig...
... last of all we specify the scroll margin values, a different one for the second and third child
elements: .scroller > div:nth-child(2) { scroll-margin-inline: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline: 2rem; } this means that when scrolling past the middle child
elements, the scrolling will snap to 1rem outside the inline end edge of the second <div>, and 2rems outside the inline end edge of the third <div>.
scroll-margin - CSS: Cascading Style Sheets
the scroll-margin shorthand property sets all of the scroll margins of an
element at once, assigning values much like the margin property does for margins of an
element.
... formal definition initial value0applies toall
elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,4} 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 child
elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the...
... last of all we specify the scroll margin-values, a different one for the second and third child
elements: .scroller > div:nth-child(2) { scroll-margin: 1rem; } .scroller > div:nth-child(3) { scroll-margin: 2rem; } this means that when scrolling past the middle child
elements, the scrolling will snap to 1rem outside the left edge of the second <div>, and 2rems outside the left edge of the third <div>.
text-align - CSS: Cascading Style Sheets
the text-align css property sets the horizontal alignment of a block
element or table-cell box.
...supported by the browser.applies toblock containersinheritedyescomputed valueas specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or rightanimation typediscrete formal syntax start | end | left | right | center | justify | match-parent examples left alignment html <p class="example"> integer
elementum massa at nulla placerat varius.
...</p> css .example { text-align: left; border: solid; } result centered text html <p class="example"> integer
elementum massa at nulla placerat varius.
...</p> css .example { text-align: center; border: solid; } result justify html <p class="example"> integer
elementum massa at nulla placerat varius.
text-decoration-thickness - CSS: Cascading Style Sheets
the text-decoration-thickness css property sets the stroke thickness of the decoration line that is used on text in an
element, such as a line-through, underline, or overline.
...for a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child
elements with a different font size.
... formal definition initial valueautoapplies toall
elements.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the font size of the
element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | from-font | <length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a 5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 1px; } .thick { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 5px; } .shorthand { text-decoration: underline solid red 5px; } r...
touch-action - CSS: Cascading Style Sheets
the touch-action css property sets how an
element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).
... when a gesture is started, the browser intersects the touch-action values of the touched
element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling
element).
... this means that in practice, touch-action is typically applied only to top-level
elements which have some custom behavior, without needing to specify touch-action explicitly on any of that
element's descendants.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition initial valueautoapplies toall
elements except: non-replaced inline
elements, table rows, row groups, table columns, and column groupsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | none | [ [ pan-x | pan-left | pan-right ] | [ pan-y | pan-up | pan-down ] | pinch-zoom ] | manipulation examples disabling all gestures the most common usage is to disable all gestures on an
element (and its non-scrol...
rotate() - CSS: Cascading Style Sheets
the rotate() css function defines a transformation that rotates an
element around a fixed point on the 2d plane, without deforming it.
... the fixed point that the
element rotates around — mentioned above — is also known as the transform origin.
... this defaults to the center of the
element, but you can set your own custom transform origin using the transform-origin property.
... sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an
element, be careful about the order in which you specify your transformations.
scale() - CSS: Cascading Style Sheets
the scale() css function defines a transformation that resizes an
element on the 2d plane.
...if both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the
element is preserved (this is a homothetic transformation).
... when a coordinate value is outside the [-1, 1] range, the
element grows along that dimension; when inside, it shrinks.
...if not defined, its default value is sx, resulting in a uniform scaling that preserves the
element's aspect ratio.
scaleX() - CSS: Cascading Style Sheets
the scalex() css function defines a transformation that resizes an
element along the x-axis (horizontally).
... it modifies the abscissa of each
element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform.
... the scaling is not isotropic, and the angles of the
element are not conserved.
... syntax scalex(s) values s is a <number> representing the scaling factor to apply on the abscissa of each point of the
element.
scaleY() - CSS: Cascading Style Sheets
the scaley() css function defines a transformation that resizes an
element along the y-axis (vertically).
... it modifies the ordinate of each
element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform.
... the scaling is not isotropic, and the angles of the
element are not conserved.
... transform: rotatex(180deg); === transform: scaley(-1); syntax scaley(s) values s is a <number> representing the scaling factor to apply on the ordinate of each point of the
element.
scaleZ() - CSS: Cascading Style Sheets
the scalez() css function defines a transformation that resizes an
element along the z-axis.
... this scaling transformation modifies the z-coordinate of each
element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform.
... the scaling is not isotropic, and the angles of the
element are not conserved.
... syntax scalez(s) values s is a <number> representing the scaling factor to apply on the z-coordinate of each point of the
element.
skew() - CSS: Cascading Style Sheets
the skew() css function defines a transformation that skews an
element on the 2d plane.
... this transformation is a shear mapping (transvection) that distorts each point within an
element by a certain angle in the horizontal and vertical directions.
... skew(ax) skew(ax, ay) values ax is an <angle> representing the angle to use to distort the
element along the abscissa.
... ay is an <angle> representing the angle to use to distort the
element along the ordinate.
z-index - CSS: Cascading Style Sheets
the z-index css property sets the z-order of a positioned
element and its descendants or flex items.
... overlapping
elements with a larger z-index cover those with a smaller one.
...this means that the z-indexes of descendants are not compared to the z-indexes of
elements outside this
element.
... formal definition initial valueautoapplies topositioned
elementsinheritednocomputed valueas specifiedanimation typean integercreates stacking contextyes formal syntax auto | <integer> examples visually layering
elements html <div class="dashed-box">dashed box <span class="gold-box">gold box</span> <span class="green-box">green box</span> </div> css .dashed-box { position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; } .gold-box { position: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 2; /* put .green-box above .dashed-box */ background: lightgreen; width: 20%; left: 65%; top: -2...
Media buffering, seeking, and time ranges - Developer guides
this will work with <audio> or <video>; for now let's consider a simple audio example: <audio id="my-audio" controls src="music.mp3"> </audio> we can access these attributes like so: var myaudio = document.get
elementbyid('my-audio'); var bufferedtimeranges = myaudio.buffered; timeranges object timeranges are a series of non-overlapping ranges of time, with start and stop times.
...eturns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little bit of javascript: window.onload = function(){ var myaudio = document.get
elementbyid('my-audio'); var mycanvas = document.get
elementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // display timeranges myaudio.addeventlistener('seeked'...
...px; } #buffered-amount { display: block; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.get
elementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.get
elementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.
...length - 1 - i) / duration) * 100 + "%"; break; } } } }); myaudio.addeventlistener('timeupdate', function() { var duration = myaudio.duration; if (duration > 0) { document.get
elementbyid('progress-amount').style.width = ((myaudio.currenttime / duration)*100) + "%"; } }); } the progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.
Creating and triggering events - Developer guides
elem.addeventlistener('build', function (e) { // e.target matches elem }, false); // target can be any
element or other eventtarget.
... elem.dispatchevent(event); event bubbling it is often desirable to trigger an event from a child
element, and have an ancestor catch it; optionally, with data: <form> <textarea></textarea> </form> const form = document.queryselector('form'); const textarea = document.queryselector('textarea'); // create a new event, allow bubbling, and provide any data you want to pass to the "detail" property const eventawesome = new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } }); // the form
element listens for the custom "awesome" event and then consoles the output of the passed text() method form.addeventlistener('awesome', e => console.log(e.detail.text())); // as the user types, the textarea inside the form dispatches/triggers the event to fire, and uses i...
...tself as the starting point textarea.addeventlistener('input', e => e.target.dispatchevent(eventawesome)); creating and dispatching events dynamically
elements can listen for events that haven't been created yet: <form> <textarea></textarea> </form> const form = document.queryselector('form'); const textarea = document.queryselector('textarea'); form.addeventlistener('awesome', e => console.log(e.detail.text())); textarea.addeventlistener('input', function() { // create and dispatch/trigger an event on the fly // note: optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the
element this.dispatchevent(new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) }); triggering bu...
... function simulateclick() { const event = new mouseevent('click', { view: window, bubbles: true, cancelable: true }); const cb = document.get
elementbyid('checkbox'); const cancelled = !cb.dispatchevent(event); if (cancelled) { // a handler called preventdefault.
Mutation events - Developer guides
dom
elementnamechanged and domattributenamechanged are not supported in firefox (as of version 11), and probably in other browsers as well.
... mutation events list the following is a list of all mutation events, as defined in dom level 3 events specification: domattrmodified domattributenamechanged domcharacterdatamodified dom
elementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument domsubtreemodified mutation observers alternatives examples domnoderemovedfromdocument var isdescendant = function (desc, root) { return !!desc && (desc === root || isdescendant(desc.parentnode, root)); }; var onremove = function (
element, callback) { var observer = new mutationobserver(function (mutations) { _.foreach(mutations, function (mutation) { _.foreach(mutation.removednodes, function (removed) { ...
... if (isdescendant(
element, removed)) { callback(); // allow garbage collection observer.disconnect(); observer = undefined; } }); }); }); observer.observe(document, { childlist: true, subtree: true }); }; usage you can register a listener for mutation events using
element.addeventlistener as follows:
element.addeventlistener("domnodeinserted", function (event) { // ...
... }, false); the event object is passed to the listener in a mutationevent (see its definition in the specification) for most events, and mutationnameevent for domattributenamechanged and dom
elementnamechanged.
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, rotatex and rotatey values.
... there are however two corrections that should be applied to those values: the initial alpha value is 180 (device 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 rotatex and then rotatey.
... here's a simple code snippet to sum it up: var elem = document.get
elementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + 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.get
elementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + 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 matrix ...
Writing forward-compatible websites - Developer guides
javascript prefix all global variable access in onfoo attributes with “window.” when an event handler content attribute (onclick, onmouseover, and so forth) is used on html
element, all name lookup in the attribute first happens on the
element itself, then on the
element's form if the
element is a form control, then on the document, and then on the window (where the global variables you have defined are).
... what this means is that any time you access a global variable in an event handler content attribute, including calling any function declared globally, you can end up with a name collision if a specification adds a new dom property to
elements or documents which has the same name as your function or variable, and a browser implements it.
...or, conversely, that they don't have support for some other feature (e.g., don't assume that a browser that supports onload on script
elements will never support onreadystatechange on them).
... a good example, for a browser vendor using the -vnd css prefix that has shipped an unprefixed implementation of the make-it-pretty property, with a behavior for the value "sometimes" that differs from the prefixed version: <style> .pretty-
element { -vnd-make-it-pretty: sometimes; make-it-pretty: sometimes; } </style> the order of the declarations in the rule above is important: the unprefixed one needs to come last.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
the html autocomplete attribute is available on <input>
elements that take a text or numeric value as input, <textarea>
elements, <select>
elements, and <form>
elements.
... if an <input>, <select> or <textarea>
element has no autocomplete attribute, then browsers use the autocomplete attribute of the
element's form owner, which is either the <form>
element that the
element is a descendant of, or the <form> whose id is specified by the form attribute of the
element.
... in order to provide autocompletion, user-agents might require <input>/<select>/<textarea>
elements to: have a name and/or id attribute be descendants of a <form>
element the form to have a submit button values "off" the browser is not permitted to automatically enter or select a value for this field.
... note: the autocomplete attribute also controls whether firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input>
element, <textarea>
element, or entire <form> across page loads.
HTML attribute: min - HTML: Hypertext Markup Language
if the value of the
element is less than this, the
element fails constraint validation.
... valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, and the <meter>
element, the min attribute is a number that specifies the most negative value a form control to be considered valid.
... for the <meter>
element, the min attribute defines the lower numeric bound of the measured range.
... syntax for min values for other
elements input type syntax example <meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter> impact on step the value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0.
HTML attribute: required - HTML: Hypertext Markup Language
the required attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input> types along with the <select> and <textarea> form control
elements.
... if present on any of these input types and
elements, the :required pseudo class will match.
... note: setting aria-required="true" tells a screen reader that an
element (any
element) is required, but has no bearing on the optionality of the
element.
... constraint validation if the
element is required and the
element's value is the empty string, then the
element is suffering from valuemissing and the
element will match the :invalid pseudo class.
<frameset> - HTML: Hypertext Markup Language
the html <frameset>
element is used to contain <frame>
elements.
... note: because the use of frames is now discouraged in favor of using <iframe>, this
element is not typically used by modern web sites.
... attributes like all other html
elements, this
element supports the global attributes.
... example <frameset cols="50%,50%"> <frame src="https://udn.realityripple.com/docs/web/html/
element/frameset" /> <frame src="https://udn.realityripple.com/docs/web/html/
element/frame" /> </frameset> ...
<legend> - HTML: Hypertext Markup Language
the html <legend>
element represents a caption for the content of its parent <fieldset>.
... permitted content phrasing content and headings (h1–h6
elements).
... permitted parents a <fieldset> whose first child is this <legend>
element implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmllegend
element attributes this
element only includes the global attributes.
... living standard definition of the legend
element html5the definition of '<legend>' in that specification.
Standard metadata names - HTML: Hypertext Markup Language
the <meta>
element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.
...it is different from the <title>
element, which usually contain the application name, but may also contain information like the document name or a status.
... for example, to indicate that a document prefers dark mode but does render functionally in light mode as well: <meta name="color-scheme" content="dark light"> this works at the document level in the same way that the css color-scheme property lets individual
elements specify their preferred and accepted color schemes.
...if there are more than one, several <meta>
elements should be used.
contenteditable - HTML: Hypertext Markup Language
the contenteditable global attribute is an enumerated attribute indicating if the
element should be editable by the user.
... the attribute must take one of the following values: true or an empty string, which indicates that the
element is editable.
... false, which indicates that the
element is not editable.
... if this attribute is missing or its value is invalid, its value is inherited from its parent
element: so the
element is editable if its parent is editable.
draggable - HTML: Hypertext Markup Language
the draggable global attribute is an enumerated attribute that indicates whether the
element can be dragged, either with native browser behavior or the html drag and drop api.
... draggable can have the following values: true: the
element can be dragged.
... false: the
element cannot be dragged.
...for other
elements, the event ondragstart must be set for drag and drop to work, as shown in this comprehensive example.
is - HTML: Hypertext Markup Language
the is global attribute allows you to specify that a standard html
element should behave like a defined custom built-in
element (see using custom
elements for more details).
... this attribute can only be used if the specified custom
element name has been successfully defined in the current document, and extends the
element type it is being applied to.
... // create a class for the
element class wordcount extends htmlparagraph
element { constructor() { // always call super first in constructor super(); // constructor contents ommitted for brevity ...
... } } // define the new
element custom
elements.define('word-count', wordcount, { extends: 'p' }); <p is="word-count"></p> specifications specification status comment html living standardthe definition of 'is' in that specification.
x-ms-acceleratorkey - HTML: Hypertext Markup Language
the x-ms-acceleratorkey attribute accessibly declares that an accelerator key has been assigned to an
element: the
element is activated via javascript when the key(s) are pressed on a keyboard.
... x-ms-acceleratorkey exposes a notification in the accessibility tree, for screen readers and other assistive technologies, that an accelerator key exists for that
element.
...you must provide javascript event handlers, like onkeypress, onkeydown, or onkeyup, to listen for your declared accelerator keys and activate the
element accordingly.
... to provide a keyboard shortcut for an
element that does not need javascript, use the accesskey attribute.
MIME types (IANA media types) - HTTP
specifically if they download a text/plain file from a <link>
element declaring a css file, they will not recognize it as a valid css file if presented with text/plain.
... note: use application/xml or application/xhtml+xml if you want xml’s strict parsing rules, <![cdata[…]]> sections, or
elements that aren't from html/svg/mathml namespaces.
... audio and video types as is the case for images, html doesn't mandate that web browsers support any specific file and codec types for the <audio> and <video>
elements, so it's important to consider your target audience and the range of browsers (and versions of those browsers) they may be using when choosing the file type and codecs to use for media.
...only resources with the correct mime type will be played in <video> or <audio>
elements.
CSP: media-src - HTTP
the http content-security-policy (csp) media-src directive specifies valid sources for loading media using the <audio> and <video>
elements.
...if you only need to allow inline event handlers and not inline <script>
elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script>
elements, javascript: urls, inline event handlers, and inline <style>
elements.
... examples violation cases given this csp header: content-security-policy: media-src https://example.com/ the following <audio>, <video> and <track>
elements are blocked and won't load: <audio src="https://not-example.com/audio"></audio> <video src="https://not-example.com/video"> <track kind="subtitles" src="https://not-example.com/subtitles"> </video> specifications specification status comment content security policy level 3the definition of 'media-src' in that specification.
CSP: style-src - HTTP
if you only need to allow inline event handlers and not inline <script>
elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script>
elements, javascript: urls, inline event handlers, and inline <style>
elements.
...el=stylesheet inline style attributes are also blocked: <div style="display:none">foo</div> as well as styles that are applied in javascript by setting the style attribute directly, or by setting csstext: document.queryselector('div').setattribute('style', 'display:none;'); document.queryselector('div').style.csstext = 'display:none;'; however, styles properties that are set directly on the
element's style property will not be blocked, allowing users to safely manipulate styles via javascript: document.queryselector('div').style.display = 'none'; these types of manipulations can be prevented by disallowing javascript via the script-src csp directive.
... content-security-policy: style-src 'unsafe-inline'; the above content security policy will allow inline styles like the <style>
element, and the style attribute on any
element: <style> #inline-style { background: red; } </style> <div style="display:none">foo</div> you can use a nonce-source to only allow specific inline style blocks: content-security-policy: style-src 'nonce-2726c7f26c' you will have to set the same nonce on the <style>
element: <style nonce="2726c7f26c"> #inline-style { background: red; } </style> altern...
Feature-Policy: fullscreen - HTTP
the http feature-policy header fullscreen directive controls whether the current document is allowed to use
element.requestfullscreen().
...via the allow attribute) and the allowfullscreen attribute are present on an <iframe>
element, this directive takes precedence.
...it can do so by delivering the following http response header to define a feature policy: feature-policy: fullscreen 'self' https://example.com with an <iframe>
element fastcorp inc.
...it can do so by delivering the following http response header to define a feature policy: feature-policy: fullscreen 'self' then include an allow attribute on the <iframe>
element: <iframe src="https://other.com/videoplayer" allow="fullscreen"></iframe> iframe attributes can selectively enable features in certain frames, and not in others, even if those frames contain documents from the same origin.
Redirections in HTTP - HTTP
there are two others: html redirections with the <meta>
element javascript redirections via the dom html redirections http redirects are the best way to create redirections, but sometimes you don't have control over the server.
... in that case, try a <meta>
element with its http-equiv attribute set to refresh in the <head> of the page.
... when possible, use http redirects and don't add <meta>
element redirects.
...lock for the content you want to redirect: server { listen 80; server_name example.com; return 301 $scheme://www.example.com$request_uri; } to apply a redirect to a directory or only certain pages, use the rewrite directive: rewrite ^/images/(.*)$ https://images.example.com/$1 redirect; rewrite ^/images/(.*)$ https://images.example.com/$1 permanent; iis in iis, you use the <httpredirect>
element to configure redirections.
CSS Houdini
houdini's css typed om is a css object model with types and methods, exposing values as javascript objects making for more intuitive css manipulation than previous string based html
element.style manipulations.
... every
element and style sheet rule has a style map which is accessible via its stylepropertymap.
...the worklet also has access to the
element's custom properties: they don't need to be passed as function arguments.
... css painting api developed to improve the extensibility of css — allows developers to write javascript functions that can draw directly into an
element's background, border, or content via the paint() css function.
Array.from() - JavaScript
mapfn optional map function to call on every
element of the array.
... description array.from() lets you create arrays from: array-like objects (objects with a length property and indexed
elements); or iterable objects (objects such as map and set).
... array.from() has an optional parameter mapfn, which allows you to execute a map() function on each
element of the array being created.
...// [[1, 2], [2, 4], [4, 8]] const mapper = new map([['1', 'a'], ['2', 'b']]); array.from(mapper.values()); // ['a', 'b']; array.from(mapper.keys()); // ['1', '2']; array from an array-like object (arguments) function f() { return array.from(arguments); } f(1, 2, 3); // [ 1, 2, 3 ] using arrow functions and array.from() // using an arrow function as the map function to // manipulate the
elements array.from([1, 2, 3], x => x + x); // [2, 4, 6] // generate a sequence of numbers // since the array is initialized with `undefined` on each position, // the value of `v` below will be `undefined` array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4] sequence generator (range) // sequence generator function (commonly referred to as "range", e.g.
Array.prototype.length - JavaScript
the length property of an object which is an instance of type array sets or returns the number of
elements in that array.
...when you extend an array by changing its length property, the number of actual
elements increases; for example, if you set length to 3 when it is currently 2, the array now contains 3
elements, which causes the third
element to be a non-iterable empty slot.
...console.log(arr); // [ 1, 2, <3 empty items> ] arr.foreach(
element => console.log(
element)); // 1 // 2 as you can see, the length property does not necessarily indicate the number of defined values in the array.
...the value in each
element is then doubled.
Array.prototype.reverse() - JavaScript
the first array
element becomes the last, and the last array
element becomes the first.
... description the reverse method transposes the
elements of the calling array object in place, mutating the array, and returning a reference to the array.
... examples reversing the
elements in an array the following example creates an array a, containing three
elements, then reverses the array.
... const a = [1, 2, 3]; console.log(a); // [1, 2, 3] a.reverse(); console.log(a); // [3, 2, 1] reversing the
elements in an array-like object the following example creates an array-like object a, containing three
elements and a length property, then reverses the array-like object.
Function.prototype.apply() - JavaScript
examples using apply to append an array to another you can use push to append an
element to an array.
... and, because push accepts a variable number of arguments, you can also push multiple
elements at once.
... but, if you pass an array to push, it will actually add that array as a single
element, instead of adding the
elements individually.
... const array = ['a', 'b']; const
elements = [0, 1, 2]; array.push.apply(array,
elements); console.info(array); // ["a", "b", 0, 1, 2] using apply and built-in functions clever usage of apply allows you to use built-in functions for some tasks that would probably have otherwise been written by looping over the array values.
Map.prototype.delete() - JavaScript
the delete() method removes the specified
element from a map object by key.
... syntax mymap.delete(key); parameters key the key of the
element to remove from the map object.
... return value true if an
element in the map object existed and has been removed, or false if the
element does not exist.
...the "bar"
element is no longer present.
Map.prototype.set() - JavaScript
the set() method adds or updates an
element with a specified key and a value to a map object.
... syntax mymap.set(key, value) parameters key the key of the
element to add to the map object.
... value the value of the
element to add to the map object.
... examples using set() let mymap = new map() // add new
elements to the map mymap.set('bar', 'foo') mymap.set(1, 'foobar') // update an
element in the map mymap.set('bar', 'baz') using the set() with chaining since the set() method returns back the same map object, you can chain the method call like below: // add new
elements to the map with chaining.
Set.prototype.forEach() - JavaScript
syntax myset.foreach(callback[, thisarg]) parameters callback function to execute for each
element, taking three arguments: currentvalue, currentkey the current
element being processed in the set.
... callback is invoked with three arguments: the
element value the
element key the set object being traversed there are no keys in set objects, however, so the first two arguments are both values contained in the set.
... foreach() executes the callback function once for each
element in the set object; it does not return a value.
... examples logging the contents of a set object the following code logs a line for each
element in a set object: function logset
elements(value1, value2, set) { console.log('s[' + value1 + '] = ' + value2); } new set(['foo', 'bar', undefined]).foreach(logset
elements); // logs: // "s[foo] = foo" // "s[bar] = bar" // "s[undefined] = undefined" specifications specification ecmascript (ecma-262)the definition of 'set.prototype.foreach' in that specification.
SharedArrayBuffer.prototype.slice() - JavaScript
slice(-2) extracts the last two
elements in the sequence.
... for example, slice(1,4) extracts the second
element through the fourth
element (
elements indexed 1, 2, and 3).
...slice(2,-1) extracts the third
element through the second-to-last
element in the sequence.
... return value a new sharedarraybuffer containing the extracted
elements.
String.prototype.big() - JavaScript
the big() method creates a <big> html
element that causes a string to be displayed in a big font.
... usage note: the <big>
element has been removed in html5 and shouldn't be used anymore.
... syntax str.big() return value a string containing a <big> html
element.
... examples using big() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <fontsize=7>hello, world</fontsize> with the
element.style object you can get the
element's style attribute and manipulate it more generically, for example: document.get
elementbyid('yourelemid').style.fontsize = '2em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.big' in that specification.
String.prototype.codePointAt() - JavaScript
syntax str.codepointat(pos) parameters pos position of an
element in str to return the code point value from.
...if there is no
element at pos, returns undefined.
... description if there is no
element at the specified position, undefined is returned.
...https://mths.be/codepointat v0.2.0 by @mathias */ if (!string.prototype.codepointat) { (function() { 'use strict'; // needed to support `apply`/`call` with `undefined`/`null` var defineproperty = (function() { // ie 8 only supports `object.defineproperty` on dom
elements try { var object = {}; var $defineproperty = object.defineproperty; var result = $defineproperty(object, object, object) && $defineproperty; } catch(error) {} return result; }()); var codepointat = function(position) { if (this == null) { throw typeerror(); } var string = string(this); var size = string.length; ...
String.prototype.fontcolor() - JavaScript
the fontcolor() method creates a <font> html
element that causes a string to be displayed in the specified font color.
... usage note: the <font>
element has been removed in html5 and shouldn't be used anymore.
... return value a string containing a <font> html
element.
... var worldstring = 'hello, world'; console.log(worldstring.fontcolor('red') + ' is red in this line'); // '<font color="red">hello, world</font> is red in this line' console.log(worldstring.fontcolor('ff00') + ' is red in hexadecimal in this line'); // '<font color="ff00">hello, world</font> is red in hexadecimal in this line' with the
element.style object you can get the
element's style attribute and manipulate it more generically, for example: document.get
elementbyid('yourelemid').style.color = 'red'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.fontcolor' in that specification.
String.prototype.fontsize() - JavaScript
the fontsize() method creates a <font> html
element that causes a string to be displayed in the specified font size.
... usage note: the <font>
element has been removed in html5 and shouldn't be used anymore.
... return value a string containing a <font> html
element.
... examples using fontsize() the following example uses string methods to change the size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <font size="7">hello, world</fontsize> with the
element.style object you can get the
element's style attribute and manipulate it more generically, for example: document.get
elementbyid('yourelemid').style.fontsize = '0.7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.fontsize' in that specification.
Mobile first - Progressive web apps (PWAs)
display: table-caption makes the <nav>
element think it's the caption of the table, and caption-side: bottom makes it jump down to the bottom of the table.
... one word of warning about this technique though - positioning doesn't work as expected on
elements with display: table set on them.
...ure both of these were not direct children of the <article>, otherwise the following would not work: #bottom, #top { font-size: 0.8em; position:absolute; right: 1em; text-decoration: none; } #top { color: white; top: 0.5em; } #bottom { bottom: 0.5em; } i also set their parents to be positioned relatively, so they would become the positioning contexts of the absolutely positioned
elements (you don't want them to be positioned relative to the <body>
element.) adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than about 480px.
...modernizr stores the results of all its feature tests as classes on the html
element.
SVG Event Attributes - SVG: Scalable Vector Graphics
they specifies some script to run when the event of the given type is dispatched to the
element on which the attributes are specified.
... the global event attributes are available on all svg
elements.
... other event attributes are available on a case by case basis for each
elements.
... attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload document
element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked,...
attributeType - SVG: Scalable Vector Graphics
four
elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto animatable no css this value specifies that the value of attributename is the name of a css property defined as animatable.
... xml this value specifies that the value of attributename is the name of an xml attribute defined as animatable in the default xml namespace for the target
element.
... auto this value specifies that the implementation should match the attributename to an attribute for the target
element.
... user agents first search through the list of css properties for a matching property name, and if none is found, search the default xml namespace for the
element.
baseline-shift - SVG: Scalable Vector Graphics
the baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content
element.
... as a presentation attribute, it can be applied to any
element but it has effect only on the following four
elements: <altglyph>, <textpath>, <tref>, and <tspan> usage notes value <length-percentage> | sub | super default value 0 animatable yes sub the dominant-baseline is shifted to the default position for subscripts.
... <length-percentage> a length value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content
element by the specified length.
... a percentage value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content
element by the specified percentage of the line-height.
class - SVG: Scalable Vector Graphics
« svg attribute reference home assigns a class name or set of class names to an
element.
... you may assign the same class name or names to any number of
elements, however, multiple class names must be separated by whitespace characters.
... an
element's class name serves two key roles: as a style sheet selector, for when an author assigns style information to a set of
elements.
... #00cc00; } circle.circleclass { stroke: #006600; fill: #cc0000; } ]]> </style> <rect class="rectclass" x="10" y="10" width="100" height="100"/> <circle class="circleclass" cx="40" cy="50" r="26"/> </svg> </body> </html>
elements the following
elements can use the class attribute: <a> <altglyph> <circle> <clippath> <defs> <desc> <ellipse> <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <feflood> <fegaussianblur> <feimage> <femerge> <femorphology> <feoffset> <fespecularlighting> <fetile> <feturbulence> <filter> <font> <f...
color-interpolation - SVG: Scalable Vector Graphics
when a child
element is blended into a background, the value of the color-interpolation property on the child determines the type of blending, not the value of the color-interpolation on the parent.
... for gradients which make use of the href or the deprecated xlink:href attribute to reference another gradient, the gradient uses the propertyʼs value from the gradient
element which is directly referenced by the fill or stroke property.
... when animating colors, color interpolation is performed according to the value of the color-interpolation property on the
element being animated.
... as a presentation attribute, it can be applied to any
element but it only has an effect on the following 29
elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> usage notes value auto | srgb | linearrgb default value srgb animatable yes auto indicates that the user agent can choose either the srgb or linearrgb spaces for color interpolation.
dur - SVG: Scalable Vector Graphics
five
elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value specifies...
...this is only valid for
elements that define media.
... (for animation
elements the attribute will be ignored if media is specified.) indefinite this value specifies the simple duration as indefinite.
... note: the interpolation will not work if the simple duration is indefinite (although this may still be useful for <set>
elements).
dx - SVG: Scalable Vector Graphics
the dx attribute indicates a shift along the x-axis on the position of an
element or its content.
... seven
elements are using this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- some reference text --> <text x="10%" y="50%" fill="grey">svg</text> <!-- the same text with a shift along the x-axis --> <text dx="50%" x="10%" y="50%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
...the unit used to resolve the value of the attribute is set by the primitiveunits attribute of the <filter>
element.
...the unit used to resolve the value of the attribute is set by the primitiveunits attribute of the <filter>
element.
dy - SVG: Scalable Vector Graphics
the dy attribute indicates a shift along the y-axis on the position of an
element or its content.
... seven
elements utilize this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="0" x2="100%" y1="30%" y2="30%" /> <line x1="0" x2="100%" y1="80%" y2="80%" /> <!-- some reference text --> <text x="10%" y="30%" fill="grey">svg</text> <!-- the same text with a shift along the y-axis --> <text dy="50%" x="10%" y="30%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
...the unit used to resolve the value of the attribute is set by the primitiveunits attribute of the <filter>
element.
...the unit used to resolve the value of the attribute is set by the primitiveunits attribute of the <filter>
element.
marker-end - SVG: Scalable Vector Graphics
for all shape
elements, except <polyline> and <path>, the last vertex is the same as the first vertex.
...for <path>
elements, for each closed subpath, the last vertex is the same as the first vertex.
... as a presentation attribute, it can be applied to any
element but it has effect only on the following seven
elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-end="url(#trian...
... <marker-ref> this value is a reference to a <marker>
element, which will be drawn at the final vertex.
marker-start - SVG: Scalable Vector Graphics
for all shape
elements, except <polyline> and <path>, the last vertex is the same as the first vertex.
...for <path>
elements, for each closed subpath, the last vertex is the same as the first vertex.
... as a presentation attribute, it can be applied to any
element but it has effect only on the following seven
elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-start="url(...
... <marker-ref> this value is a reference to a <marker>
element, which will be drawn at the first vertex.
maskUnits - SVG: Scalable Vector Graphics
the maskunits attribute indicates which coordinate system to use for the geometry properties of the <mask>
element.
... only one
element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskunits="userspaceonuse" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskunits="objectboundingbox" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r3" x="55" y="55" wi...
...f="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskunits defines the coordinate system in use for the geometry attributes (x, y, width and height) of the
element.
... objectboundingbox this value indicates that all coordinates for the geometry attributes represent fractions or percentages of the bounding box of the
element to which the mask is applied.
patternUnits - SVG: Scalable Vector Graphics
the patternunits attribute indicates which coordinate system to use for the geometry properties of the <pattern>
element.
... only one
element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- all geometry properties are relative to the current user space --> <pattern id="p1" x="12.5" y="12.5" width="25" height="25" patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all geometry properties are relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" ...
...width="80" height="80" fill="url(#p2)" /> </svg> pattern for <pattern>, patternunits defines the coordinate system in use for the geometry properties (x, y, width and height) of the
element.
... objectboundingbox this value indicates that all coordinates for the geometry properties represent fractions or percentages of the bounding box of the
element to which the mask is applied.
refX - SVG: Scalable Vector Graphics
the refx attribute defines the x coordinate of an
element’s reference point.
... two
elements are using this attribute: <marker> and <symbol> marker for <marker>, refx defines the x coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the shape.
... symbol for <symbol>, refx defines the x coordinate of the symbol, which is defined by the cumulative effect of the x attribute and any transformations on the <symbol> and its host <use>
element.
... for backwards compatibility, the behavior when refx is not specified on a <symbol>
element is different from when it is specified with a value of 0, and therefore different from the behavior when an equivalent attribute is not specified on a <marker>
element.
refY - SVG: Scalable Vector Graphics
the refy attribute defines the y coordinate of an
element’s reference point.
... two
elements are using this attribute: <marker> and <symbol> marker for <marker>, refy defines the y coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the shape.
... symbol for <symbol>, refy defines the y coordinate of the symbol, which is defined by the cumulative effect of the y attribute and any transformations on the <symbol> and its host <use>
element.
... for backwards compatibility, the behavior when refy is not specified on a <symbol>
element is different from when it is specified with a value of 0, and therefore different from the behavior when an equivalent attribute is not specified on a <marker>
element.
result - SVG: Scalable Vector Graphics
if supplied, then graphics that result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same <filter>
element.
... seventeen
elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg 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...
...it is only meaningful within a given <filter>
element and thus has only local scope.
... it is legal for the same <filter-primitive-reference> to appear multiple times within the same <filter>
element.
rotate - SVG: Scalable Vector Graphics
the rotate attribute specifies how the animated
element rotates as it travels along a path specified in an <animatemotion>
element.
... usage notes value auto | auto-reverse | <number> default value 0 animatable no the auto and auto-reverse values allow the animated
element's rotation to change dynamically as it travels along the path.
... if the value of rotate is auto, the
element turns to align its right-hand side in the current direction of motion.
...the default value of 0 keeps the animated
element in its original orientation.
startOffset - SVG: Scalable Vector Graphics
the startoffset attribute defines an offset from the start of the path for the initial current text position along the path after converting the path to the <textpath>
element's coordinate system.
... only one
element is using this attribute: <textpath> html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <path id="path1" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
... </textpath> </text> </svg> usage notes value <length-percentage> | <number> default value 0 animatable yes <length-percentage> a length represents a distance along the path measured in the current user coordinate system for the <textpath>
element.
... <number> this value indicates a distance along the path measured in the current user coordinate system for the <textpath>
element.
writing-mode - SVG: Scalable Vector Graphics
the writing-mode attribute specifies whether the initial inline-progression-direction for a <text>
element shall be left-to-right, right-to-left, or top-to-bottom.
... the writing-mode attribute applies only to <text>
elements; the attribute is ignored for <tspan>, <tref>, <altglyph> and <textpath> sub-
elements.
... (note that the inline-progression-direction can change within a <text>
element due to the unicode bidirectional algorithm and properties direction and unicode-bidi.) note: as a presentation attribute, writing-mode can be used as a css property.
... as a presentation attribute, it can be applied to any
element but it has effect only on the following five
elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> usage notes default value horizontal-tb value horizontal-tb | vertical-rl | vertical-lr animatable yes horizontal-tb this value defines a top-to-bottom block flow direction.
xlink:show - SVG: Scalable Vector Graphics
only one
element is using this attribute: <a> usage notes value new | replace | embed | other | none default value replace animatable no new this value specifies that the referenced resource is opened in a new window or tab.
... this is similar to the effect achieved by an html <a>
element with target set to _blank.
...this is similar to the effect achieved by an html <a>
element with target set to _self.
...this is similar to the effect achieved by an html <img>
element.
z - SVG: Scalable Vector Graphics
the z attribute defines the location along the z-axis for a light source in the coordinate system established by the primitiveunits attribute on the <filter>
element, assuming that, in the initial coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y.
... two
elements are using this attribute: <fepointlight> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="10" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="50" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fepointlight for <...
...fepointlight>, z defines the location along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter>
element.
... value <number> default value 1 animatable yes fespotlight for <fespotlight>, z defines the location along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter>
element.
<animateMotion> - SVG: Scalable Vector Graphics
the svg <animatemotion>
element let define how an
element moves along a motion path.
... note: to reuse an existing path, it will be necessary to use an <mpath>
element inside the <animatemotion>
element instead of the path attribute.
...: 0; display:block; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="lightgrey" d="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> <circle r="5" fill="red"> <animatemotion dur="10s" repeatcount="indefinite" path="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> </circle> </svg> usage context categoriesanimation
elementpermitted contentany number of the following
elements, in any order:descriptive
elements<mpath> attributes keypoints this attribute indicate, in the range [0,1], how far is the object along the path for each keytimes associated values.
...peatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document
element event attributes usage notes this
element implements the svganimatemotion
element interface.
<cursor> - SVG: Scalable Vector Graphics
note: the css cursor property should be used instead of this
element.
... the <cursor> svg
element can be used to define a platform-independent custom cursor.
... 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).
... usage context 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 svgcursor
element interface.
<foreignObject> - SVG: Scalable Vector Graphics
the <foreignobject> svg
element includes
elements from a different xml namespace.
... value type: <length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that
element.
... global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, 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, 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,...
...-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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany
elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<foreignobject>' in that specification.
<hatch> - SVG: Scalable Vector Graphics
the <hatch> svg
element is used to fill or stroke an object using one or more pre-defined paths that are repeated at fixed intervals in a specified direction to cover the areas to be painted.
... hatches defined by the <hatch>
element can then referenced by the fill and stroke css properties on a given graphics
element to indicate that the given
element shall be filled or stroked with the hatch.
... paths are defined by <hatchpath>
elements.
... usage context categoriesnever-rendered
element, paint server
elementpermitted contentany number of the following
elements, in any order:animation
elementsdescriptive
elements<hatchpath>, <script>, <style> attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes x y pitch rotate hatchunits hatchcontentunits transform href dom interface this
element implements the svghatch
element interface.
<metadata> - SVG: Scalable Vector Graphics
the <metadata> svg
element adds metadata to svg content.
...the contents of <metadata> should be
elements from other xml namespaces such as rdf, foaf, etc.
... usage context categoriesdescriptive
elementpermitted contentany
elements or character data attributes global attributes core attributes global event attributes specific attributes none dom interface this
element implements the svgmetadata
element interface.
... candidate recommendation allowed global event attributes on the
element.
<pattern> - SVG: Scalable Vector Graphics
the <pattern>
element defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area.
... the <pattern> is referenced by the fill and/or stroke attributes on other graphics
elements to fill or stroke those
elements with the referenced pattern.
... value type: userspaceonuse|objectboundingbox; default value: userspaceonuse; animatable: yes note: this attribute has no effect if a viewbox attribute is specified on the <pattern>
element.
...-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 xlink attributes most notably: xlink:title 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>, <text>, <view> specifications specification status co...
<script> - SVG: Scalable Vector Graphics
the svg script
element allows to add scripts to an svg document.
... while svg's script
element is equivalent to the html <script>
element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[ window.addeventlistener('domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { e.target.style.fi...
...ll = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </svg> attributes crossorigin this attribute defines cors settings as define for the html <script>
element.
... value type: <url> ; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document
element event attributes usage notes categoriesnonepermitted contentany
elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<script>' in that specification.
<tspan> - SVG: Scalable Vector Graphics
the svg <tspan>
element defines a subtext within a <text>
element or another <tspan>
element.
... value type: <length>|<percentage> ; default value: none; animatable: yes dx shifts the text position horizontally from a previous text
element.
... value type: <length>|<percentage> ; default value: none; animatable: yes dy shifts the text position vertically from a previous text
element.
...-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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content
element, text content child
elementpermitted contentcharacter data and any number of the following
elements, in any order:descriptive
elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specifications specification status comment scalable vector graphics (svg) 2the definition of '<tspan>' in that specification.
Linking - SVG: Scalable Vector Graphics
the target attribute on the svg <a>
element doesn't work in mozilla firefox 1.5.
...ocuments are embedded within a parent html document using the tag: page1.html: <html> <body> <p>this is a svg button:</p> <object width="100" height="50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical
elements here --> </g> </a> </svg> the specification says that the browser should navigate to the html document page2.html when the button graphics are clicked.
... however, target does not work with mozilla's implementation of the svg <a>
element in firefox 1.5.
... to get around this, requires a little ugly javascript hacking: button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <g onclick="top.document.href='page2.html'" cursor="pointer"> <!-- button graphical
elements here --> </g> </svg> example for an example of this solution at work see www.codedread.com.
SVG as an Image - SVG: Scalable Vector Graphics
many browsers support svg images in: html <img> or <svg>
elements css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image>
element svg <feimage>
element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled.
... note that the above restrictions are specific to image contexts; they don't apply when svg content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed>
elements.
... specifications specification status comment html5the definition of 'svg within <img>
element' in that specification.
... recommendation defines the usage of svg within <img>
elements.
<xsl:preserve-space> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt
elements, exslt functions, xpath functions, xpath axes the <xsl:preserve-space>
element defines the
elements in the source document for which whitespace should be preserved.
... if there is more than one
element, separate the names with a whitespace character.
... preserving whitespace is the default setting, so this
element only needs to be used to counteract an <xsl:strip-space>
element.
... syntax <xsl:preserve-space
elements=list-of-
element-names /> required attributes
elements specifies the
elements for which whitespace should be preserved.
Communicating With Other Scripts - Archive of obsolete content
cludes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.get
elementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, greeting); document.document
element.dispatchevent(event); } finally, the page script "page-script.js" listens for the message and logs the...
...from firefox 30 this sharing requires an extra step: the content script needs to explicitly clone the message payload into the page script's scope using the global cloneinto() function: var messenger = document.get
elementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var cloned = cloneinto(greeting, document.defaultview); var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, cloned); document.document
element.dispatchevent(event); } messaging from page sc...
...js") }); the web page "talk.html" creates and dispatches a custom dom event, using initcustomevent()'s detail parameter to supply the payload: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, { hello: 'world' }); document.document
element.dispatchevent(event); } </script> <button onclick="sendmessage()">send message</button> </body> </html> finally, the content script "listen.js" listens for the new event and retrieves the payload from its detail attribute: window.addeventlistener("addon-message", function(event) { console.log(json.stringify(event.detail)); }, false); ...
Communicating using "port" - Archive of obsolete content
"});" var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('click', function(html) { worker.port.emit('warning', 'do not click this again'); }); } }); in the add-on above there are two user-defined messages: click is sent from the page-mod to the add-on, when the user clicks an
element in the page warning sends a silly string back to the page-mod port.emit() the port.emit() function sends a message from the "main.js", or another add-on module, to a content script, or vice versa.
... function getfirstparagraph() { var paras = document.get
elementsbytagname('p'); console.log(paras[0].textcontent); self.port.removelistener("get-first-para", getfirstparagraph); } self.port.on("get-first-para", getfirstparagraph); the result is that the paragraph is only logged the first time the button is clicked.
... this example rewrites the "listener.js" content script in the port.removelistener() example so that it uses once(): function getfirstparagraph() { var paras = document.get
elementsbytagname('p'); console.log(paras[0].textcontent); } self.port.once("get-first-para", getfirstparagraph); json-serializable values the payload for an message can be any json-serializable value.
Porting the Library Detector - Archive of obsolete content
how the library detector works all the work is done inside a single file, librarydetector.xul this contains: a xul overlay a script the xul overlay adds a box
element to the browser's status bar: the script does everything else.
... once the list is built, the switchlibraries() function constructs a xul statusbarpanel
element for each library it found, populates it with the icon at the corresponding chrome:// url, and adds it to the box.
...this means we'll need two additional content scripts: one in the widget's context, which listens for icon mouseover events and sends a message to main.js containing the name of the corresponding library: function setlibraryinfo(
element) { self.port.emit('setlibraryinfo',
element.target.title); } var
elements = document.get
elementsbytagname('img'); for (var i = 0; i <
elements.length; i++) {
elements[i].addeventlistener('mouseover', setlibraryinfo, false); } one in the panel, which updates the panel's content with the library information: self.on("message", function(libraryinfo) { window.document.body.innerhtml ...
XUL Migration Guide - Archive of obsolete content
xul windows xul windows are used to define completely new windows to host user interface
elements specific to the add-on.
... apis like ui and panel are very generic and with the right content can be used to replace many specific xul
elements.
...here's a really simple example add-on that modifies the browser chrome using window/utils: function removeforwardbutton() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var forward = window.document.get
elementbyid('forward-button'); var parent = window.document.get
elementbyid('urlbar-container'); parent.removechild(forward); } require("sdk/ui/button/action").actionbutton({ id: "remove-forward-button", label: "remove forward button", icon: "./icon-16.png", onclick: removeforwardbutton }); there are more useful examples of this technique in the jetpack wiki's collection of third party modu...
dev/panel - Archive of obsolete content
anel.html", onready: function() { this.postmessage("message from the add-on"); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in the panel document script: // my-panel.js window.addeventlistener("message", function(event) { var content = document.get
elementbyid("content"); content.textcontent = event.data; }); note that at the moment you have to pass an array of ports into postmessage, even if you don't need to use them: // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/core/heritage"); const mypanel = class({ extends: panel, label: "my pan...
... dispose: function() { this.debuggee = null; }, onready: function() { this.debuggee.start(); this.postmessage("port", [this.debuggee]); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in my-panel.js: // my-panel.js var content = document.get
elementbyid("content"); window.addeventlistener("message", function(event) { var debuggee = event.ports[0]; console.log(debuggee); debuggee.onmessage = function(event) { content.textcontent = json.stringify(event.data); } debuggee.postmessage({ "to":"root", "type":"listtabs" }); }); if you do this, don't forget to call start() on the port before passing it over to the panel d...
...e this: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id = "content"></div> </body> <script src="./my-panel.js"></script> </html> here's a script that uses volcan.js to get the selected tab and display its url: // my-panel.js var content = document.get
elementbyid("content"); window.addeventlistener("message", function(event) { var debuggee = event.ports[0]; volcan.connect(debuggee).
frame/hidden-frame - Archive of obsolete content
xul <iframe>
elements) that are not displayed to the user.
... the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.
element.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.
element.addeventlistener("domcontentloaded", function() { console.log(self.
element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module.
... properties
element the host application frame in which the page is loaded.
frame/utils - Archive of obsolete content
usage module exports create function that takes the nsidomdocument of a privileged document and creates a browser
element in its document
element: let { open } = require('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/html,foo'); let frame = create(window.document); optionally create can be passed set of options to configure created frame even further.
... execution of scripts may easily be enabled: let { open } = require('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/html,top'); let frame = create(window.document, { uri: 'data:text/html,<script>console.log("running");</script>', allowjavascript: true }); } globals functions create(document, options) creates a xul browser
element in a privileged document.
... returns frame : the new browser
element.
Displaying annotations - Archive of obsolete content
in this chapter we'll use a page-mod to locate
elements of web pages that have annotations associated with them, and a panel to display the annotations.
... when a page is loaded the matcher searches the dom for
elements that match annotations.
... if it finds any it binds functions to that
element's mouseenter and mouseleave events to send messages to the main module, asking it to show or hide the annotation.
Display a Popup - Archive of obsolete content
the panel just contains a <textarea>
element: when the user presses the return key, the contents of the <textarea> is sent to the main add-on code.
...var textarea = document.get
elementbyid("edit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline.
...self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea>
element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png ...
Bootstrapped extensions - Archive of obsolete content
you need to look up the relevant application ui
elements by their id by calling document.get
elementbyid(), then manipulate them to inject your ui.
... for example, you can get access to the menu bar in firefox with document.get
elementbyid("main-menubar").
... creating a bootstrapped extension to mark an extension as bootstrappable, you need to add the following
element to its install manifest: <em:bootstrap>true</em:bootstrap> then you need to add a bootstrap.js file that contains the required functions; this should be alongside the install.rdf file in the extension's package.
Label and description - Archive of obsolete content
to cause the text to wrap: ensure the long-running text is a text node child of <description/> or <label/> (i.e., do not specify the long-running text in the value attribute of these
elements).
... the default style for these xul
elements includes white-space: wrap;.
... absolutely nothing!</description> text can also be made to wrap by inserting an <html:br/>
element regardless of the css style, but this creates a hard-break that does not change as parent
elements resize.
LookupNamespaceURI - Archive of obsolete content
addlookupnamespaceuri(doc); addlookupnamespaceuri(
element); function addlookupnamespaceuri (type) { if (!type.prototype.lookupnamespaceuri) { type.prototype.lookupnamespaceuri = lookupnamespaceuri; } function lookupnamespaceuri (prefix) { return lookupnamespaceurihelper(this, prefix); } function lookupnamespaceurihelper (node, prefix) { // adapted directly from http://www.w3.org/tr/dom-level-3-core/namespaces-algori...
...thms.html#lookupnamespaceurialgo var i, att, htmlmode = document.contenttype, // mozilla only xmlnspattern = /^xmlns:(.*)$/; switch (node.nodetype) { case 1: //
element_node (could also just test for node.
element_node, etc., if supported in all browsers) if (node.namespaceuri != null && node.prefix === prefix) { // note: prefix could be "null" in the case we are looking for default namespace return node.namespaceuri; } if (node.attributes.length) { for (i = 0; i < node.attributes.length; i++) { att = node.attributes[i]; if (xmlnspattern.test(att.name) && xmlnspattern.exec(att.name)[1] === p...
... } } if (node.parentnode && node.parentnode.nodetype !== 9) { // entityreferences may have to be skipped to get to it return lookupnamespaceurihelper(node.parentnode, prefix); } return null; case 9: // document_node return lookupnamespaceurihelper(node.document
element, prefix); case 6: // entity_node case 12: // notation_node case 10: // document_type_node case 11: // document_fragment_node return null; // unknown case 2: // attribute_node if (node.owner
element) { return lookupnamespaceurihelper(node.owner
element, prefix); } ...
LookupPrefix - Archive of obsolete content
tml#lookupnamespaceprefixalgo // (the above had a few apparent 'bugs' in the pseudo-code which were corrected here) if (node.lookupprefix && htmlmode !== 'text/html') { // shouldn't use this in text/html for mozilla as will return null return node.lookupprefix(namespaceuri); } if (namespaceuri === null || namespaceuri === '') { return null; } switch (node.nodetype) { case 1: // node.
element_node return _lookupnamespaceprefix(namespaceuri, node); case 9: // node.document_node return _lookupnamespaceprefix(namespaceuri, node.document
element); case 6: // node.entity_node case 12: // node.notation_node case 11: // node.document_fragment_node case 10: // node.document_type_node return null; // type is unknown case 2: // node.attribute_node if (node.owner
element) ...
...{ return _lookupnamespaceprefix(namespaceuri, node.owner
element); } return null; default: if (node.parentnode) { // entityreferences may have to be skipped to get to it return _lookupnamespaceprefix(namespaceuri, node.parentnode); } return null; } } // private function for lookupprefix only function _lookupnamespaceprefix (namespaceuri, original
element) { var xmlnspattern = /^xmlns:(.*)$/; if (original
element.namespaceuri && original
element.namespaceuri === namespaceuri && original
element.prefix && original
element.lookupnamespaceuri(original
element.prefix) === namespaceuri) { return original
element.prefix; } if (original
element.attributes && original
element.attributes.length) { for (var i=0; i < original
element.attributes.length; i++) { var att = orig...
...inal
element.attributes[i]; xmlnspattern.lastindex = 0; var localname = att.localname || att.name.substr(att.name.indexof(':')+1); // latter test for ie which doesn't support localname if (localname.indexof(':') !== -1) { // for firefox when in html mode localname = localname.substr(att.name.indexof(':')+1); } if ( xmlnspattern.test(att.name) && att.value === namespaceuri && lookupnamespaceuri(original
element, localname) === namespaceuri ) { return localname; } } } if (original
element.parentnode) { // entityreferences may have to be skipped to get to it return _lookupnamespaceprefix(namespaceuri, original
element.parentnode); } return null; } ...
On page load - Archive of obsolete content
ul documents: application uri to overlay firefox chrome://browser/content/browser.xul thunderbird chrome://messenger/content/messenger.xul navigator from seamonkey chrome://navigator/content/navigator.xul attaching a script attach a script to your overlay (see "attaching a script to an overlay") that adds a load event listener to appcontent
element (browsers) or messagepane (mail): window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); var myextension = { init: function() { var appcontent = document.get
elementbyid("appcontent"); // browser if(appcontent){ appcontent.addeventlistener("domcontentloaded"...
..., myextension.onpageload, true); } var messagepane = document.get
elementbyid("messagepane"); // mail if(messagepane){ messagepane.addeventlistener("load", function(event) { myextension.onpageload(event); }, true); } }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded page.
... // if (win.frame
element) return; // skip iframes/frames alert("page is loaded \n" +doc.location.href); } } window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); references if you need to have a more complicated listener (not just onload), use progress listeners.
QuerySelector - Archive of obsolete content
queryselector, or following the jquery style of chaining by returning 'this' within each prototype method of $()): htmldocument.prototype.$ = function (selector) { // only for html return this.queryselector(selector); }; example: <h1>test!</h1> <script> htmldocument.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.$('h1')); // [object htmlheading
element] </script> xuldocument.prototype.$ = function (selector) { // only for xul return this.queryselector(selector); }; example: <label value="test!"/> <script type="text/javascript"><![cdata[ xuldocument.prototype.$ = function (selector) { // only for xul return this.queryselector(selector); }; alert(document.$('label')); // [object xul
element] ]]></script> document.prototype.$ = functio...
...n (selector) { // only for plain xml return this.queryselector(selector); }; var foo = document.implementation.createdocument('somens', 'foo', null); // create an xml document <foo xmlns="somens"/> var bar = foo.create
elementns('somens', 'bar'); // add <bar xmlns="somens"/> foo.document
element.appendchild(bar); alert(foo.$('bar').nodename); // gives 'bar'
element.prototype.$ = function (selector) { // works for html, xul, and plain xml return this.queryselector(selector); }; html example: <h1><a>test!<a/></h1> <script>
element.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.get
elementsbytagname('h1')[0].$('a').nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="text/javascript"><![cdata[
element.prototype.$ = function (select...
...or) { return this.queryselector(selector); }; var xulns = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; alert(document.get
elementsbytagnamens(xulns, 'hbox')[0].$('vbox').nodename); // vbox ]]></script> xml example: <foo xmlns="somens"><bar/></foo> in document earlier var foo = document.get
elementsbytagnamens('somens', 'foo')[0]; alert(foo.$('bar')); note that for plain xml, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type id in xml, though it is in html and xul), nor will it work with xml:id.
Rosetta - Archive of obsolete content
"); if (!odicts.hasownproperty(smimetype)) { alert("rosetta.translatescript() \u2013 unknown mime-type \"" + smimetype + "\": script ignored."); return; } var ocompiled = document.create
element("script"); oscript.parentnode.insertbefore(obaton, oscript); oscript.parentnode.removechild(oscript); for (var aattrs = oscript.attributes, nattr = 0; nattr < aattrs.length; nattr++) { ocompiled.setattribute(aattrs[nattr].name, aattrs[nattr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(o...
...getsource(oscript) : createscript(oscript); } } function parsedocument () { for ( var ascripts = document.get
elementsbytagname("script"), nidx = 0; nidx < ascripts.length; parsescript(ascripts[nidx++]) ); } var odicts = {}, rignoremimes = /^\s*(?:text\/javascript|text\/ecmascript)\s*$/; this.translatescript = parsescript; this.translateall = parsedocument; this.appendcompiler = function (vmimetypes, fcompiler) { if (arguments.length < 2) { throw new typee...
...s a short list of the mime types associated to some programming languages: language mime type bash text/x-shellscript java text/x-java-source c text/x-c, text/x-csrc c++ text/x-c++, text/x-c++src python text/x-python there are no limitations to the mime types that can be used for the type attribute of the <script>
element.
Tree - Archive of obsolete content
ew = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text 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.get
elementbyid("my-tree"); var cellindex = 0; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } 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.get
elementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree ...
...instead, you can add the event handler to the <tree>
element.
...for example, assuming the given <tree>: <tree id="my-tree" onclick="ontreeclicked(event)"> use the following javascript: function ontreeclicked(event){ var tree = document.get
elementbyid("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 celltext = tree.view.getcelltext(row.value, col.value); alert(celltext); } 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); f...
Inline options - Archive of obsolete content
.options2" type="radio" title="options 2"> <radiogroup> <radio value="false" label="disabled"/> <radio value="true" label="enabled"/> </radiogroup> </setting> <!-- button example - not tied to a preference, but attached to a command --> <setting title="do something" type="control"> <button id="myaddon-button" label="click me" oncommand="alert('thank you!');"/> </setting> setting
element changed notifications most of the setting
elements (it might be all i havent really looked), support oninputchanged attribute.
...the this value is the setting xul
element.
...for example: var observer = { observe: function(asubject, atopic, adata) { if (atopic == "addon-options-displayed" && adata == "my_addon@my_domain") { var doc = asubject; var control = doc.get
elementbyid("myaddon-pref-control"); control.value = "test"; } } }; services.obs.addobserver(observer, "addon-options-displayed", false); // don't forget to remove your observer when your add-on is shut down.
Connecting to Remote Content - Archive of obsolete content
request.onload = function(aevent) { let responsexml = aevent.target.responsexml; let root
element = responsexml.document
element; if (root
element && "parseerror" != root
element.tagname) { let shop
elements = root
element.get
elementsbytagname("shop"); let total
element = root
element.get
elementsbytagname("total")[0]; window.alert(shop
elements[1].get
elementsbytagname("name")[0].firstchild.nodevalue); // => orange window.alert(total
element.firstchild.nodevalue); ...
...in this example code, the first child of the xul document is appended to a xul
element after the transformation.
... request.onload = function(aevent) { let responsexml = aevent.target.responsexml; let xulnode; // transform the xml document to a xul document xuldocument = xsltprocessor.transformtodocument(responsexml); // append the xul node to a xul
element xulnode = document.adoptnode(xuldocument.firstchild); document.get
elementbyid("foo").appendchild(xulnode); }; we effectively transformed the xml file into xul and integrated it into the ui.
Adding preferences to an extension - Archive of obsolete content
tion: function() { // because we may be called as a callback, we can't rely on // "this" referring to the right object, so we need to reference // it by its full name var symbol = stockwatcher.tickersymbol; var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var samplepanel = document.get
elementbyid('stockwatcher2'); var output = httprequest.responsetext; if (output.length) { // remove any whitespace from the end of the string output = output.replace(/\w*$/, ""); // build the tooltip string var fieldarray = output.split(","); samplepanel.label = symbol + ": " + fieldarray[1]; samplepanel.tooltiptext = "chg: " + fieldar...
...the <hbox>
element is used to lay out the user interface by indicating that the widgets inside it should be positioned horizontally, next to each other in the window.
...the preference property ties the textbox to the "pref_symbol" <preference>
element and to the "extensions.stockwatcher2.symbol" preference.
Creating reusable content with CSS and XBL - Archive of obsolete content
you can use css to provide content for selected
elements, but the content is limited to text and images, and its positioning is limited to before or after the selected
element.
...you can use xbl to link selected
elements to their own: stylesheets content properties and methods event handlers because you avoid linking everything at the document level, you can make self-contained parts that are easy to maintain and reuse.
...gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> <resources> <stylesheet src="bind6.css"/> </resources> <content> <html:div anonid="square"/> <xul:button anonid="button" type="button"> <children/> </xul:button> </content> <implementation> <field name="square"><![cdata[ document.getanonymous
elementbyattribute(this, "anonid", "square") ]]></field> <field name="button"><![cdata[ document.getanonymous
elementbyattribute(this, "anonid", "button") ]]></field> <method name="dodemo"> <body><![cdata[ this.square.style.backgroundcolor = "#cf4" this.square.style.marginleft = "20em" this.button.setattribute("disabled", "true") settimeout...
XML data - Archive of obsolete content
you want the document's info
elements to be displayed like html paragraphs.
... in the document's stylesheet, you specify how info
elements are to be displayed: info { display: block; margin: 1em 0; } the most common values for the display property are: block displayed like html's div (for headings, paragraphs) inline displayed like html's span (for emphasis within text) add your own style rules that specify the font, spacing and other details in the same way as for html.
... more details other values of display display the
element like a list item, or like a component of a table.
Localizing an extension - Archive of obsolete content
note: you should use a unique id for each string bundle
element for each file you use to avoid conflicts.
...we add to refreshinformation() the following code: var stringsbundle = document.get
elementbyid("string-bundle"); var changestring = stringsbundle.getstring('changestring') + " "; var openstring = stringsbundle.getstring('openstring') + " "; var lowstring = stringsbundle.getstring('lowstring') + " "; var highstring = stringsbundle.getstring('highstring') + " "; var volumestring = stringsbundle.getstring('volumestring') + " "; this code gets a reference to the string bundle
element...
... we added to stockwatcher2.xul by calling document.get
elementbyid(), specifying the id "string-bundle".
Visualizing an audio spectrum - Archive of obsolete content
the function handling the loadedmetadata event stores the metadata of the audio
element in global variables; the function for the mozaudioavailable event does an fft of the samples and displays them in a canvas.
... <!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-
element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <script> var canvas = document.get
elementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferl...
... before drawing spectrum ctx.clearrect(0,0, canvas.width, canvas.height); for (var i = 0; i < fft.spectrum.length; i++ ) { // multiply spectrum by a zoom value magnitude = fft.spectrum[i] * 4000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } } var audio = document.get
elementbyid('audio-
element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffersize, samplerate) { this.buffersize = buffersize; this.samplerate = samplerate; this.spectrum = new float32array(buffersize/2); ...
Editor Embedding Guide - Archive of obsolete content
getcommandstate "state_enabled"(boolean) docommand no parameters note see also cmd_removelist cmd_dt inserts list item (dt
element).
... getcommandstate "state_enabled"(boolean) docommand no parameters note see also cmd_removelist cmd_dd inserts list item (dd
element).
... first getnext (returns the next name in the name/value pair list) hasmore
elements getvaluetype (numeric enum type see nsicommandparams for values) if the name/value pair is known or it was obtained using the methods described above, it is possible to call the following methods: getbooleanvalue getlongvalue getdoublevalue getstringvalue getcstringvalue getisupportsvalue all of these take pointers to values except for getstringvalue which demands a reference to an ...
Menu - Archive of obsolete content
xulid string the id of the menuitem's backing xul
element, exposed for the benefit of advanced developers.
... to match links and all
elements contained in links, use jetpack.menu.context.page.on("a[href], a[href] *").
...this is the context menu that appears when right-clicking on an
element in firefox's interface, such as a bookmark on the bookmarks toolbar.
Porting NSPR to Unix Platforms - Archive of obsolete content
in particular, you need to figure out which
element in the <tt>jmp_buf</tt> is the stack pointer.
... usually <tt>jmp_buf</tt> is an array of integers, and some platforms have a <tt>jb_sp</tt> macro that tells you which array
element is the stack pointer.
...i usually print out every
element in the <tt>jmp_buf</tt> and see which one is the closest to the address of a local variable (local variables are allocated on the stack).
textbox.onblur - Archive of obsolete content
prior to gecko 1.9 (firefox 3), the script code would execute in the context of the anonymous html <input>
element inside the textbox binding.
... from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9), the script code would actually execute twice, once in the context of the anonymous html <input>
element and once in the context of the <textbox>
element itself.
... as of gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10), the script code only runs in the context of the <textbox>
element, matching the behavior of all other event handlers.
textbox.onfocus - Archive of obsolete content
prior to gecko 1.9 (firefox 3), the script code would execute in the context of the anonymous html <input>
element inside the textbox binding.
... from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9), the script code would actually execute twice, once in the context of the anonymous html <input>
element and once in the context of the <textbox>
element itself.
... as of gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10), the script code only runs in the context of the <textbox>
element, matching the behavior of all other event handlers.
Working With Directories - Archive of obsolete content
function getlatestfile() { var lastmod = 0; var homedir = io.getfile("home", ""); var items = homedir.directoryentries; while (items.hasmore
elements()) { var item = items.getnext().queryinterface(components.interfaces.nsifile); if (item.isfile() && item.lastmodifiedtime > lastmod.lastmodifiedtime) lastmod = item; } return lastmod; } this example iterates through the files in the home directory and looks for the file with the latest modification time (the last file in that directory that was written to).
... as the directoryentries (nsifile.attributes) property is an enumeration, you can iterate over the items by using nsisimpleenumerator.hasmore
elements() and nsisimpleenumerator.getnext().
...the following example returns an array of all of a directory's subdirectories: function getsubdirs() { var arr = []; var items = io.getfile("home", "").directoryentries; while (items.hasmore
elements()) { var item = items.getnext(); if (item.isdirectory()) arr.push(item); } return arr; } ...
Menus - Archive of obsolete content
firefox menus
element id description main-menubar the menubar
element.
... firefox context menu
element id description relevant context contentareacontextmenu the popup for the context menu when a web page is displayed in the browser area.
... views the selection source selection context-viewpartialsource-mathml views the mathml source mathml context-viewsource views the source context-viewinfo views the page info context-metadata views the properties context-spell-check-enabled spell check enabled checkbox context-inspect inspects the
element ...
appendItem - Archive of obsolete content
« xul reference home appenditem( label, value ) return type:
element creates a new item and adds it to the end of the existing list of items.
...the function returns the newly created
element.
... example <script language="javascript"> function additemstolist(){ var list = document.get
elementbyid('mymenulist'); // add item with just the label list.appenditem('one'); // add item with label and value list.appenditem('two', 999); // select the first item list.selectedindex = 0; } </script> <button label="add items" oncommand="additemstolist()"/> <menulist id="mymenulist"> <menupopup/> </menulist> see also insertitemat() removeitemat() ...
appendNotification - Archive of obsolete content
« xul reference home appendnotification( label , value , image , priority , buttons, eventcallback ) return type:
element create a new notification and display it.
...keep in mind that this is all xul so using html
elements for styling might still need additional css in order to work as you might expect.
... the
element which was the target of the button press event.
insertItemAt - Archive of obsolete content
« xul reference home insertitemat( index, label, value ) return type:
element this method creates a new item and inserts it at the specified position.
...the new item
element is returned.
... note: you cannot insert an item to an index that does not exist, eg: trying to insert an item at the end with
element.getrowcount() + 1 example <!-- this example inserts at the selected item or appends, then selects the newly created item --> <script language="javascript"> function insertitemtolist(){ var mylistbox = document.get
elementbyid('mylistbox'); // create a date to get some labels and values var somedate = new date(); if(mylistbox.selectedindex == -1){ // no item was selected in list so append to the end mylistbox.appenditem( somedate.tolocaletimestring(), somedate.gettime() ); var newindex = mylistbox.getrowcount() -1 }else{ // item was selected so insert at the selected item var newindex = mylistbox.selectedindex...
controllers - Archive of obsolete content
« xul reference controllers type: nsicontrollers a controllers list attached to the
element.
...the document's command dispatcher will locate controllers to handle a command by using the focused
element's list.
... example <window id="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list = document.get
elementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox...
Attribute Substitution - Archive of obsolete content
it may be desirable to have longer text wrap by placing it as the content of a description
element.
...however, the textnode
element is not copied into the generated content, but instead a dom text node is created with the value of the value attribute as its contents.
...the bug is that this code path for bindings doesn't handle the textnode
element properly.
Multiple Rule Example - Archive of obsolete content
<vbox id="photoslist" align="start" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/
elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/
elements/1.1/description" object="?description"/> <triple subject="?photo" predicate="http://purl.org/dc/
elements/1.1/date" object="?date"/> </conditions> <action> <hbox uri="?photo" class="box-padd...
... <groupbox> <caption label="photo details"/> <label value="?description"/> <label value="date: ?date"/> </groupbox> </hbox> </action> </rule> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/
elements/1.1/title" object="?phototitle"/> </conditions> <action> <vbox uri="?photo" class="box-padded"> <label value="?phototitle"/> <image src="?photo"/> </vbox> </action> </rule> </template> </vbox> in this example, the first rule matches only those photos with title, description, and date properties.
...if the last rule has no specific conditions (for example a simple rule with no attributes on the <rule>
element), it could be considered to be the final else block that matches all data.
XUL Accesskey FAQ and Policies - Archive of obsolete content
an accesskey is an underlined letter in a web page, menu or dialog that indicates to a user a quick, keyboard method of simulating a click on that
element.
... common
elements that don't get accesskeys ok buttons.
...look for dependencies of bug 129179 (the xul accesskey hookup meta bug), or look for bugs with "accesskey" or "mnemonic" in the summary, or look for dialogs where there are no
elements with underlined letters.
assign - Archive of obsolete content
any namespace prefixes declared on the
element may be used within the expression.
... inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobj...
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
bbox - Archive of obsolete content
it is equivalent to using an hbox
element with an align attribute set to baseline.
... examples (example needed) attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden,...
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
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, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , ,...
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
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, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, d...
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
listcol - Archive of obsolete content
lexible --> <listbox> <listhead> <listheader label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol flex="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, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove...
...
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getcli...
...entrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related
elements listbox, listcell, listcols, listhead, listheader, listitem ...
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, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex...
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
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, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden,...
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
spinbuttons - Archive of obsolete content
spin buttons are not used as separate
elements, but are used in combination with other
elements to create a control that can be increased and decreased.
... attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, co...
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
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, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden,...
... ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattr...
toolbarpalette - Archive of obsolete content
examples <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul
element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, remove...
...
element, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getcli...
...entrects(), get
elementsbyattribute, get
elementsbyattributens, get
elementsbyclassname(), get
elementsbytagname(), get
elementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related
elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
NPWindow - Archive of obsolete content
width; /* maximum window size */ uint32_t height; nprect cliprect; /* clipping rectangle coordinates */ #ifdef xp_unix void * ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ npwindowtype type; /* window or drawable target */ } npwindow; fields the data structure has the following fields: window platform-specific handle to a native window
element in the netscape window hierarchy on windows (hwnd) and unix (x window id).
...clipping to the cliprect prevents the plug-in from overwriting the status bar, scroll bars, and other page
elements when partially scrolled off the screen.
...the plug-in area is a native window
element on windows and unix, or a rectangle within a native window on mac os.
What is RSS - Archive of obsolete content
and although these are each different, they all label themselves as rss 2.0 on the <rss>
element.
...in fact, the only real difference between the news/blogger rss and the internet radio/internet television rss is that the news/blogger rss uses the <link>
element and the internet radio/internet television rss uses the <enclosure>
element.
...when you create your own rss feeds, you will likely want to make them more complex than these and include additional rss
elements and make use of the various rss modules.
Atomic RSS - Archive of obsolete content
it brings in atom
elements into rss, adding the advantages of atom to rss while maintaining backwards compatibility.
... documentation selected articles atomic rss tim bray talks about using atom 1.0 as a micro format and extension module for rss 2.0; keeping rss 2.0 as your sydication format but bringing in and using selected atom 1.0
elements.
... references atomic rss
element list examples none available at this time community none available at this time tools none available at this time other resources tim bray's atom rss article rss, atom, rdf, xml ...
Proposal - Archive of obsolete content
in development rsshints a module that adds
elements to a feed that help an aggregator process them.
... draft exists source guid when an rss item is posted in response to a previous item (called the source item) rss 2.0 offers the source
element which allows the item to refer to the rss feed which contains the source item.
... the sguid specification provides a more granular approach by offering an sourceref
element which can reference the guid permalink of the source.
Making sure your theme works with RTL locales - Archive of obsolete content
gecko 1.9.1 (firefox 3.5) and earlier the chromedir attribute firefox, thunderbird and seamonkey expose an attribute named chromedir on certain
elements.
... note that not all
elements will have the chromedir attribute, so you may need to refer to an ancestor
element that does.
... for example: /* we want to apply a rtl rule to #c; neither it nor its * parent
element #b has a chromedir attribute, but its * grandparent
element #a does.
Theme changes in Firefox 3.5 - Archive of obsolete content
affected files details scrollbar.xml, xulscrollbars.css the <gripper>
element was removed from the scrollbar thumb button by bug 448704.
...if you don't want the shadow, you can turn it off by setting the new -moz-window-shadow css property to none on the affected
element.
... browser.xul bug 463189 added a new attribute on the xul window
element of browser.xul named browsingmode.
Summary of Changes - Archive of obsolete content
this section outlines all of the
element and practice updates described in this article.
... proprietary or deprecated feature w3c feature or recommended replacement deprecated font html 4.01 span plus css1 color: ; font-family: ; font-size: ; deprecated center or align="center" css1 text-align: center; for in-line
elements like text or image deprecated center or align="center" css1 margin-left: auto; margin-right: auto; for block-level
elements deprecated bgcolor css1 background-color: ; non-standard embed html 4.01 object deprecated applet html 4.01 object non-standard marquee html 4.01 div plus scripting non-standard bgsound html 4.01 object proprietary or deprecated featur...
...e w3c feature or recommended replacement ie5+ id_attribute_value document.all.id_attribute_value document.all[id_attribute_value] dom level 2: document.get
elementbyid(id_attribute_value) ie5+ formname.inputname.value dom level 1: document.forms["formname"].inputname.value ie5+ inputname.value dom level 1: document.forms["formname"].inputname.value ie5+ formctrlname dom level 1: document.forms["formname"].formctrlname ie5+ document.forms(0) dom level 1: document.forms[0] ie elemref.innertext dom level 1 (core) interface we could introduce dom 3 core textcontent attribute here which is supported by mozilla 1.5+ and is a perfect equivalent to innertext.
-moz-binding - Archive of obsolete content
the -moz-binding css property is used by mozilla-based applications to attach an xbl binding to a dom
element.
... none no xbl binding is applied to the
element.
... formal definition initial valuenoneapplies toall
elements except generated content or pseudo-
elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <url> | none examples .exampleone { -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#radiobutton); } specifications not part of any standard.
-ms-accelerator - Archive of obsolete content
initial valuefalseapplies toall
elementsinheritednocomputed valueas specifiedanimation typediscrete syntax /* the object is not a keyboard shortcut (the default) */ -ms-accelerator: false /* the object is a keyboard shortcut */ -ms-accelerator: true values false the object is not a keyboard shortcut.
... formal syntax false | true examples this example uses the -ms-accelerator attribute in a <u>
element to specify that the "n" in the <label>
element is a keyboard shortcut.
...when alt + n is pressed, the <input>
element that defines an accesskey attribute value of "n" receives the focus.
E4X for templating - Archive of obsolete content
.length); } return strs.getstringfromname(msg); } for example, <toolbarbutton label={$s('mytoolbar.label')}/> conditionals function _if (cond, h, _else) { if (cond && cond != undefined) { // we need undefined condition for e4x return h(cond); } else if (_else) { return _else(cond); } return ''; // empty string allows conditions in attribute as well as
element content } for example: {_if(elems.length(), function () <description>{elems[0]}</description>, function _else () <label>no data</label> )} note that the simple xmllist() constructor (<></>) may be useful to still be able to use an expression closure (i.e., without needing return statements and braces): {_if(elems.length(), function () <> <markup/> <markup/> </>)} note...
... ++it; } } else { for (k in arr) { if (it < min) { ++it; continue; } if (it > max) { break; } ret+=h(k, arr[k], it, lev); ++it; } } return ret; } the following real case example iterates over an array of the lines in an e4x child
element to produce an xmllist of multiple vbox's representing each line: <vbox> {foreach(e(someel.somechild[0]).split('\n'), function (line) <description>{line}</description> )} </vbox> the following example shows iteration over an e4x object itself: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)...
...} or if the e4x child
element had its own children and text: {foreach(elems, function (k, elem, iter) <> <row>{k}: {elem.text()} {elem.somechild}</row> <row><image src="chrome://myext/skin/images/fillerrow.jpg" /></row> </>)} sorting /* @param {xmllist} xmllist the xmllist to sort @param {function} h the sorting handler */ function sort (xmllist, h) { var k, arr=[], ret = <></>; for (k in xmllist) { if (xmllist.hasownproperty(k)) { arr.push(xmllist[k]); } } arr.sort(h).foreach(function (item) { if (typeof item === 'xml') { ret += item; } else if (typeof item === 'string') { ret += new xml(item); } else { var ser = (new xmlserializer()).serializetostring(item); ...
Window.importDialog() - Archive of obsolete content
example var dialog = importdialog(null, "chrome://myextension/content/dialog.xul", myobject); notes the xul passed to importdialog() is very similar to xul passed to window.opendialog(), with some limitations and caveats: only <dialog> top level
elements are permitted.
... scripts are loaded via an attribute on the <dialog>
element, not via the <script> tag.
...because of this,
element id and javascript conflicts are possible, just like overlays.
Requests For Enhancement - Archive of obsolete content
natively, the mozilla xforms implementation supports xforms
elements being hosted in xhtml and xul documents.
...our custom control interfaces allows for the exchange of data between any xml
element and and an xforms model.
... enhancements of xforms
elements if you find that none of the
elements proposed by the xforms spec address your requirements, please post your usecase here.
Correctly Using Titles With External Stylesheets - Archive of obsolete content
external stylesheets are often associated with html documents using the <link rel="stylesheeet">
element, but it is important to use the
element's title attribute properly.
... this is because the title attribute on a <link rel="stylesheeet">
element makes it either preferred or an alternative style sheet.
...any link
element referring to a stylesheet with a title attribute must be either preferred or alternate, depending on the value of the rel attribute.
Async scripts for asm.js - Game development
putting async into action getting async compilation is easy: when writing your javascript, just use the async attribute like so: <script async src="file.js"></script> or, to do the same thing via script: var script = document.create
element('script'); script.src = "file.js"; document.body.appendchild(script); (scripts created from script default to async.) the default html shell emscripten generates produces the latter.
... two common situations in which a script is *not* async (as defined by the html spec) are: <script async>code</script> and var script = document.create
element('script'); script.innerhtml = "code"; document.body.appendchild(script); both are counted as 'inline' scripts and get compiled and then run immediately.
...instead of using eval or innerhtml, both of which trigger synchronous compilation, you should use a blob with an object url: var blob = new blob([codestring]); var script = document.create
element('script'); var url = url.createobjecturl(blob); script.onload = script.onerror = function() { url.revokeobjecturl(url); }; script.src = url; document.body.appendchild(script); the setting of src rather than innerhtml is what makes this script async.
Mobile touch controls - Game development
pure javascript approach we could implement touch events on our own — setting up event listeners and assigning relevant functions to them would be quite straightforward: var el = document.get
elementsbytagname("canvas")[0]; el.addeventlistener("touchstart", handlestart); el.addeventlistener("touchmove", handlemove); el.addeventlistener("touchend", handleend); el.addeventlistener("touchcancel", handlecancel); this way, touching the game's <canvas> on the mobile screen would emit events, and thus we could manipulate the game in any way we want (for example, moving the space ship around).
... to see if it's working correctly we can output the x and y positions using the output
element.
...the pointer
element contains the x and y variables storing the current position of the dragged
element.
Crisp pixel art look with image-rendering - Game development
the steps to achieve this effect are: create a <canvas>
element and set its width and height attributes to the original, smaller resolution.
... set the <canvas>
element's image-rendering css property to some value that does not make the image blurry.
...as: <canvas id="game" width="128" height="128"></canvas> css to size the canvas and render a crisp image: canvas { width: 512px; height: 512px; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } and some javascript to set up the canvas and load the image: // get canvas context var ctx = document.get
elementbyid('game').getcontext('2d'); // load image var image = new image(); image.onload = function () { // draw the image into the canvas ctx.drawimage(image, 0, 0); } image.src = 'https://udn.realityripple.com/samples/11/a2954fe197.png'; this code used together produces the following result: note: you can check out the original code on github (and a live example.) ...
Gecko FAQ - Gecko Redirect 1
by the end of calendar year 2000, gecko is expected to support the following recommended open internet standards fully except for the areas noted below and open bugs documented in bugzilla: html 4.0 - full support except for:
elements: bdo, basefont attributes: shape attribute on the a
element, abbr, axis, headers, scope-row, scope-col, scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary, event, dir, align on table columns, label attribute of option, alternate text of area
elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout,...
... which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release) style sheets css 1 - full support, except for: the application of styles to html column
elements the ability to turn off author styles the names of certain mozilla extension pseudo-classes lack the moz- prefix css 2 - partial support is expected and has already been built into gecko, including support for css2 positioning, but no commitment has been made to achieve a specific level of support dom level 0 level 1 core: full support making entityreferences available through dom1; per a provision of the dom1 spec for xml implementations, entities will be automatically expanded inline and therefore not available through dom1; our im...
... layout component tracks content layout bugs that may be related to a variety of specifications html 4.0
elements, form controls, frames, tables, and form submission bug reports marked with the html4 keyword "meta bug" for tracking outstanding issues with html 4.01 compliance css: style system component (see also bug reports marked with the css1, css2, and css3 keywords) dom: see dom0, dom1, dom2 and event handling components xml rdf core javascript language interpreter (javascript engine) ...
Block - MDN Web Docs Glossary: Definitions of Web-related terms
it may refer to: block (css) a block on a webpage is an html
element that appears on a new line, i.e.
... underneath the preceding
element in a horizontal writing mode, and above the following
element (commonly known as a block-level
element).
... for example, <p> is by default a block-level
element, whereas <a> is an inline
element — you can put several links next to one another in your html source and they will sit on the same line as one another in the rendered output.
Selector (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
a css selector is the part of a css rule that describes what
elements in a document the rule will match.
... the matching
elements will have the rule's specified style applied to them.
... consider this css: p { color: green; } div.warning { width: 100%; border: 2px solid yellow; color: white; background-color: darkred; padding: 0.8em 0.8em 0.6em; } #customized { font: 16px lucida grande, arial, helvetica, sans-serif; } the selectors here are "p" (which applies the color green to the text inside any <p>
element), "div.warning" (which makes any <div>
element with the class "warning" look like a warning box), and "#customized", which sets the base font of the
element with the id "customized" to 16-pixel tall lucida grande or one of a few fallback fonts.
Flex Container - MDN Web Docs Glossary: Definitions of Web-related terms
this
element then becomes a flex container, and each one of its children becomes a flex item.
... a value of flex causes the
element to become a block level flex container, and inline-flex an inline level flex container.
... these values create a flex formatting context for the
element, which is similar to a block formatting context in that floats will not intrude into the container, and the margins on the container will not collapse with those of the items.
HTML - MDN Web Docs Glossary: Definitions of Web-related terms
concept and syntax an html document is a plaintext document structured with
elements.
...
elements are surrounded by matching opening and closing tags.
... you can extend html tags with attributes, which provide additional information affecting how the browser interprets the
element: an html file is normally saved with an .htm or .html extension, served by a web server, and can be rendered by any web browser.
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
jquery uses a format, $(selector).action() to assign an
element(s) to an event.
... to explain it in detail, $(selector) will call jquery to select selector
element(s), and assign it to an event api called .action().
... $(document).ready(function(){ alert("hello world!"); $("#blackbox").hide(); }); the above code carries out the same function as the following code: window.onload = function() { alert("hello world!"); document.get
elementbyid("blackbox").style.display = "none"; }; or: window.addeventlistener("load", () => { alert("hello world!"); document.get
elementbyid("blackbox").style.display = "none"; }); learn more general knowledge jquery on wikipedia jquery official website technical information offical api reference documentation ...
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
if you use a <base>
element to override the base uri of your page, put the
element in the non-scripted part of the document.
... don't add it via document.write() or document.create
element.
...<script>document.write("<div></div>");</script> inside the head
element will be interpreted as <script>document.write("</head><body><div></div>");</script> which is unbalanced.
MDN Web Docs Glossary: Definitions of Web-related terms
t dom (document object model) domain domain name domain sharding dominator dos attack dtls (datagram transport layer security) dtmf (dual-tone multi-frequency signaling) dynamic programming language dynamic typing e ecma ecmascript effective connection type
element empty
element encapsulation encryption endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive fetch metadata request header firefox os firewall first contentful p...
...light request prerender presto primitive privileged privileged code progressive enhancement progressive web apps promise property property (css) property (javascript) protocol prototype prototype-based programming proxy server pseudo-class pseudo-
element pseudocode public-key cryptography python q quality values quaternion quic r rail random number generator raster image rdf real user monitoring (rum) recursion reference reflow regular expression rendering engine r...
... round trip time (rtt) routers rss rtcp (rtp control protocol) rtf rtl (right to left) rtp (real-time transport protocol) and srtp (secure rtp) rtsp: real-time streaming protocol ruby s safe same-origin policy scm scope screen reader script-supporting
element scroll container scrollport sctp sdp search engine second-level domain secure sockets layer (ssl) selector (css) self-executing anonymous function semantics seo serialization server server timing session hijacking sgml shadow tree shim ...
CanvasRenderingContext2D.filter - Web APIs
takes an iri pointing to an svg filter
element, which may be embedded in an external xml file.
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.filter = 'blur(4px)'; ctx.font = '48px serif'; ctx.filltext('hello world', 50, 100); result applying multiple filters you can combine as many filters as you like.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.get
elementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
it is similar to
element.scrollintoview().
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('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> <textarea id=...
..."code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.get
elementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.get
elementbyid("code"); var reset = document.get
elementbyid("reset"); var edit = document.get
elementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living stand...
CanvasRenderingContext2D.setLineDash() - Web APIs
if the number of
elements in the array is odd, the
elements of the array get copied and concatenated.
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result some common patterns this example illustrates a variety of common line dash patterns.
... function drawdashedline(pattern) { ctx.beginpath(); ctx.setlinedash(pattern); ctx.moveto(0, y); ctx.lineto(300, y); ctx.stroke(); y += 20; } const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); let y = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20, 5]); drawdashedline([15, 3, 3, 3]); drawdashedline([20, 3, 3, 3, 3, 3, 3, 3]); drawdashedline([12, 3, 3]); // equals [12, 3, 3, 12, 3, 3] result specifications specification status comment html living standardthe definition of 'canv...
CanvasRenderingContext2D.stroke() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.stroke(); result re-stroking paths typically, you'll want to call beginpath() for each new thing you want to stroke.
... const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // first sub-path ctx.linewidth = 26; ctx.strokestyle = 'orange'; ctx.moveto(20, 20); ctx.lineto(160, 20); ctx.stroke(); // second sub-path ctx.linewidth = 14; ctx.strokestyle = 'green'; ctx.moveto(20, 80); ctx.lineto(220, 80); ctx.stroke(); // third sub-path ctx.linewidth = 4; ctx.strokestyle = 'pink'; ctx.moveto(20, 140); ctx.lineto(280, 140); ctx.stroke(); result ...
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 16; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcon...
A basic ray-caster - Web APIs
this article provides an interesting real-world example of using the <canvas>
element to do software rendering of a 3d environment using ray-casting.
... after realizing, to my delight, that the nifty <canvas>
element i'd been reading about was not only soon to be supported in firefox, but was already supported in the current version of safari, i had to try a little experiment.
... so there you are, fire up safari 1.3+ or firefox 1.5+ or some other browser that supports the <canvas>
element and enjoy!
ChildNode.before() - Web APIs
examples inserting an
element var parent = document.create
element("div"); var child = document.create
element("p"); parent.appendchild(child); var span = document.create
element("span"); child.before(span); console.log(parent.outerhtml); // "<div><span></span><p></p></div>" inserting text var parent = document.create
element("div"); var child = document.create
element("p"); parent.appendchild(child); child.before("text"); ...
... console.log(parent.outerhtml); // "<div>text<p></p></div>" inserting an
element and text var parent = document.create
element("div"); var child = document.create
element("p"); parent.appendchild(child); var span = document.create
element("span"); child.before(span, "text"); console.log(parent.outerhtml); // "<div><span></span>text<p></p></div>" childnode.before() is unscopable the before() method is not scoped into the with statement.
...argitem : document.createtextnode(string(argitem))); }); this.parentnode.insertbefore(docfrag, this); } }); }); })([
element.prototype, characterdata.prototype, documenttype.prototype]); specification specification status comment domthe definition of 'childnode.before()' in that specification.
Console.table() - Web APIs
each
element in the array (or enumerable property if data is an object) will be a row in the table.
... // an array of strings console.table(["apples", "oranges", "bananas"]); // an object whose properties are strings function person(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } var me = new person("john", "smith"); console.table(me); collections of compound types if the
elements in the array, or properties in the object, are themselves arrays or objects, then their
elements or properties are enumerated in the row, one per column: // an array of arrays var people = [["john", "smith"], ["jane", "doe"], ["emily", "jones"]] console.table(people); // an array of objects function person(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } ...
... // an object whose properties are objects var family = {}; family.mother = new person("jane", "smith"); family.father = new person("john", "smith"); family.daughter = new person("emily", "smith"); console.table(family); restricting the columns displayed by default, console.table() lists all
elements in each row.
DOMImplementation.createHTMLDocument() - Web APIs
here's the html for this example: <body> <p>click <a href="javascript:makedocument()">here</a> to create a new document and insert it below.</p> <iframe id="theframe" src="about:blank" /> </body> the javascript implementation of makedocument() follows: function makedocument() { let frame = document.get
elementbyid("theframe"); let doc = document.implementation.createhtmldocument("new document"); let p = doc.create
element("p"); p.innerhtml = "this is a new paragraph."; try { doc.body.appendchild(p); } catch(e) { console.log(e); } // copy the new html document into the frame let destdocument = frame.contentdocument; let srcnode = doc.document
element; let newnode = destdocu...
...ment.importnode(srcnode, true); destdocument.replacechild(newnode, destdocument.document
element); } the code in lines 4–12 handle creating the new html document and inserting some content into it.
...lines 5 and 6 create a new paragraph
element with some simple content, and then lines 8–12 handle inserting the new paragraph into the new document.
DOMTokenList.forEach() - Web APIs
syntax tokenlist.foreach(callback [, thisarg]); parameters callback function to execute for each
element, eventually taking three arguments: currentvalue the current
element being processed in the array.
... currentindex the index of the current
element being processed in the array.
... example in the following example we retrieve the list of classes set on a <span>
element as a domtokenlist using
element.classlist.
DOMTokenList - Web APIs
such a set is returned by
element.classlist, htmllink
element.rellist, htmlanchor
element.rellist, htmlarea
element.rellist, htmliframe
element.sandbox, or htmloutput
element.htmlfor.
... domtokenlist.foreach(callback [, thisarg]) executes a provided callback function once per domtokenlist
element.
... examples in the following simple example, we retrieve the list of classes set on a <p>
element as a domtokenlist using
element.classlist, add a class using domtokenlist.add(), and then update the node.textcontent of the <p> to equal the domtokenlist.
DataTransferItemList.DataTransferItem() - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this
element's id to the drag payload so the drop handler will // know which
element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...tion drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.get
elementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
...ver"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this
element, drag it to the drop zone and then release the selection to move the
element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specif...
DataTransferItemList.add() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this
element, drag it to the drop zone and then release the selection to move the
element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"...
...); // add this
element's id to the drag payload so the drop handler will // know which
element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...n drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.get
elementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
DataTransferItemList.clear() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this
element, drag it to the drop zone and then release the selection to move the
element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { ...
... console.log("dragstart"); // add this
element's id to the drag payload so the drop handler will // know which
element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...n drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.get
elementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
DataTransferItemList.length - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this
element's id to the drag payload so the drop handler will // know which
element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...tion drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.get
elementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
...ver"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this
element, drag it to the drop zone and then release the selection to move the
element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specif...
DataTransferItemList.remove() - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this
element's id to the drag payload so the drop handler will // know which
element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...n drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.get
elementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].getasstring(function (s){ console.log("...
..."); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } html <h1>example uses of <code>datatransferitemlist</code> methods and property</h1> <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this
element, drag it to the drop zone and then release the selection to move the
element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } specifications specification ...
Document.title - Web APIs
the content of the <title>
element in an html document).
... for html documents the initial value of document.title is the text content of the <title>
element.
... for xul it's the value of the title attribute of the <xul:window> or other top-level xul
element.
Document.width - Web APIs
see
element.clientwidth.
... returns the width of the <body>
element of the current document in pixels.
... syntax pixels = document.width; example function init() { alert("the width of the document is " + document.width + " pixels."); } alternatives document.body.clientwidth /* width of <body> */ document.document
element.clientwidth /* width of <html> */ window.innerwidth /* window's width */ specification html5 ...
DocumentFragment.querySelectorAll() - Web APIs
the documentfragment.queryselectorall() method returns a nodelist of
elements within the documentfragment (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.
... syntax
elementlist = documentfragment.queryselectorall(selectors); parameters selectors is a domstring containing one or more css selectors separated by commas.
... examples this example returns a list of all div
elements within the documentfragment with a class of either "note" or "alert": var matches = documentfrag.queryselectorall("div.note, div.alert"); specifications specification status comment selectors api level 1the definition of 'documentfragment.queryselectorall' in that specification.
DocumentOrShadowRoot.getSelection() - Web APIs
it is worth noting that currently getselection() doesn't work on the content of <input>
elements in firefox.
... htmlinput
element.setselectionrange()) could be used to work around this.
...document.active
element returns the focused
element.
How to create a DOM tree - Web APIs
ntry="usa"/> <address street="123 west st" city="seattle" state="wa" country="usa"/> <address street="321 south avenue" city="denver" state="co" country="usa"/> </person> </people> the w3c dom api, supported by mozilla, can be used to create an in-memory representation of this document like so: var doc = document.implementation.createdocument("", "", null); var peopleelem = doc.create
element("people"); var personelem1 = doc.create
element("person"); personelem1.setattribute("first-name", "eric"); personelem1.setattribute("middle-initial", "h"); personelem1.setattribute("last-name", "jung"); var addresselem1 = doc.create
element("address"); addresselem1.setattribute("street", "321 south st"); addresselem1.setattribute("city", "denver"); addresselem1.setattribute("state", "co"); addres...
...selem1.setattribute("country", "usa"); personelem1.appendchild(addresselem1); var addresselem2 = doc.create
element("address"); addresselem2.setattribute("street", "123 main st"); addresselem2.setattribute("city", "arlington"); addresselem2.setattribute("state", "ma"); addresselem2.setattribute("country", "usa"); personelem1.appendchild(addresselem2); var personelem2 = doc.create
element("person"); personelem2.setattribute("first-name", "jed"); personelem2.setattribute("last-name", "brown"); var addresselem3 = doc.create
element("address"); addresselem3.setattribute("street", "321 north st"); addresselem3.setattribute("city", "atlanta"); addresselem3.setattribute("state", "ga"); addresselem3.setattribute("country", "usa"); personelem2.appendchild(addresselem3); var addresselem4 = doc.createeleme...
...nt("address"); addresselem4.setattribute("street", "123 west st"); addresselem4.setattribute("city", "seattle"); addresselem4.setattribute("state", "wa"); addresselem4.setattribute("country", "usa"); personelem2.appendchild(addresselem4); var addresselem5 = doc.create
element("address"); addresselem5.setattribute("street", "321 south avenue"); addresselem5.setattribute("city", "denver"); addresselem5.setattribute("state", "co"); addresselem5.setattribute("country", "usa"); personelem2.appendchild(addresselem5); peopleelem.appendchild(personelem1); peopleelem.appendchild(personelem2); doc.appendchild(peopleelem); see also the dom chapter of the xul tutorial.
EffectTiming - Web APIs
the effecttiming dictionary, part of the web animations api, is used by
element.animate(), keyframeeffectreadonly(), and keyframeeffect() to describe timing properties for animation effects.
... fill optional dictates whether the animation's effects should be reflected by the
element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both.
...defaults to 1, and can also take a value of infinity to make it repeat for as long as the
element exists.
Event.currentTarget - Web APIs
it always refers to the
element to which the event handler has been attached, as opposed to event.target, which identifies the
element on which the event occurred and which may be its descendant.
... syntax var currenteventtarget = event.currenttarget; value eventtarget examples event.currenttarget is interesting to use when attaching the same event handler to several
elements.
... function hide(e){ e.currenttarget.style.visibility = 'hidden'; console.log(e.currenttarget); // when this function is used as an event handler: this === e.currenttarget } var ps = document.get
elementsbytagname('p'); for(var i = 0; i < ps.length; i++){ // console: print the clicked <p>
element ps[i].addeventlistener('click', hide, false); } // console: print <body> document.body.addeventlistener('click', hide, false); // click around and make paragraphs disappear note: the value of event.currenttarget is only available while the event is being handled.
Event.preventDefault() - Web APIs
this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").addeventlistener("click", function(event) { document.get
elementbyid("output-box").innerhtml += "sorry!
...first, listen for keypress events: var mytextbox = document.get
elementbyid('my-textbox'); mytextbox.addeventlistener('keypress', checkname, false); the checkname() function, which looks at the pressed key and decides whether to allow it: function checkname(evt) { var charcode = evt.charcode; if (charcode != 0) { if (charcode < 97 || charcode > 122) { evt.preventdefault(); displaywarning( "please use lowercase letters only." + "...
...it's not an elegant function but does the job for the purposes of this example: var warningtimeout; var warningbox = document.create
element("div"); warningbox.classname = "warning"; function displaywarning(msg) { warningbox.innerhtml = msg; if (document.body.contains(warningbox)) { window.cleartimeout(warningtimeout); } else { // insert warningbox after mytextbox mytextbox.parentnode.insertbefore(warningbox, mytextbox.nextsibling); } warningtimeout = window.settimeout(function() { warningbox.parentnode.removechild(warningbox); warningtimeout = -1; }, 2000); } result notes calling preventdefault() during any stage of event fl...
Using Fetch - Web APIs
ample' }; fetch('https://example.com/profile', { method: 'post', // or 'put' headers: { 'content-type': 'application/json', }, body: json.stringify(data), }) .then(response => response.json()) .then(data => { console.log('success:', data); }) .catch((error) => { console.error('error:', error); }); uploading a file files can be uploaded using an html <input type="file" /> input
element, formdata() and fetch().
...sername', 'abc123'); formdata.append('avatar', filefield.files[0]); fetch('https://example.com/profile/avatar', { method: 'put', body: formdata }) .then(response => response.json()) .then(result => { console.log('success:', result); }) .catch(error => { console.error('error:', error); }); uploading multiple files files can be uploaded using an html <input type="file" multiple /> input
element, formdata() and fetch().
... request bodies can be set by passing body parameters: const form = new formdata(document.get
elementbyid('login-form')); fetch('/login', { method: 'post', body: form }); both request and response (and by extension the fetch() function), will try to intelligently determine the content type.
File and Directory Entries API - Web APIs
only for accessing files which are selected by the user in a file <input>
element (see htmlinput
element as well) or when a file or directory is provided to the web site or app using drag and drop.
... the htmlinput
element.webkitentries property lets you access the filesystemfileentry objects for the currently selected files, but only if they are dragged-and-dropped onto the file chooser (bug 1326031).
... if htmlinput
element.webkitdirectory is true, the <input>
element is instead a directory picker, and you get filesystemdirectoryentry objects for each selected directory.
GeolocationCoordinates.longitude - Web APIs
let button = document.get
elementbyid("get-location"); let lattext = document.get
elementbyid("latitude"); let longtext = document.get
elementbyid("longitude"); button.addeventlistener("click", function() { navigator.geolocation.getcurrentposition(function(position) { let lat = position.coords.latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tofixed(2)...
...; }); }); after setting up variables to more conveniently reference the button
element and the two
elements into which the latitude and logitude will be drawn, the event listener is established by calling addeventlistener() on the <button>
element.
...the two <span>
elements are updated to display the corresponding values after being converted to a value with two decimal places.
GlobalEventHandlers.onanimationcancel - Web APIs
syntax var animcancelhandler = target.onanimationcancel; target.onanimationcancel = function value a function to be called when an animationcancel event occurs indicating that a css animation has begun on the target, where the target object is an html
element (html
element), document (document), or window (window).
... function log(msg, event) { let logbox = document.get
elementbyid("log"); logbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the handlecancelevent() function, which is called in response to the animationcancel event, as set up in the html above.
... function handlecancelevent(event) { log("animation canceled", event); }; then we add a method to handle toggle display between "flex" and "none" and establish it as the handler for a click event on the "hide/show" the box button: document.get
elementbyid('togglebox').addeventlistener('click', function() { if (box.style.display == "none") { box.style.display = "flex"; document.get
elementbyid("togglebox").innerhtml = "hide the box"; } else { box.style.display = "none"; document.get
elementbyid("togglebox").innerhtml = "show the box"; } }); toggling the box to display: none has the effect of aborting its animation.
GlobalEventHandlers.onanimationend - Web APIs
syntax var animendhandler = target.onanimationend; target.onanimationend = function value a function to be called when an animationend event occurs indicating that a css animation has begun on the target, where the target object is an html
element (html
element), document (document), or window (window).
... function log(msg, event) { let logbox = document.get
elementbyid("log"); logbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the event handlers for the animationstart and animationend events: let box = document.get
elementbyid("box"); box.onanimationstart = function(event) { ...
... log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.get
elementbyid("play").addeventlistener("click", function(event) { document.get
elementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once.
GlobalEventHandlers.onanimationiteration - Web APIs
syntax var animiterationhandler = target.onanimationiteration; target.onanimationiteration = function value a function to be called when an animationiteration event occurs indicating that a css animation has reached the end of an iteration while running on the target, where the target object is an html
element (html
element), document (document), or window (window).
... var box = document.get
elementbyid("box"); var iterationcounter = 0; box.onanimationiteration = function(event) { box.style.animationplaystate = "paused"; document.get
elementbyid("play").innerhtml = "start iteration #" + (iterationcounter+1); }; this sets up two global variables: box, which references the "box"
element that we're animating, and iterationcounter, which is initially zero, which indicates how many iteratio...
... finally, we set up a handler for a click on the button that runs the animation: document.get
elementbyid("play").addeventlistener("click", function(event) { box.style.animationplaystate = "running"; iterationcounter++; }, false); this sets the box
element's animation-play-state to "running" and increments the iteration counter.
GlobalEventHandlers.onanimationstart - Web APIs
syntax var animstarthandler = target.onanimationstart; target.onanimationstart = function value a function to be called when an animationstart event occurs indicating that a css animation has begun on the target, where the target object is an html
element (html
element), document (document), or window (window).
... function log(msg, event) { let logbox = document.get
elementbyid("log"); logbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the event handlers for the animationstart and animationend events: let box = document.get
elementbyid("box"); box.onanimationstart = function(event) { ...
... log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.get
elementbyid("play").addeventlistener("click", function(event) { document.get
elementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once.
MediaStreamConstraints.video - Web APIs
y></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let video
element = document.get
elementbyid("video"); let log
element = document.get
elementbyid("log"); function log(msg) { log
element.innerhtml += msg + "<br>"; } document.get
elementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => video
element.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, fa...
...lse); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video>
element once the stream is returned.
...y></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let video
element = document.get
elementbyid("video"); let log
element = document.get
elementbyid("log"); function log(msg) { log
element.innerhtml += msg + "<br>"; } document.get
elementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => video
element.srcobject = ...
Media Session API - Web APIs
the mediasession interface lets users control playback of media through user-agent defined interface
elements.
... interaction with these
elements even trigger handlers in the web page, playing the media.
...*/ }); } some user agents disable autoplay for media
elements on mobile devices and require a user gesture to start media.
MouseEvent.pageX - Web APIs
javascript var box = document.queryselector(".box"); var pagex = document.get
elementbyid("x"); var pagey = document.get
elementbyid("y"); function updatedisplay(event) { pagex.innertext = event.pagex; pagey.innertext = event.pagey; } box.addeventlistener("mousemove", updatedisplay, false); box.addeventlistener("mouseenter", updatedisplay, false); box.addeventlistener("mouseleave", updatedisplay, false); the javascript code uses addeventlistener() to register the function up...
... updatedisplay() simply replaces the contents of the <span>
elements meant to contain the x and y coordinates with the values of pagex and pagey.
...it has two <span>
elements, one with the id "x" and one with the id "y".
MutationEvent - Web APIs
dom
elementnamechanged and domattributenamechanged are not supported in firefox (as of version 11), and probably in other browsers as well.
... mutation events list the following is a list of all mutation events, as defined in dom level 3 events specification: domattrmodified domattributenamechanged domcharacterdatamodified dom
elementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument domsubtreemodified usage you can register a listener for mutation events using eventtarget.addeventlistener() as follows:
element.addeventlistener("domnodeinserted", function (event) { // ...
... }, false); the event object is passed to the listener in a mutationevent (see its definition in the specification) for most events, and mutationnameevent for domattributenamechanged and dom
elementnamechanged.
MutationObserver.observe() - Web APIs
syntax mutationobserver.observe(target, options) parameters target a dom node (which may be an
element) within the dom tree to watch for changes, or to be the root of a subtree of nodes to be watched.
... example in this example, we demonstrate how to call the method observe() on an instance of mutationobserver, once it has been set up, passing it a target
element and a mutationobserverinit options object.
... // identify an
element to observe const
elementtoobserve = document.queryselector("#target
elementid"); // create a new instance of `mutationobserver` named `observer`, // passing it a callback function const observer = new mutationobserver(function() { console.log('callback that runs when observer is triggered'); }); // call `observe()` on that mutationobserver instance, // passing it the
element to observe, and the options object observer.observe(
elementtoobserve, {subtree: true, childlist: true}); specifications specification status comment domthe definition of 'mutationobserver.observe()' in that specification.
Node.appendChild() - Web APIs
syntax
element.appendchild(achild) parameters achild the node to append to the given parent node (commonly an
element).
... notes chaining may not work as expected, due to appendchild() returning the child
element: let ablock = document.create
element('block').appendchild( document.create
element('b') ); sets ablock to <b></b> only, which is probably not what you want.
... example // create a new paragraph
element, and append it to the end of the document body let p = document.create
element("p"); document.body.appendchild(p); specifications specification status comment domthe definition of 'node.appendchild()' in that specification.
Node.isSupported() - Web APIs
syntax boolvalue =
element.issupported(feature, version) parameters feature is a domstring containing the name of the feature to test.
... example <div id="doc"> </div> <script> // get an
element and check to see if its supports the dom2 html module.
... var main = document.get
elementbyid('doc'); var output = main.issupported('html', '2.0'); </script> specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'node.issupported()' in that specification.
Node.lastChild - Web APIs
if its parent is an
element, then the child is generally an
element node, a text node, or a comment node.
... it returns null if there are no child
elements.
... syntax var childnode = node.lastchild; example var tr = document.get
elementbyid("row1"); var corner_td = tr.lastchild; specifications specification status comment domthe definition of 'node.lastchild' in that specification.
Node.setUserData() - Web APIs
the node.setuserdata() method allows a user to attach (or remove) data to an
element, without needing to modify the dom.
...html
element.dataset or weakmap can be used instead.
... example var d = document.implementation.createdocument('', 'test', null); d.document
element.setuserdata('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object
element]::[object
element] console.log(d.document
element.getuserdata('key')); // 15 var e = document.importnode(d.document
element, true); // causes handler to be called console.log(e.getuserdata('key')); // null since user data is not copied specifications s...
NodeList - Web APIs
for example, node.childnodes is live: const parent = document.get
elementbyid('parent'); let child_nodes = parent.childnodes; console.log(child_nodes.length); // let's assume "2" parent.appendchild(document.create
element('div')); console.log(child_nodes.length); // outputs "3" static nodelists in other cases, the nodelist is static, where any changes in the dom does not affect the content of the collection.
...(in this case, the keys are numbers starting from 0 and the values are nodes.) nodelist.foreach() executes a provided function once per nodelist
element, passing the
element as an argument to the function.
... example it's possible to loop over the items in a nodelist using a for loop: for (let i = 0; i < mynodelist.length; i++) { let item = mynodelist[i]; } don't use for...in to enumerate the items in nodelists, since they will also enumerate its length and item properties and cause errors if your script assumes it only has to deal with
element objects.
OVR_multiview2 - Web APIs
methods framebuffertexturemultiviewovr() simultaneously renders to multiple
elements of a 2d texture array.
... const gl = document.create
element('canvas').getcontext( 'webgl2', { antialias: false } ); const ext = gl.getextension('ovr_multiview2'); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.draw_framebuffer, fb); const colortex = gl.createtexture(); gl.bindtexture(gl.texture_2d_array, colortex); gl.texstorage3d(gl.texture_2d_array, 1, gl.rgba8, 512, 512, 2); ext.framebuffertexturemultiviewovr(gl.draw_framebuffer, gl.color_attachment0, colortex, 0, 0, 2); const depthstenciltex = gl.createtexture(); gl.bindtexture(gl.texture_2d_array, depthstenciltex); gl.texstorage3d(gl.texture_2d_array, 1, gl.depth32f_stencil8, 512, 512, 2); ext.framebuffertexturemultiviewovr(gl.draw_frameb...
...uffer, gl.depth_stencil_attachment, depthstenciltex, 0, 0, 2); gl.draw
elements(...); // draw will be broadcasted to the layers of colortex and depthstenciltex.
Page Visibility API - Web APIs
dden !== "undefined") { // opera 12.10 and firefox 18 and later support hidden = "hidden"; visibilitychange = "visibilitychange"; } else if (typeof document.mshidden !== "undefined") { hidden = "mshidden"; visibilitychange = "msvisibilitychange"; } else if (typeof document.webkithidden !== "undefined") { hidden = "webkithidden"; visibilitychange = "webkitvisibilitychange"; } var video
element = document.get
elementbyid("video
element"); // if the page is hidden, pause the video; // if the page is shown, play the video function handlevisibilitychange() { if (document[hidden]) { video
element.pause(); } else { video
element.play(); } } // warn if the browser doesn't support addeventlistener or the page visibility api if (typeof document.addeventlistener === "undefined" || hi...
... // this shows the paused video
element.addeventlistener("pause", function(){ document.title = 'paused'; }, false); // when the video plays, set the title.
... video
element.addeventlistener("play", function(){ document.title = 'playing'; }, false); } properties added to the document interface the page visibility api adds the following properties to the document interface: document.hidden read only returns true if the page is in a state considered to be hidden to the user, and false otherwise.
ParentNode.append() - Web APIs
examples appending an
element let parent = document.create
element("div") let p = document.create
element("p") parent.append(p) console.log(parent.childnodes) // nodelist [ <p> ] appending text let parent = document.create
element("div") parent.append("some text") console.log(parent.textcontent) // "some text" appending an
element and text let parent = document.create
element("div") let p = document.create
element("p") par...
... let parent = document.create
element("div") with(parent) { append("foo") } // referenceerror: append is not defined polyfill you can polyfill the append() method in internet explorer 9 and higher with the following code: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/append()/append().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('append')) { return; } object.defineproperty(item, 'append', { configurable: true, enumerable: true, writable: true, value: function...
...argitem : document.createtextnode(string(argitem))); }); this.appendchild(docfrag); } }); }); })([
element.prototype, document.prototype, documentfragment.prototype]); specification specification status comment domthe definition of 'parentnode.append()' in that specification.
Using the Payment Request API - Web APIs
const checkoutbutton = document.get
elementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
... const checkoutbutton = document.get
elementbyid('checkout-button'); checkoutbutton.innertext = "loading..."; if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); request.canmakepayment().then(function(canmakeafastpayment) { if (canmakeafastpayment) { checkoutbutton.innertext = "fast checkout with w3c"; } else { checkoutbutton.innertext =...
... const additionaldetailscontainer = document.get
elementbyid('additional-details-container'); additionaldetailscontainer.style.display = 'block'; window.scrollto(additionaldetailscontainer.getboundingclientrect().x, 0); }).catch(function(error) { // handle error.
RTCDataChannel: message event - Web APIs
examples for a given rtcdatachannel, dc, created for a peer connection using its createdatachannel() method, this code sets up a handler for incoming messages and acts on them by adding the data contained within the message to the current document as a new <p> (paragraph)
element.
... dc.addeventlistener("message", ev => { let newparagraph = document.create
element("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); }, false); lines 2-4 create the new paragraph
element and add the message data to it as a new text node.
... you can also use an rtcdatachannel object's onmessage event handler property to set the event handler: dc.onmessage = ev => { let newparagraph = document.create
element("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'the <code>message</code> event' in that specification.
Float32Array() constructor - JavaScript
once established, you can reference
elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).
... syntax new float32array(); // new in es2017 new float32array(length); new float32array(typedarray); new float32array(object); new float32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_
element bytes, containing zeros.
... examples different ways to create a float32array // from a length var float32 = new float32array(2); float32[0] = 42; console.log(float32[0]); // 42 console.log(float32.length); // 2 console.log(float32.bytes_per_
element); // 4 // from an array var arr = new float32array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new float32array([21, 31]); var y = new float32array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(16); var z = new float32array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var float32 = new float3...
Float64Array() constructor - JavaScript
once established, you can reference
elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).
... syntax new float64array(); // new in es2017 new float64array(length); new float64array(typedarray); new float64array(object); new float64array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_
element bytes, containing zeros.
... examples different ways to create a float64array // from a length var float64 = new float64array(2); float64[0] = 42; console.log(float64[0]); // 42 console.log(float64.length); // 2 console.log(float64.bytes_per_
element); // 8 // from an array var arr = new float64array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new float64array([21, 31]); var y = new float64array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(32); var z = new float64array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var float64 = new float6...
Int16Array() constructor - JavaScript
once established, you can reference
elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).
... syntax new int16array(); // new in es2017 new int16array(length); new int16array(typedarray); new int16array(object); new int16array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_
element bytes, containing zeros.
... examples different ways to create an int16array // from a length var int16 = new int16array(2); int16[0] = 42; console.log(int16[0]); // 42 console.log(int16.length); // 2 console.log(int16.bytes_per_
element); // 2 // from an array var arr = new int16array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new int16array([21, 31]); var y = new int16array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new int16array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var int16 = new int16array(iterab...
Int32Array() constructor - JavaScript
once established, you can reference
elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).
... syntax new int32array(); // new in es2017 new int32array(length); new int32array(typedarray); new int32array(object); new int32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_
element bytes, containing zeros.
... examples different ways to create an int32array // from a length var int32 = new int32array(2); int32[0] = 42; console.log(int32[0]); // 42 console.log(int32.length); // 2 console.log(int32.bytes_per_
element); // 4 // from an array var arr = new int32array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new int32array([21, 31]); var y = new int32array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(16); var z = new int32array(buffer, 0, 4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var int32 = new int32array(itera...
Int8Array() constructor - JavaScript
once established, you can reference
elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).
... syntax new int8array(); // new in es2017 new int8array(length); new int8array(typedarray); new int8array(object); new int8array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of size length multiplied by bytes_per_
element bytes, containing zeros.
... examples different ways to create an int8array // from a length var int8 = new int8array(2); int8[0] = 42; console.log(int8[0]); // 42 console.log(int8.length); // 2 console.log(int8.bytes_per_
element); // 1 // from an array var arr = new int8array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new int8array([21, 31]); var y = new int8array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new int8array(buffer, 1, 4); // from an iterable var iterable = function*(){ yield* [1,2,3]; }(); var int8 = new int8array(iterable); /...
Intl.ListFormat.prototype.formatToParts() - JavaScript
each
element of the resulting array has two properties: type and value.
... the type property may be either "
element", which refers to a value from the list, or "literal" which refers to a linguistic construct.
... examples using formattoparts const fruits = ['apple', 'orange', 'pineapple']; const mylistformat = new intl.listformat('en-gb', { style: 'long', type: 'conjunction' }); console.table(mylistformat.formattoparts(fruits)); // [ // { "type": "
element", "value": "apple" }, // { "type": "literal", "value": ", " }, // { "type": "
element", "value": "orange" }, // { "type": "literal", "value": ", and " }, // { "type": "
element", "value": "pineapple" } // ] specifications specification intl.listformatthe definition of 'formattoparts()' in that specification.
Map.prototype.get() - JavaScript
the get() method returns a specified
element from a map object.
... syntax mymap.get(key) parameters key the key of the
element to return from the map object.
... return value the
element associated with the specified key, or undefined if the key can't be found in the map object.
Map.prototype.has() - JavaScript
the has() method returns a boolean indicating whether an
element with the specified key exists or not.
... syntax mymap.has(key) parameters key the key of the
element to test for presence in the map object.
... return value true if an
element with the specified key exists in the map object; otherwise false.
Math.max() - JavaScript
examples using math.max() math.max(10, 20); // 20 math.max(-10, -20); // -10 math.max(-10, 20); // 20 getting the maximum
element of an array array.reduce() can be used to find the maximum
element in a numeric array, by comparing each value: var arr = [1,2,3]; var max = arr.reduce(function(a, b) { return math.max(a, b); }); the following function uses function.prototype.apply() to get the maximum of an array.
...this should only be used for arrays with relatively few
elements.
... function getmaxofarray(numarray) { return math.max.apply(null, numarray); } the new spread operator is a shorter way of writing the apply solution to get the maximum of an array: var arr = [1, 2, 3]; var max = math.max(...arr); however, both spread (...) and apply will either fail or return the wrong result if the array has too many
elements, because they try to pass the array
elements as function parameters.
Object.freeze() - JavaScript
as an object, an array can be frozen; after doing so, its
elements cannot be altered and no
elements can be added to or removed from the array.
... > object.freeze(1) typeerror: 1 is not an object // es5 code > object.freeze(1) 1 // es2015 code an arraybufferview with
elements will cause a typeerror, as they are views over memory and will definitely cause other possible issues: > object.freeze(new uint8array(0)) // no
elements uint8array [] > object.freeze(new uint8array(1)) // has
elements typeerror: cannot freeze array buffer views with
elements > object.freeze(new dataview(new arraybuffer(32))) // no
elements dataview {} > object.freeze(new float64array(new arr...
...aybuffer(64), 63, 0)) // no
elements float64array [] > object.freeze(new float64array(new arraybuffer(64), 32, 2)) // has
elements typeerror: cannot freeze array buffer views with
elements note that; as the standard three properties (buf.bytelength, buf.byteoffset and buf.buffer) are read-only (as are those of an arraybuffer or sharedarraybuffer), there is no reason for attempting to freeze these properties.
Proxy - JavaScript
const target = {}; const p = new proxy(target, {}); p.a = 37; // operation forwarded to the target console.log(target.a); // 37 // (the operation has been properly forwarded!) note that while this "no-op" works for javascript objects, it does not work for native browser objects like dom
elements.
...; } var person = function(name) { this.name = name; }; var boy = extend(person, function(name, age) { this.age = age; }); boy.prototype.gender = 'm'; var peter = new boy('peter', 13); console.log(peter.gender); // "m" console.log(peter.name); // "peter" console.log(peter.age); // 13 manipulating dom nodes sometimes you want to toggle the attribute or class name of two different
elements.
...ewval) { let oldval = obj[prop]; if (prop === 'selected') { if (oldval) { oldval.setattribute('aria-selected', 'false'); } if (newval) { newval.setattribute('aria-selected', 'true'); } } // the default behavior to store the value obj[prop] = newval; // indicate success return true; } }); let i1 = view.selected = document.get
elementbyid('item-1'); //giving error here, i1 is null console.log(i1.getattribute('aria-selected')); // 'true' let i2 = view.selected = document.get
elementbyid('item-2'); console.log(i1.getattribute('aria-selected')); // 'false' console.log(i2.getattribute('aria-selected')); // 'true' note: even if selected: !null, then giving oldval.setattribute is not a function value correction and an extra p...
Set.prototype.delete() - JavaScript
the delete() method removes the specified
element from a set object.
...no "bar"
element found to be deleted.
...the "foo"
element is no longer present.
Set.prototype.has() - JavaScript
the has() method returns a boolean indicating whether an
element with the specified value exists in a set object or not.
... return value returns true if an
element with the specified value exists in the set object; otherwise false.
... note: technically speaking, has() uses the samevaluezero algorithm to determine whether the given
element is found.
Set.prototype.values() - JavaScript
the values() method returns a new iterator object that contains the values for each
element in the set object in insertion order.
... the keys() method is an alias for this method (for similarity with map objects); it behaves exactly the same and returns values of set
elements.
... syntax myset.values(); return value a new iterator object containing the values for each
element in the given set, in insertion order.
String.prototype.blink() - JavaScript
the blink() method creates a <blink> html
element that causes a string to blink.
...the <blink>
element itself is non-standard and deprecated!
... syntax str.blink() return value a string containing a <blink> html
element.
mask - SVG: Scalable Vector Graphics
the mask attribute is a presentation attribute mainly used to bind a given <mask>
element with the
element the attribute belongs to.
... 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>, <text>, <use> usage notes value see the css property mask default value none animatable yes specifications specificat...
... candidate recommendation extends its usage to html
elements.
requiredExtensions - SVG: Scalable Vector Graphics
if all of the given extensions are supported, then the attribute evaluates to true; otherwise, the current
element and its children are skipped and thus will not be rendered.
... requiredextensions is often used in conjunction with the <switch>
element.
... if the attribute is used in other situations, then it represents a simple switch on the given
element whether to render the
element or not.
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>, <text>, <textpath>, <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.
... systemlanguage is often used in conjunction with the <switch>
element.
... if the attribute is used in other situations, then it represents a simple switch on the given
element whether to render the
element or not.
tabindex - SVG: Scalable Vector Graphics
the tabindex attribute allows you to control whether an
element is focusable and to define the relative order of the
element for the purposes of sequential focus navigation.
... all
elements are using this attribute.
...ns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="15" tabindex="1" /> <circle cx="60" cy="160" r="30" tabindex="3" /> <circle cx="160" cy="60" r="30" tabindex="2" /> <circle cx="160" cy="160" r="60" tabindex="4" /> </svg> usage notes value valid integer default value none animatable no valid integer relative order of the
element for the purposes of sequential focus navigation.
u1 - SVG: Scalable Vector Graphics
the u1 attribute specifies list of unicode characters (refer to the description of the unicode attribute of the <glyph>
element for a description of how to express individual unicode characters) and/or ranges of unicode characters, which identify a set of possible first glyphs in a kerning pair.
... if a given unicode character within the set has multiple corresponding <glyph>
elements (i.e., there are multiple <glyph>
elements with the same unicode attribute value but different glyph-name values), then all such glyphs are included in the set.
... two
elements are using this attribute: <hkern> and <vkern> context notes value [ <character> | <urange> ]# default value none animatable no [ <character> | <urange> ]# this value indicates a comma-separated sequence of unicode characters and/or ranges of unicode characters, which identify a set of possible first glyphs in a kerning pair.
u2 - SVG: Scalable Vector Graphics
the u2 attribute specifies list of unicode characters (refer to the description of the unicode attribute of the <glyph>
element for a description of how to express individual unicode characters) and/or ranges of unicode characters, which identify a set of possible second glyphs in a kerning pair.
... if a given unicode character within the set has multiple corresponding <glyph>
elements (i.e., there are multiple <glyph>
elements with the same unicode attribute value but different glyph-name values), then all such glyphs are included in the set.
... two
elements are using this attribute: <hkern> and <vkern> context notes value [ <character> | <urange> ]# default value none animatable no [ <character> | <urange> ]# this value indicates a comma-separated sequence of unicode characters and/or ranges of unicode characters, which identify a set of possible second glyphs in a kerning pair.
values - SVG: Scalable Vector Graphics
five
elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <fecolormatrix> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, values is a list of values defining the sequence of values over the course of the animation.
... if this attribute is specified, any from, to, and by attribute values set on the
element are ignored.
... fecolormatrix for the <fecolormatrix>
element, values is a list of numbers interpreted differently depending on the value of the type attribute.
x1 - SVG: Scalable Vector Graphics
the x1 attribute is used to specify the first x-coordinate for drawing an svg
element that requires more than one coordinate.
...
elements that only need one coordinate use the x attribute instead.
... two
elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x1 defines the x coordinate of the starting point of the line.
x2 - SVG: Scalable Vector Graphics
the x2 attribute is used to specify the second x-coordinate for drawing an svg
element that requires more than one coordinate.
...
elements that only need one coordinate use the x attribute instead.
... two
elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x2 defines the x coordinate of the ending point of the line.
xml:space - SVG: Scalable Vector Graphics
svg supports the built-in xml xml:space attribute to handle whitespace characters inside
elements.
... child
elements inside an
element may also have an xml:space attribute that overrides the parentʼs one.
... all
elements are using this attribute.
y1 - SVG: Scalable Vector Graphics
the y1 attribute is used to specify the first y-coordinate for drawing an svg
element that requires more than one coordinate.
...
elements that only need one coordinate use the y attribute instead.
... two
elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> line for <line>, y1 defines the y coordinate of the starting point of the line.
y2 - SVG: Scalable Vector Graphics
the y2 attribute is used to specify the second y-coordinate for drawing an svg
element that requires more than one coordinate.
...
elements that only need one coordinate use the y attribute instead.
... two
elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> line for <line>, y2 defines the y coordinate of the ending point of the line.
<animateTransform> - SVG: Scalable Vector Graphics
the animatetransform
element animates a transformation attribute on its target
element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.
... usage context categoriesanimation
elementpermitted contentany number of the following
elements, in any order:descriptive
elements example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attributes global attributes conditional processing attributes » core attributes » animation event attributes » xlink attributes » animation attribute target attributes �...
...� animation timing attributes » animation value attributes » animation addition attributes » externalresourcesrequired specific attributes by from to type dom interface this
element implements the svganimatetransform
element interface.
<circle> - SVG: Scalable Vector Graphics
the <circle> svg
element is an svg basic shape, used to draw circles based on a center point and a radius.
... value type: <number> ; default value: none; animatable: yes note: starting with svg2, cx, cy, and r are geometry properties, meaning those attributes can also be used as css properties for that
element.
...a-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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, 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.
<discard> - SVG: Scalable Vector Graphics
the <discard> svg
element allows authors to specify the time at which particular
elements are to be discarded, thereby reducing the resources required by an svg user agent.
... the <discard>
element may occur wherever the <animate>
element may.
... usage context categoriesanimation
elementpermitted contentany number of the following
elements, in any order:descriptive
elements<script> attributes global attributes conditional processing attributes core attributes aria attributes specific attributes begin href (but note that <discard> has never supported xlink:href) specifications specification status comment svg animations level 2the definition of '<discard>' in that specification.
<ellipse> - SVG: Scalable Vector Graphics
the <ellipse>
element is an svg basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.
... value type: <number> ; default value: none; animatable: yes note: starting with svg2 cx, cy, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that
element.
...a-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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, 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.
<feMerge> - SVG: Scalable Vector Graphics
the <femerge> svg
element allows filter effects to be applied concurrently instead of sequentially.
... usage context categoriesfilter primitive
elementpermitted contentany number of the following
elements, in any order:<femergenode> example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> </svg> result attributes global attributes core...
... attributes presentation attributes filter primitive attributes class style specific attributes none dom interface this
element implements the svgfemerge
element interface.
<filter> - SVG: Scalable Vector Graphics
the <filter> svg
element defines a custom filter effect by grouping atomic filter primitives.
... it is never rendered itself, but must be used by the filter attribute on svg
elements, or the filter css property for svg/html
elements.
... usage context categoriesnonepermitted contentany number of the following
elements, in any order:descriptive
elementsfilter primitive
elements<animate>, <set> attributes global attributes core attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes x y width height filterres filterunits primitiveunits xlink:href dom interface this
element implements the svgfilter
element interface.
<font-face> - SVG: Scalable Vector Graphics
the <font-face> svg
element corresponds to the css @font-face rule.
... usage context categoriesfont
elementpermitted contentany number of descriptive
elements » and at most one <font-face>
element, in any order.
...retch font-size unicode-range units-per-em panose-1 stemv stemh slope cap-height x-height accent-height ascent descent widths bbox ideographic alphabetic mathematical hanging v-ideographic v-alphabetic v-mathematical v-hanging underline-position underline-thickness strikethrough-position strikethrough-thickness overline-position overline-thickness dom interface this
element implements the svgfontface
element interface.
<path> - SVG: Scalable Vector Graphics
the <path> svg
element is the generic
element to define a shape.
... all the basic shapes can be created with a path
element.
...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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, 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
the <polygon>
element defines a closed shape consisting of a set of connected straight line segments.
... for open shapes, see the <polyline>
element.
...a-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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, 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 '<polygon>' in that specification.
<polyline> - SVG: Scalable Vector Graphics
the <polyline> svg
element is an svg basic shape that creates straight lines connecting several points.
...for closed shapes see the <polygon>
element.
...a-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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, 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 '<polyline>' in that specification.
<rect> - SVG: Scalable Vector Graphics
the <rect>
element is a basic svg shape that draws rectangles, defined by their position, width, and height.
... value type: <number> ; default value: none; animatable: yes note: starting with svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that
element.
...a-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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, 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.
<set> - SVG: Scalable Vector Graphics
the svg <set>
element provides a simple means of just setting the value of an attribute for a specified duration.
... note: the <set>
element is non-additive.
...atable: no animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animation attributes most notably: attributename animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document
element event attributes usage notes categoriesanimation
elementpermitted contentany number of the following
elements, in any order:descriptive
elements specifications specification status comment svg animations level 2the definition of '<set>' in that specification.
<stop> - SVG: Scalable Vector Graphics
the svg <stop>
element defines a color and its position to use on a gradient.
... this
element is always a child of a <lineargradient> or <radialgradient>
element.
... value type: <opacity>; default value: 1; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document
element event attributes presentation attributes most notably: color, display, stop-color, stop-opacity, visibility usage notes categoriesgradient
elementpermitted contentany number of the following
elements, in any order:<animate>, <animatecolor>, <set> specifications specification status comment scalable vector graphics (svg) 2the definition of '<stop>' in that specif...
<style> - SVG: Scalable Vector Graphics
the svg <style>
element allows style sheets to be embedded directly within svg content.
... svg's style
element has the same attributes as the corresponding
element in html (see html's <style>
element).
... value type: <string>; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document
element event attributes usage notes categoriesnonepermitted contentany
elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<style>' in that specification.
<textPath> - SVG: Scalable Vector Graphics
to render text along the shape of a <path>, enclose the text in a <textpath>
element that has an href attribute with a reference to the <path>
element.
... html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- to hide the path, it is usually wrapped in a <defs>
element --> <!-- <defs> --> <path id="mypath" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <!-- </defs> --> <text> <textpath href="#mypath"> quick brown fox jumps over the lazy dog.
...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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content
element, text content child
elementpermitted contentcharacter data and any number of the following
elements, in any order:descriptive
elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specifications specification status comment scalable vector graphics (svg) 2the definition of '<textpath>' in that specification.
<tref> - SVG: Scalable Vector Graphics
the textual content for a <text> svg
element can be either character data directly embedded within the <text>
element or the character data content of a referenced
element, where the referencing is specified with a <tref>
element.
... usage context categoriestext content
element, text content child
elementpermitted contentany number of the following
elements, in any order:descriptive
elements<animate>, <animatecolor>, <set> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes xlink:href dom interface this
element implements the svgtref
element interface.
...s="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <text id="referencedtext"> referenced character data </text> </defs> <text x="100" y="100" font-size="45" > inline character data </text> <text x="100" y="200" font-size="45" fill="red" > <tref xlink:href="#referencedtext"/> </text> <!-- show outline of canvas using 'rect'
element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /> </svg> specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<font>' in that specification.
Fills and Strokes - SVG: Scalable Vector Graphics
css can be inserted inline with the
element via the style attribute: <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> or it can be moved to a special style section that you include.
... <defs> stands for definitions, and it is here that you can create
elements that don't appear in the svg directly, but are used by other
elements.
...ndalone="no"?> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <style type="text/css"><![cdata[ #myrect { stroke: black; fill: red; } ]]></style> </defs> <rect x="10" height="180" y="10" width="180" id="myrect"/> </svg> moving styles to an area like this can make it easier to adjust properties on large groups of
elements.
Filter effects - SVG: Scalable Vector Graphics
example filters are defined by <filter>
element, which should be put in the <defs> section of your svg file.
...to apply your created filter on a graphic
element, you set the filter attribute.
...e in="specout" in2="sourcealpha" operator="in" result="specout"/> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litpaint"/> <!-- merge offsetblur + litpaint --> <femerge> <femergenode in="offsetblur"/> <femergenode in="litpaint"/> </femerge> </filter> </defs> <!-- graphic
elements --> <g filter="url(#myfilter)"> <path fill="none" stroke="#d90000" stroke-width="10" d="m50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> <path fill="#d90000" d="m60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> <g fill="#ffffff" stroke="black" font-size="45" font-family="verdana" > <text x="52" y="52">svg</text> </g> </g> </sv...
Blob - Web APIs
having converted the data into an object url, it can be used in a number of ways, including as the value of the <img>
element's src attribute (assuming the data contains an image, of course).
... function typedarraytourl(typedarray, mimetype) { return url.createobjecturl(new blob([typedarray.buffer], {type: mimetype})) } const bytes = new uint8array(59); for(let i = 0; i < 59; i++) { bytes[i] = 32 + i; } const url = typedarraytourl(bytes, 'text/plain'); const link = document.create
element('a'); link.href = url; link.innertext = 'open the array url'; document.body.appendchild(link); result click the link in the example to see the browser decode the object url.
Body.json() - Web APIs
const mylist = document.queryselector('ul'); const myrequest = new request('products.json'); fetch(myrequest) .then(response => response.json()) .then(data => { for (const product of data.products) { let listitem = document.create
element('li'); listitem.appendchild( document.create
element('strong') ).textcontent = product.name; listitem.append( ` can be found in ${ product.location }.
... cost: ` ); listitem.appendchild( document.create
element('strong') ).textcontent = `£${product.price}`; mylist.appendchild(listitem); } }) .catch(console.error); specifications specification status comment fetchthe definition of 'body.json()' in that specification.
Body.text() - Web APIs
example in our fetch text example (run fetch text live), we have an <article>
element and three links (stored in the mylinks array.) first, we loop through all of these and give each one an onclick event handler so that the getdata() function is run — with the link's data-page identifier passed to it as an argument — when one of the links is clicked.
...when the fetch is successful, we read a usvstring (text) object out of the response using text(), then set the innerhtml of the <article>
element equal to the text object.
CSSStyleDeclaration.cssText - Web APIs
the csstext property of the cssstyledeclaration interface returns or sets the text of the
element's inline style declaration only.
... example <span id="s1" style="color: red;"> some text </span> <script> var elem = document.get
elementbyid("s1"); alert(elem.style.csstext); // "color: red;" </script> specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration: csstext' in that specification.
CSSStyleSheet.insertRule() - Web APIs
mystyle.insertrule('#blanc { color: white }', 0); function to add a stylesheet rule /** * add a stylesheet rule to the document (it may be better practice * to dynamically change classes, so style information can be kept in * genuine stylesheets and avoid adding extra
elements to the dom).
...param {array} rules accepts an array of json-encoded declarations * @example addstylesheetrules([ ['h2', // also accepts a second argument as an array of arrays instead ['color', 'red'], ['background-color', 'green', true] // 'true' for !important rules ], ['.myclass', ['background-color', 'yellow'] ] ]); */ function addstylesheetrules (rules) { var styleel = document.create
element('style'); // append <style>
element to <head> document.head.appendchild(styleel); // grab style
element's sheet var stylesheet = styleel.sheet; for (var i = 0; i < rules.length; i++) { var j = 1, rule = rules[i], selector = rule[0], propstr = ''; // if the second argument of a rule is an array of arrays, correct our variables.
CSS Object Model (CSSOM) - Web APIs
event caretposition css csscharsetrule cssconditionrule csscounterstylerule cssfontfacerule cssfontfeaturevaluesmap cssfontfeaturevaluesrule cssgroupingrule cssimportrule csskeyframerule csskeyframesrule cssmarginrule cssmediarule cssnamespacerule csspagerule cssrule cssrulelist cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule
elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window,
element, html
element, htmlimage
element, range, mouseevent, and svg
element...
...positionvalue cssrotate cssscale cssskew cssskewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of
elements (it needs some updating as it was made in the dhtml/ajax era).
CSS Typed Object Model API - Web APIs
this not only simplifies css manipulation, but also lessens the negative impact on performance as compared to html
element.style.
... cssunparsedvalue.foreach() method executing a provided function once for each
element of the cssunparsedvalue.
CanvasPattern.setTransform() - Web APIs
html <canvas id="canvas"></canvas> <svg id="svg1"></svg> javascript var canvas = document.get
elementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.get
elementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.f...
...div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.get
elementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.get
elementbyid('code'); var reset = document.get
elementbyid('reset'); var edit = document.get
elementbyid('edit'); var code = textarea.value; var svg1 = document.get
elementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); }...
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript // define canvas and context const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // define the points as {x, y} let start = { x: 50, y: 20 }; let cp1 = { x: 230, y: 30 }; let cp2 = { x: 150, y: 80 }; let end = { x: 250, y: 100 }; // cubic bézier curve ctx.beginpath(); ctx.moveto(start.x, start.y); ctx.beziercurveto(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); ctx.stroke(); // start and end points ctx.fill...
... const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.clip() - Web APIs
const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100, 75, 50, 0, math.pi * 2); ctx.clip(); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result specifying a path and a fillrule this example saves two rectangles to...
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.
CanvasRenderingContext2D.closePath() - Web APIs
const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 140); // move pen to bottom-left corner ctx.lineto(120, 10); // line to top corner ctx.lineto(220, 140); // line to bottom-right corner ctx.closepath(); // line to bottom-left corner ctx.stroke(); result closing just one sub-path this example draws a smiley face consisting of three disconnected s...
... const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(240, 20, 40, 0, math.pi); ctx.moveto(100, 20); ctx.arc(60, 20, 40, 0, math.pi); ctx.moveto(215, 80); ctx.arc(150, 80, 65, 0, math.pi); ctx.closepath(); ctx.linewidth = 6; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.closepath' in that specification.
CanvasRenderingContext2D.createImageData() - Web APIs
const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 50); console.log(imagedata); // imagedata { width: 100, height: 50, data: uint8clampedarray[20000] } filling a blank imagedata object this example creates and fills a new imagedata object with purple pixels.
... const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i += 4) { // modify pixel data imagedata.data[i + 0] = 190; // r value imagedata.data[i + 1] = 0; // g value imagedata.data[i + 2] = 210; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result more examples for more examples using createimagedata() and...
CanvasRenderingContext2D.direction - Web APIs
"inherit" the text direction is inherited from the <canvas>
element or the document as appropriate.
... html <canvas id="canvas"></canvas> javascript var canvas = document.get
elementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hi!', 150, 50); ctx.direction = 'rtl'; ctx.filltext('hi!', 150, 130); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.direction' in that specification.
CanvasRenderingContext2D.ellipse() - Web APIs
html <canvas id="canvas" width="200" height="200"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with varying pro...
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'red'; ctx.beginpath(); ctx.ellipse(60, 75, 50, 30, math.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150, 75, 50, 30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.
CanvasRenderingContext2D.fill() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('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.get
elementbyid('canvas'); const ctx = canvas.getcontext('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 'canvasrenderingcontext2d.fill' in that specification.
CanvasRenderingContext2D.fillStyle - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, each having a different fill color.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.
CanvasRenderingContext2D.fillText() - Web APIs
const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90); this code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context.
... html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90, 140); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filltext' in that specification.
CanvasRenderingContext2D.getLineDash() - Web APIs
if the number, when setting the
elements, is odd, the
elements of the array get copied and concatenated.
... const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('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 'canvasrenderingcontext2d.getlinedash' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i =...
CanvasRenderingContext2D.isPointInPath() - Web APIs
html <canvas id="canvas"></canvas> <p>in path: <code id="result">false</code></p> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); const result = document.get
elementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.fill(); result.innertext = ctx.ispointinpath(30, 70); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in a circular path2d path.
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circle const circle = new path2d(); circle.arc(150, 75, 50, 0, 2 * math.pi); ctx.fillstyle = 'red'; ctx.fill(circle); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specifications specification status comment html living standardthe definition of 'canvasre...
CanvasRenderingContext2D.isPointInStroke() - Web APIs
html <canvas id="canvas"></canvas> <p>in stroke: <code id="result">false</code></p> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); const result = document.get
elementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.stroke(); result.innertext = ctx.ispointinstroke(50, 10); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical path2d path.
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create ellipse const ellipse = new path2d(); ellipse.ellipse(150, 75, 40, 60, math.pi * .25, 0, 2 * math.pi); ctx.linewidth = 25; ctx.strokestyle = 'red'; ctx.fill(ellipse); ctx.stroke(ellipse); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); resu...
CanvasRenderingContext2D.lineCap - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 20); ctx.linewidth = 15; ctx.linecap = 'round'; ctx.lineto(100, 100); ctx.stroke(); result comparison of line caps in this example three lines are drawn, each with a different value for the linecap property.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); const linecap = ['butt', 'round', 'square']; // draw guides ctx.strokestyle = '#09f'; ctx.beginpath(); ctx.moveto(10, 10); ctx.lineto(140, 10); ctx.moveto(10, 140); ctx.lineto(140, 140); ctx.stroke(); // draw lines ctx.strokestyle = 'black'; for (let i = 0; i < linecap.length; i++) { ctx.linewidth = 15; ctx.linecap = linecap[i]; ctx.begi...
CanvasRenderingContext2D.lineDashOffset - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('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.get
elementbyid('canvas'); const ctx = canvas.getcontext('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 'canvasrenderingcontext2d.lin...
CanvasRenderingContext2D.lineJoin - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 20; ctx.linejoin = 'round'; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(190, 100); ctx.lineto(280, 20); ctx.lineto(280, 150); ctx.stroke(); result comparison of line joins the example below draws three different paths, demonstrating each of the three linejoin options.
... <canvas id="canvas" width="150" height="150"></canvas> var ctx = document.get
elementbyid('canvas').getcontext('2d'); var linejoin = ['round', 'bevel', 'miter']; ctx.linewidth = 10; for (let i = 0; i < linejoin.length; i++) { ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(-5, 5 + i * 40); ctx.lineto(35, 45 + i * 40); ctx.lineto(75, 5 + i * 40); ctx.lineto(115, 45 + i * 40); ctx.lineto(155, 5 + i * 40); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linejoin' in that specification.
CanvasRenderingContext2D.lineTo() - Web APIs
const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); // start a new path ctx.moveto(30, 50); // move the pen to (30, 50) ctx.lineto(150, 100); // draw a line to (150, 100) ctx.stroke(); // render the path result drawing connected lines each call of lineto() (and similar methods) automatically adds to the current sub-path, which means that all the lines wil...
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.moveto(90, 130); ctx.lineto(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(210, 130); ctx.linewidth = 15; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.
CanvasRenderingContext2D.measureText() - Web APIs
example given this <canvas>
element: <canvas id="canvas"></canvas> ...
... you can get a textmetrics object using the following code: const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); let text = ctx.measuretext('hello world'); console.log(text.width); // 56; specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.measuretext' in that specification.
CanvasRenderingContext2D.putImageData() - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.get
elementbyid('canvas'); var ctx = canvas.getcontext('2d'); function putimagedata(ctx, imagedata, dx, dy, dirtyx, dirtyy, dirtywidth, dirtyheight) { var data = imagedata.data; var height = imagedata.height; var width = imagedata.width; dirtyx = dirtyx || 0; dirtyy = dirtyy || 0; dirtywidth = dirtywidth !== undefined?
... javascript const canvas = document.create
element("canvas"); canvas.width = 1; canvas.height = 1; const context = canvas.getcontext("2d"); const imgdata = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels = imgdata.data; pixels[0 + 0] = 1; pixels[0 + 1] = 127; pixels[0 + 2] = 255; pixels[0 + 3] = 1; console.log("before:", pixels); context.putimagedata(imgdata, 0, 0); const imgdata2 = context.getimagedata(0, 0, canvas.width, c...
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // quadratic bézier curve ctx.beginpath(); ctx.moveto(50, 20); ctx.quadraticcurveto(230, 30, 50, 100); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(50, 20, 5, 0, 2 * math.pi); // start point ctx.arc(50, 100, 5, 0, 2 * math.pi); // end point ctx.fill(); // control point ctx.fillstyle = 'red'; ctx.b...
... const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 110); ctx.quadraticcurveto(230, 150, 250, 20); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.quadraticcurveto' in that specification.
CanvasRenderingContext2D.resetTransform() - Web APIs
const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
... html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // skewed rectangles ctx.transform(1, 0, 1.7, 1, 0, 0); ctx.fillstyle = 'gray'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); // non-skewed rectangles ctx.resettransform(); ctx.fillstyle = 'red'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); result the skewed rectangles are gray, and the non-skewed rectangles are red.
CanvasRenderingContext2D.rotate() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matrix ctx.s...
... const canvas = document.get
elementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red.
<feMergeNode> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following
elements, in any order:<animate>, <set> example <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur in="sourcegraphic" stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> <rec...
...t x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green;" /> </svg> result attributes global attributes core attributes » specific attributes in dom interface this
element implements the svgfemergenode
element interface.
<feSpecularLighting> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive
elementpermitted contentexactly one light source
element first and any number of descriptive
elements in any order.
... attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale specularconstant specularexponent kernelunitlength dom interface this
element implements the svgfespecularlighting
element interface.
<font-face-format> - SVG: Scalable Vector Graphics
the <font-face-format> svg
element describes the type of font referenced by its parent <font-face-uri>.
... usage context categoriesfont
elementpermitted contentempty attributes global attributes core attributes specific attributes string dom interface this
element implements the svgfontfaceformat
element interface.
<font-face-name> - SVG: Scalable Vector Graphics
the <font-face-name>
element points to a locally installed copy of this font, identified by its name.
... usage context categoriesnonepermitted contentempty attributes global attributes core attributes » specific attributes name dom interface this
element implements the svgfontfacename
element interface.
<font-face-src> - SVG: Scalable Vector Graphics
the <font-face-src> svg
element corresponds to the src descriptor in css @font-face rules.
... usage context categoriesfont
elementpermitted contentone or more of the following
elements, in any order:<font-face-name>, <font-face-uri> attributes global attributes core attributes specific attributes none dom interface this
element implements the svgfontfacesrc
element interface.
<font-face-uri> - SVG: Scalable Vector Graphics
the <font-face-uri> svg
element points to a remote definition of the current font.
... usage context categoriesfont
elementpermitted contentany number of the following
elements, in any order:<font-face-format> attributes global attributes core attributes xlink attributes specific attributes xlink:href dom interface this
element implements the svgfontfaceuri
element interface.
<font> - SVG: Scalable Vector Graphics
the <font> svg
element defines a font to be used for text layout.
... usage context categoriesfont
elementpermitted contentany number of the following
elements, in any order:descriptive
elements<font-face>, <glyph>, <hkern>, <missing-glyph>, <vkern> attributes global attributes core attributes presentation attributes class style externalresourcesrequired specific attributes horiz-origin-x horiz-origin-y horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this
element implements the svgfont
element interface.
<glyph> - SVG: Scalable Vector Graphics
usage context categoriestext 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>, <text>, <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 svgglyph
element 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#glyph
element --> <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,100z"></...
<glyphRef> - SVG: Scalable Vector Graphics
the glyphref
element provides a single possible glyph to the referencing <altglyph> substitution.
... usage context categoriestext content
elementpermitted contentempty attributes global attributes core attributes » presentation attributes » xlink attributes » class style specific attributes x y dx dy glyphref format xlink:href dom interface this
element implements the svgglyphref
element interface.
<hatchpath> - SVG: Scalable Vector Graphics
the <hatchpath> svg
element defines a hatch path used by the <hatch>
element.
... usage context categoriesnonepermitted contentany number of the following
elements, in any order:animation
elementsdescriptive
elements<script>, <style> attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes d offset dom interface this
element implements the svghatchpath
element interface.
<hkern> - SVG: Scalable Vector Graphics
the <hkern> svg
element allows to fine-tweak the horizontal distance between two glyphs.
... usage context categoriesfont
elementpermitted contentempty attributes global attributes core attributes specific attributes u1 g1 u2 g2 k dom interface this
element implements the svghkern
element interface.
<line> - SVG: Scalable Vector Graphics
the <line>
element is an svg basic shape used to create a line connecting two points.
...a-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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, 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
the <marker>
element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given <path>, <line>, <polyline> or <polygon>
element.
...ria-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-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, 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>, <text>, <view> specifications specification status co...
<mask> - SVG: Scalable Vector Graphics
the <mask>
element defines an alpha mask for compositing the current object into the background.
...s most notably: requiredextensions, 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 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>, <text>, <view> specifications specification status co...
<missing-glyph> - SVG: Scalable Vector Graphics
the <missing-glyph> svg
element's content is rendered, if for a given character the font doesn't define an appropriate <glyph>.
... usage context categoriesnonepermitted 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>, <text>, <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 dom interface this
element implements the svgmissingglyph
element interface.