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

uAO28資訊網——每日最新資訊28at.com

現在，我們就開始這篇文章的內容吧。uAO28資訊網——每日最新資訊28at.com

13. 創建一個 <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);

注意：雖然大多數 HTML 元素節點的屬性（例如 <div> <p>）是可訪問的并且不需要“load”事件的偵聽器，但 <img> 是此規則的一個例外（另一個唯一的例外是 < 腳本>)uAO28資訊網——每日最新資訊28at.com

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

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

變量loadedImg不會被渲染，因為在分配屬性src時它仍然是未定義的。uAO28資訊網——每日最新資訊28at.com

14. 刪除所有嵌套子節點

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 個有用的 JavaScript 代碼片段(下）
                
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
                
上一篇： 30 個 JavaScript 單行代碼，讓你成為 JavaScript 奇才
                
下一篇： 圖形編輯器開發：屬性顯示與格式轉換