Search completed in 1.92 seconds.
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 19 more matches
Video and Audio APIs - Learn web development
ng two addeventlistener() lines below the previous ones: rwd.addeventlistener('click', mediabackward); fwd.addeventlistener('click', mediaforward); now on to the event handler functions — add the following code below your previous functions to define mediabackward() and mediaforward(): let intervalfwd; let intervalrwd; function mediabackward() { clearinterval(intervalfwd); fwd.
classlist.remove('active'); if(rwd.
classlist.contains('active')) { rwd.
classlist.remove('active'); clearinterval(intervalrwd); media.play(); } else { rwd.
classlist.add('active'); media.pause(); intervalrwd = setinterval(windbackward, 200); } } function mediaforward() { clearinterval(intervalrwd); rwd.
classlist.remove('active'); if(fwd.
classlist.contains('active')) { ...
... fwd.
classlist.remove('active'); clearinterval(intervalfwd); media.play(); } else { fwd.
classlist.add('active'); media.pause(); intervalfwd = setinterval(windforward, 200); } } you'll notice that first we initialize two variables — intervalfwd and intervalrwd — you'll find out what they are for later on.
...the
classlist is a rather handy property that exists on every element — it contains a list of all the classes set on the element, as well as methods for adding/removing classes, etc.
...And 5 more matches
How to build custom form controls - Learn web development
window.addeventlistener("load", function () { document.body.
classlist.remove("no-widget"); document.body.
classlist.add("widget"); }); without js with js check out the source code note: if you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the <select> elements, and to dynamically add the dom tree representing the custom control...
...the features we plan to use are the following:
classlist addeventlistener() foreach queryselector() and queryselectorall() beyond the availability of those specific features, there is still one issue remaining before starting.
... // this function will be used each time we want to deactivate a custom control // it takes one parameter // select : the dom node with the `select` class to deactivate function deactivateselect(select) { // if the control is not active there is nothing to do if (!select.
classlist.contains('active')) return; // we need to get the list of options for the custom control var optlist = select.queryselector('.optlist'); // we close the list of option optlist.
classlist.add('hidden'); // and we deactivate the custom control itself select.
classlist.remove('active'); } // this function will be used each time the user wants to (de)activate the control // it takes two...
...And 3 more matches
DOMTokenList - Web APIs
such a set is returned by element.
classlist, htmllinkelement.rellist, htmlanchorelement.rellist, htmlareaelement.rellist, htmliframeelement.sandbox, or htmloutputelement.htmlfor.
... 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.
... first, the html: <p class="a b c"></p> now the javascript: let para = document.queryselector("p"); let classes = para.
classlist; para.
classlist.add("d"); para.textcontent = `paragraph
classlist is "${classes}"`; the output looks like this: trimming of whitespace and removal of duplicates methods that modify the domtokenlist (such as domtokenlist.add()) automatically trim any excess whitespace and remove duplicate values from the list.
... for example: <span class=" d d e f"></span> let span = document.queryselector("span"); let classes = span.
classlist; span.
classlist.add("x"); span.textcontent = `span
classlist is "${classes}"`; the output looks like this: specifications specification status comment domthe definition of 'domtokenlist' in that specification.
SubtleCrypto.verify() - Web APIs
*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.
classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.
classlist.add(result ?
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsa-pss .signature-value"); signaturevalue.
classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "rsa-pss", saltlength: 32, }, publickey, signature, encoded ); signaturevalue.
classlist.add(result ?
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".ecdsa .signature-value"); signaturevalue.
classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "ecdsa", hash: {name: "sha-384"}, }, publickey, signature, encoded ); signaturevalue.
classlist.add(result ?
...*/ async function verifymessage(key) { const signaturevalue = document.queryselector(".hmac .signature-value"); signaturevalue.
classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "hmac", key, signature, encoded ); signaturevalue.
classlist.add(result ?
Example 4 - Learn web development
elect .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.
classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.
classlist.add('hidden'); select.
classlist.remove('active'); } function activeselect(select, selectlist) { if (select.
classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.
classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.querysel...
...ector('.optlist'); optlist.
classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.
classlist.remove('highlight'); }); option.
classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.a...
...ddeventlistener("load", function () { var form = document.queryselector('form'); form.
classlist.remove("no-widget"); form.
classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); ...
Example 5 - Learn web development
elect .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.
classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.
classlist.add('hidden'); select.
classlist.remove('active'); } function activeselect(select, selectlist) { if (select.
classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.
classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.querysel...
...ector('.optlist'); optlist.
classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.
classlist.remove('highlight'); }); option.
classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.setattribute('aria-selected', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var ...
...nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.
classlist.remove("no-widget"); form.
classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('mouseover', function () { highlightoption(s...
DOMTokenList.remove() - Web APIs
return value undefined examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.
classlist; classes.remove("c"); span.textcontent = classes; the output looks like this: to remove multiple classes at once, you can supply multiple tokens.
... the order you supply the tokens doesn't have to match the order they appear in the list: let span2 = document.getelementsbytagname("span")[0] let classes2 = span.
classlist; classes2.remove("c", "b"); span2.textcontent = classes; specifications specification status comment domthe definition of 'remove()' in that specification.
DOMTokenList.replace() - Web APIs
examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.
classlist; let result = classes.replace("c", "z"); console.log(result); if (result) { span.textcontent = classes; } else { span.textcontent = 'token not replaced successfully'; } the output looks like this: polyfill the following polyfill will add the replace method to the domtokenlist class.
...to use with earlier versions of ie, refer to the polyfill at element.
classlist#polyfill domtokenlist.prototype.replace = function (a, b) { if (this.contains(a)) { this.add(b); this.remove(a); return true; } return false; } specifications specification status comment domthe definition of 'replace()' in that specification.
animation - CSS: Cascading Style Sheets
inear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn, type) { btn.
classlist.remove('play', 'pause', 'restart'); btn.
classlist.add(type); btn.title = type.touppercase(type); } function playpause (i) { var btn = button[i]; var anim = animation[i]; if (btn.
classlist.contains('play')) { anim.style.animationplaystate = 'running'; togglebutton(btn, 'pause'); } else if (btn.
classlist.contains('pause')) { anim.style.animationplays...
...tate = 'paused'; togglebutton(btn, 'play'); } else { anim.
classlist.remove('a' + (i + 1)); settimeout(function () { togglebutton(btn, i === 0 ?
... 'play' : 'pause'); anim.style.animationplaystate = ''; anim.
classlist.add('a' + (i + 1)); }, 100) } } animation.foreach(function (node, index) { node.addeventlistener('animationstart', function () { togglebutton(button[index], 'pause'); }); node.addeventlistener('animationend', function () { togglebutton(button[index], 'restart'); }); }); button.foreach(function (btn, index) { btn.addeventlistener('click', function () { playpause(index); }); }); }) a description of which properties are animatable is available; it's worth noting that this description is also valid for css transitions.
Example 3 - Learn web development
elect .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.
classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.
classlist.add('hidden'); select.
classlist.remove('active'); } function activeselect(select, selectlist) { if (select.
classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.
classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.querysel...
...ector('.optlist'); optlist.
classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.
classlist.remove('highlight'); }); option.
classlist.add('highlight'); }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.
classlist.remove("no-widget"); form.
classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', fun...
L20n Javascript API
ctx.localize(['hello', 'new'], function(l10n) { var node = document.queryselector('[data-l10n-id=hello]'); node.textcontent = l10n.entities.hello.value; node.
classlist.remove('hidden'); }); ctx.registerlocales(defaultlocale: string?, availablelocales: array<string>?) register the default locale of the context instance, as well as all other locales available to the context instance before the language negotiation.
... ctx.localize(['hello', 'about'], function(l10n) { var node = document.queryselector('[data-l10n-id=hello]'); node.textcontent = l10n.entities.hello.value; node.
classlist.remove('hidden'); }); the callback becomes bound to the entities on the ids list.
DOMTokenList.add() - Web APIs
return value undefined examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.
classlist; classes.add("d"); span.textcontent = classes; the output looks like this: you can add multiple tokens as well: span.
classlist.add("d", "e", "f"); specifications specification status comment domthe definition of 'add()' in that specification.
DOMTokenList.contains() - Web APIs
examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.
classlist; let result = classes.contains("c"); if (result) { span.textcontent = "the
classlist contains 'c'"; } else { span.textcontent = "the
classlist does not contain 'c'"; } the output looks like this: specifications specification status comment domthe definition of 'contains()' in that specification.
DOMTokenList.entries() - Web APIs
examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.
classlist; let iterator = classes.entries(); for (let value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'entries() (as iterable<node>)' in that specification.
DOMTokenList.forEach() - Web APIs
example in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist.
... html <span class="a b c"></span> javascript let span = document.queryselector("span"); let classes = span.
classlist; let iterator = classes.values(); classes.foreach( function(value, key, listobj) { span.textcontent += `${value} ${key}/${this} ++ `; }, "arg" ); result polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.domtokenlist && !domtokenlist.prototype.foreach) { domtokenlist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } specifications ...
DOMTokenList.item() - Web APIs
examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.
classlist; let item = classes.item(classes.length-1); span.textcontent = item; the output looks like this: specifications specification status comment domthe definition of 'item()' in that specification.
DOMTokenList.keys() - Web APIs
examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist.
... first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.
classlist; var iterator = classes.keys(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'keys() (as iterable<node>)' in that specification.
DOMTokenList.length - Web APIs
examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist, then write the length of the list to the <span>'s node.textcontent.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.
classlist; let length = classes.length; span.textcontent = `
classlist length = ${length}`; the output looks like this: specifications specification status comment domthe definition of 'length' in that specification.
DOMTokenList.toggle() - Web APIs
examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist.
... first, the html: <span class="a b">
classlist is 'a b'</span> now the javascript: let span = document.queryselector("span"); let classes = span.
classlist; span.addeventlistener('click', function() { let result = classes.toggle("c"); if (result) { span.textcontent = `'c' added;
classlist is now "${classes}".`; } else { span.textcontent = `'c' removed;
classlist is now "${classes}".`; } }) the output looks like this: specifications specification status comment domthe definition of 'toggle()' in that specification.
DOMTokenList.value - Web APIs
syntax tokenlist.value; value a domstring examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist, then write the value of the list to the <span>'s node.textcontent.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.
classlist; span.textcontent = classes.value; the output looks like this: specifications specification status comment domthe definition of 'value' in that specification.
DOMTokenList.values() - Web APIs
examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.
classlist.
... first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.
classlist; var iterator = classes.values(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'values() (as iterable<node>)' in that specification.
HTMLElement: animationcancel event - Web APIs
imationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.
classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.
classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.
...
classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationend event - Web APIs
imationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.
classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.
classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.
...
classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationiteration event - Web APIs
imationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.
classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.
classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.
...
classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationstart event - Web APIs
imationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.
classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.
classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.
...
classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
Index - Web APIs
such a set is returned by element.
classlist, htmllinkelement.rellist, htmlanchorelement.rellist, htmlareaelement.rellist, htmliframeelement.sandbox, or htmloutputelement.htmlfor.
... 1101 element.
classlist api, dom, element, property, read-only, reference the element.
classlist is a read-only property that returns a live domtokenlist collection of the class attributes of the element.
SubtleCrypto.deriveBits() - Web APIs
async function derivesharedsecret(privatekey, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.
classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.
classlist.remove("fade-in"); }); sharedsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely con...
...dow.crypto.getrandomvalues(new uint8array(16)); const derivedbits = await window.crypto.subtle.derivebits( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, 256 ); const buffer = new uint8array(derivedbits, 0, 5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bits-value"); derivedbitsvalue.
classlist.add("fade-in"); derivedbitsvalue.addeventlistener("animationend", () => { derivedbitsvalue.
classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-button"); derivebitsbutton.addeventlistener("click", () => { getderivedbits(); }); specifications ...
transition-timing-function - CSS: Cascading Style Sheets
-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].
classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransition, 10000); .ease { transition-timing-function: ease; } .easein { transition-timing-function: ease-in; } .easeout { transition-timing-function: ease-out; } .easeinout { transition-timing-function: ease-in-out; } .linear { transition-timing-function: linear; } .cb { transition-timing-function: cubic-bezie...
...on-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].
classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransition, 10000); .jump-start { transition-timing-function: steps(5, jump-start); } .jump-end { transition-timing-function: steps(5, jump-end); } .jump-none { transition-timing-function: steps(5, jump-none); } .jump-both { transition-timing-function: steps(5, jump-both); } .step-start { transition-timing-function...
Example 2 - Learn web development
4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.
classlist.remove("no-widget"); form.
classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden">...
Adding a new event
define event class name you need to add an event class name in event
classlist.h.
Performance best practices for Firefox front-end engineers
here’s a simple example, cribbed from this blog post by paul rouget: div1.style.margin = "200px"; // line 1 var height1 = div1.clientheight; // line 2 div2.
classlist.add("foobar"); // line 3 var height2 = div2.clientheight; // line 4 dosomething(height1, height2); // line 5 at line 1, we’re setting some style information on a dom node that’s going to result in a reflow - but (at just line 1) it’s okay, because that reflow will happen after the style calculation.
DOM allocation example - Firefox Developer Tools
it just contains a script that creates a large number of dom nodes: var toolbarbuttoncount = 20; var toolbarcount = 200; function getrandomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function createtoolbarbutton() { var toolbarbutton = document.createelement("span"); toolbarbutton.
classlist.add("toolbarbutton"); // stop spidermonkey from sharing instances toolbarbutton[getrandomint(0,5000)] = "foo"; return toolbarbutton; } function createtoolbar() { var toolbar = document.createelement("div"); // stop spidermonkey from sharing instances toolbar[getrandomint(0,5000)] = "foo"; for (var i = 0; i < toolbarbuttoncount; i++) { var toolbarbutton = createtoolbarbutton(); ...
Animation inspector example: CSS transitions - Firefox Developer Tools
arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.
classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "selected"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { selected.removeattribute("id"); } } document.addeventlistener("click", toggleselection); ...
Ambient Light Events - Web APIs
example if ('ondevicelight' in window) { window.addeventlistener('devicelight', function(event) { var body = document.queryselector('body'); if (event.value < 50) { body.
classlist.add('darklight'); body.
classlist.remove('brightlight'); } else { body.
classlist.add('brightlight'); body.
classlist.remove('darklight'); } }); } else { console.log('devicelight event not supported'); } specifications specification status comment ambient light sensorthe definition of 'ambient light events' in that specification.
Animation.startTime - Web APIs
*/ function addcat(){ var newcat = document.createelement("div"); newcat.
classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat = addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer = newcat.animate(keyframes, timing); // set the animation's start time to be the same as the original .cat#withwaapi newanimationplaye...
Basic animations - Web APIs
/ 2, h / 2, 400, 4, 4), anima() } function anima() { c.fillstyle = "rgba(0,0,0,0.11)", c.fillrect(0, 0, cc.width, cc.height), fa.foreach(t => t.put()), s.draw(), document.getelementbyid("time").innertext = tmz(), settimeout(() => { requestanimationframe(anima) }, fw) } function emit(t) { key.keydown(t) } function touch(t) { t.
classlist.toggle("off"), document.getelementsbyclassname("keypress")[0].
classlist.toggle("hide") } var t = new date + "", d = void 0, cc = document.getelementsbytagname("canvas")[0], c = cc.getcontext("2d"); key = {}, key.keydown = function (t) { var e = document.createevent("keyboardevent"); object.defineproperty(e, "keycode", { get: function...
Element: dblclick event - Web APIs
javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.
classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui even...
Element.getElementsByClassName() - Web APIs
var matches = element.getelementsbyclassname('colorbox'); for (var i=0; i<matches.length; i++) { matches[i].
classlist.remove('colorbox'); matches.item(i).
classlist.add('hueframe'); } instead, use another method, such as: var matches = element.getelementsbyclassname('colorbox'); while (matches.length > 0) { matches.item(0).
classlist.add('hueframe'); matches[0].
classlist.remove('colorbox'); } this code finds descendant elements with the "colorbox" class, adds the class "hueframe", by calling item(0), th...
Element - Web APIs
element.
classlist read only returns a domtokenlist containing the list of class attributes.
Using files from web applications - Web APIs
function handlefiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; if (!file.type.startswith('image/')){ continue } const img = document.createelement("img"); img.
classlist.add("obj"); img.file = file; preview.appendchild(img); // assuming that "preview" is the div output where the content will be displayed.
FontFace.FontFace() - Web APIs
style weight: weight stretch: stretch unicoderange: unicode range variant: variant featuresettings: feature settings example async function loadfonts() { const font = new fontface('myfont', 'url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with css class document.body.
classlist.add('fonts-loaded'); } specifications specification status comment css font loading module level 3the definition of 'fontface constructor' in that specification.
GlobalEventHandlers.oncontextmenu - Web APIs
rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.
classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.
classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'); window.oncontextmenu = pause; window.onpointerdown = play; result specifications specification status comment html living standardthe ...
GlobalEventHandlers.onmouseup - Web APIs
ht: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.
classlist.add('depressed'); } function release() { toast.
classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown = depress; document.onmouseup = release; result specification specification status comment html living standardthe definition of 'onmouseup' in that specification.
HTMLMediaElement.play() - Web APIs
example this example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback: let videoelem = document.getelementbyid("video"); let playbutton = document.getelementbyid("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(); } else { videoelem.pause(); playbutton.
classlist.remove("playing"); } } in this example, playback of video is toggled off and on by the async playvideo() function.
ImageCapture.grabFrame() - Web APIs
t.queryselector('button#grabframe'); var canvas = document.queryselector('canvas'); grabframebutton.onclick = grabframe; function grabframe() { imagecapture.grabframe() .then(function(imagebitmap) { console.log('grabbed frame:', imagebitmap); canvas.width = imagebitmap.width; canvas.height = imagebitmap.height; canvas.getcontext('2d').drawimage(imagebitmap, 0, 0); canvas.
classlist.remove('hidden'); }) .catch(function(error) { console.log('grabframe() error: ', error); }); } specifications specification status comment mediastream image capturethe definition of 'grabframe()' in that specification.
ImageCapture.takePhoto() - Web APIs
var takephotobutton = document.queryselector('button#takephoto'); var canvas = document.queryselector('canvas'); takephotobutton.onclick = takephoto; function takephoto() { imagecapture.takephoto().then(function(blob) { console.log('took photo:', blob); img.
classlist.remove('hidden'); img.src = url.createobjecturl(blob); }).catch(function(error) { console.log('takephoto() error: ', error); }); } specifications specification status comment mediastream image capturethe definition of 'takephoto()' in that specification.
firesTouchEvents - Web APIs
syntax var boolean = inputdevicecapabilities.firestouchevents returns a boolean example mybutton.addeventlistener('mousedown', function(e) { if (!e.sourcecapabilities.firestouchevents) mybutton.
classlist.add("pressed"); }); specifications specification status comment inputdevicecapabilitiesthe definition of 'firetouchevents' in that specification.
InputDeviceCapabilities API - Web APIs
if (!e.sourcecapabilities.firestouchevents) mybutton.
classlist.add("pressed"); }); interfaces inputdevicecapabilities provides logical information about an input device.
MediaRecorder - Web APIs
p = function(e) { console.log("data available after mediarecorder.stop() called."); var clipname = prompt('enter a name for your sound clip'); var clipcontainer = document.createelement('article'); var cliplabel = document.createelement('p'); var audio = document.createelement('audio'); var deletebutton = document.createelement('button'); clipcontainer.
classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; c...
Using the MediaStream Recording API - Web APIs
l the chunks we have received: mediarecorder.onstop = function(e) { console.log("recorder stopped"); const clipname = prompt('enter a name for your sound clip'); const clipcontainer = document.createelement('article'); const cliplabel = document.createelement('p'); const audio = document.createelement('audio'); const deletebutton = document.createelement('button'); clipcontainer.
classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); const blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; const audiourl = window.ur...
Range.commonAncestorContainer - Web APIs
ript document.addeventlistener('pointerup', e => { const selection = window.getselection(); if (selection.type === 'range') { for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.parentnode; } el.
classlist.remove('highlight'); settimeout(() => { el.
classlist.add('highlight'); }, 0); } result specifications specification status comment domthe definition of 'range.commonancestorcontainer' in that specification.
WebGLRenderingContext.makeXRCompatible() - Web APIs
plemessagebox("unable to transfer the game to your xr headset.", "cancel"); break; case invalidstateerror: showsimplemessagebox("you don't appear to have a compatible xr headset available.", "cancel"); break; default: handlefatalerror(err); break; } xrsession.end(); } } async function handlestartbuttonclick(event) { if (event.target.
classlist.contains("use-webxr") && navigator.xr) { try { xrsession = await navigator.xr.requestsession("immersive-vr"); usingxr = true; } catch(err) { xrsession = null; usingxr = false; } } startgame(); } function startgame() { currentscene = "scene1"; loadsceneresources(currentscene); /* and so on */ } this works by having two buttons, one which starts the...
Window: blur event - Web APIs
html <p id="log">click on this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.
classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.
classlist.remove('paused'); log.textcontent = 'this document has focus.
Window: focus event - Web APIs
html <p id="log">click on this document to give it focus.</p> css .paused { background: #ddd; color: #555; } javascript function pause() { document.body.
classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.
classlist.remove('paused'); log.textcontent = 'this document has focus.
::before (:before) - CSS: Cascading Style Sheets
li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.
classlist.toggle('done'); } }, false); here is the above code example running live.
CSS reference - CSS: Cascading Style Sheets
block formatting context box model containing block layout mode margin collapsing replaced elements stacking context visual formatting model dom-css / cssom major object types documentorshadowroot.stylesheets stylesheets[i].cssrules cssrules[i].csstext (selector & style) cssrules[i].selectortext htmlelement.style htmlelement.style.csstext (just style) element.classname element.
classlist important methods cssstylesheet.insertrule() cssstylesheet.deleterule() ...