今天這篇文章，接上昨天的《30 個(gè)有用的 JavaScript 代碼片段(上）》，我們把剩下的18個(gè)代碼片段分享在這篇文章中。3TC28資訊網(wǎng)——每日最新資訊28at.com

3TC28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在，我們就開始這篇文章的內(nèi)容吧。3TC28資訊網(wǎng)——每日最新資訊28at.com

13. 創(chuàng)建一個(gè) <img> DOM 元素

// Code snippet to render <img> DOM element on the flyconst loadImage = (url) => new Promise((resolve, reject) => {    const img = new Image();    img.addEventListener('load', () => resolve(img));    img.addEventListener('error', (err) => reject(err));    img.src = url;});

// __USAGE Example__var uploadFileInput=document.createElement('input');uploadFileInput.type='file';uploadFileInput.id='uploadFileInput';document.body.appendChild(uploadFileInput);function readFileAsDataURL(file) {    return new Promise((resolve,reject) => {        let fileredr = new FileReader();        fileredr.onload = () => resolve(fileredr.result);        fileredr.onerror = () => reject(fileredr);        fileredr.readAsDataURL(file);    });}uploadFileInput.addEventListener('change', async (evt)=> {  var file = evt.currentTarget.files[0];    if(!file) return;    var b64str = await readFileAsDataURL(file);    var _img = await loadImage(b64str);    _img['style']['width']=`${_img.naturalWidth}px`;    _img['style']['height']=`${_img.naturalHeight}px`;    _img['style']['margin']='2px auto';    _img['style']['display']='block';    document.body.appendChild(_img);}, false);

注意：雖然大多數(shù) HTML 元素節(jié)點(diǎn)的屬性（例如 <div> <p>）是可訪問的并且不需要“l(fā)oad”事件的偵聽器，但 <img> 是此規(guī)則的一個(gè)例外（另一個(gè)唯一的例外是 < 腳本>)3TC28資訊網(wǎng)——每日最新資訊28at.com

因此，如果 document.createElement('img') 沒有返回 Promise：3TC28資訊網(wǎng)——每日最新資訊28at.com

var loadedImg=document.createElement('img');loadedImg.src=<dataURL>; // dataURL refers to the encoded image data

變量loadedImg不會被渲染，因?yàn)樵诜峙鋵傩詓rc時(shí)它仍然是未定義的。3TC28資訊網(wǎng)——每日最新資訊28at.com

14. 刪除所有嵌套子節(jié)點(diǎn)

const removeAllChildNodes = ((parentEle) => parentEle.children.length > 0  ? parentEle.removeChild(parentEle.children[0]) : null);

// __USAGE Example__const _scale = window.devicePixelRatio*2;const size = 250;const fontSize=size/_scale;var canvasDisplay=document.createElement('div');canvasDisplay['style']['width']=`${size+4}px`;canvasDisplay['style']['height']=`${size+4}px`;canvasDisplay['style']['margin']='1px auto';document.body.appendChild(canvasDisplay);var iconBtn_1=document.createElement('button');iconBtn_1.type='button';iconBtn_1.value=' 
                
本文鏈接：http://www.tebozhan.com/showinfo-26-12674-0.html30 個(gè)有用的 JavaScript 代碼片段(下）
                
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
                
上一篇： 30 個(gè) JavaScript 單行代碼，讓你成為 JavaScript 奇才
                
下一篇： 圖形編輯器開發(fā)：屬性顯示與格式轉(zhuǎn)換