30 个有用的 JavaScript 代码片段(下）

今天这篇文章，接上昨天的《30 个有用的 JavaScript 代码片段(上）》，我们把剩下的18个代码片段分享在这篇文章中。Xtt28资讯网——每日最新资讯28at.com

Xtt28资讯网——每日最新资讯28at.com

现在，我们就开始这篇文章的内容吧。Xtt28资讯网——每日最新资讯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> 是此规则的一个例外（另一个唯一的例外是 < 脚本>)Xtt28资讯网——每日最新资讯28at.com

因此，如果 document.createElement('img') 没有返回 Promise：Xtt28资讯网——每日最新资讯28at.com

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

变量loadedImg不会被渲染，因为在分配属性src时它仍然是未定义的。Xtt28资讯网——每日最新资讯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.28at.com/showinfo-26-12674-0.html30 个有用的 JavaScript 代码片段(下）
                
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
                
上一篇： 30 个 JavaScript 单行代码，让你成为 JavaScript 奇才
                
下一篇： 图形编辑器开发：属性显示与格式转换