js body添加元素带样式

Posted 2020-12-19 西瓜霜^_^

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js body添加元素带样式相关的知识，希望对你有一定的参考价值。

function createStyle(){
    return"*{padding:0;margin:0;border:0}.loading{width:640px;height:1024px;margin:0 auto}.loadImg{width:640px;height:1024px;animation:fadeInOut 3s linear;-webkit-animation:fadeInOut 3s linear;-moz-animation:fadeInOut 3s linear;opacity:0}@keyframes fadeInOut{0%{opacity:0}25%{opacity:.5}45%{opacity:1}50%{opacity:1}55%{opacity:1}75%{opacity:.5}100%{opacity:0}}@-moz-keyframes fadeInOut{0%{opacity:0}25%{opacity:.5}45%{opacity:1}50%{opacity:1}55%{opacity:1}75%{opacity:.5}100%{opacity:0}}@-webkit-keyframes fadeInOut{0%{opacity:0}25%{opacity:.5}45%{opacity:1}50%{opacity:1}55%{opacity:1}75%{opacity:.5}100%{opacity:0}}"
}
function addStyle(){
    var style = document.createElement("style");
    style.type = "text/css";
    style.innerhtml = createStyle();
    window.document.head.appendChild(style);
}
function addDom(){
    var div = document.createElement("div");
    div.className = "loading";
    window.document.body.appendChild(div);
    var img = document.createElement("img");
    img.src="img/bg.png";
    img.id="loadImg";
    img.className="loadImg";
    div.appendChild(img);
}
window.onload=function(){
    addStyle();
    addDom();
}

感谢https://www.cnblogs.com/cynthia-wuqian/p/5363736.html

以上是关于js body添加元素带样式的主要内容，如果未能解决你的问题，请参考以下文章

给body元素添加样式

Body 元素上的 Vue JS 样式绑定

怎样在css样式的盒子里添加图片啊？就比如是这样的

JS-offset

vue less scope的样式中添加全局样式，或者针对本页面的 html body等app外层元素添加样式的一些方法

html页面中，怎么在html元素中引用js设置的参数？

js body添加元素 带样式

js body添加元素带样式