ES6开发技巧:DOM Skill技巧

2019-08-2819:19:22WEB前端开发Comments2,698 views字数 742阅读模式

DOM Skill

显示全部DOM边框

调试页面元素边界时使用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/15865.html

[].forEach.call($$("*"), dom => {
    dom.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});
复制代码
自适应页面

页面基于一张设计图但需做多款机型自适应,元素尺寸使用rem进行设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/15865.html

function AutoResponse(width = 750) {
    const target = document.documentElement;
    target.clientWidth >= 600
        ? (target.style.fontSize = "80px")
        : (target.style.fontSize = target.clientWidth / width * 100 + "px");
}
复制代码
过滤XSS
function FilterXss(content) {
    let elem = document.createElement("div");
    elem.innerText = content;
    const result = elem.innerHTML;
    elem = null;
    return result;
}
复制代码
存取LocalStorage

反序列化取,序列化存文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/15865.html

const love = JSON.parse(localStorage.getItem("love"));
localStorage.setItem("love", JSON.stringify("I Love You"));

作者:JowayYoung
链接:https://juejin.im/post/5cc7afdde51d456e671c7e48
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/15865.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/15865.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/15865.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定