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();
}

通过原生js添加div和css的更多相关文章

  1. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  2. 原生JS添加节点方法与jQuery添加节点方法的比较及总结

    一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...

  3. 原生js添加博客点击鼠标出小心心效果~~

    昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...

  4. 原生js用div实现简单的轮播图

    文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...

  5. 原生JS添加类名 删除类名

    为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle&quo ...

  6. JS添加DOM元素CSS权重BUG

    修改删除table的时候,比如拆分合并单元格,合并全部TR中的某个TD后在拆分还原,即使直接在td标签中设置了td的高宽属性,当td在css文件中设置为宽度auto的时候,不能显示出TD来,显示TD宽 ...

  7. 原生js添加类名,删除类名

    1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getEle ...

  8. 使用原生JS 修改 DIV 属性

    本例参考并改进自:https://www.jianshu.com/p/2961d9c317a3 大家可以一起学习!! <!DOCTYPE html> <html lang=" ...

  9. 原生JS添加事件方法

    事件 事件添加方式 EvenTarget.addEventListener(EvenName, functionName, option); EventName: example => clic ...

随机推荐

  1. 基于nodejs实现js后端化处理

    今天D哥给我提了个问题,"用php执行过js没"?咋一听,没戏~~毕竟常规情况下,js是依赖浏览器运行的.想在php后端采集的同时利用js运行结果并传递给php使用,没戏! 然后回 ...

  2. yii2 [行为] behaviors 拦截器

    yii2 拦截器 在控制器中可以自定义对action的拦截器,拦截器需要继承 \yii\base\ActionFilter 参考代码: class BaseUserAuthorizeFilter ex ...

  3. Windows Server 2008 Workstation Converter优化设置

    http://www.win2008workstation.com/windows-server-2008-workstation-converter/ If you don’t want to co ...

  4. python 字符串截取

    我们可以通过索引来提取想要获取的字符,可以把python的字符串也做为字符串的列表就更好理解 python的字串列表有2种取值顺序1是从左到右索引默认0开始的,最大范围是字符串长度少1s = 'ilo ...

  5. HttpListenerCS客户端监听http

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. WEB安全入门(转)

    一. 首先你得了解Web Web分为好几层,一图胜千言:事实是这样的:如果你不了解这些研究对象是不可能搞好安全研究的.这样看来,Web有八层(如果把浏览器也算进去,就九层啦,九阳神功……)!!!每层都 ...

  7. [原]Android Native Debug

    1,安装adt插件,cdt插件2,SDK目录配置: Eclipse文件菜单选择“Window”--->“Preferences”--->“Android”--->设置“SDK Loc ...

  8. MSSQL大数据量增加字段耗时对比

    单个数据表记录数为1亿4千万条. 一.测试同时增加两个允许为空的字段. ALTER TABLE [dbo].[XRecord] ADD [sType] int,[cType] int GO 开始时间: ...

  9. 【NS2仿真】RTP协议安装

    来自: http://personales.upv.es/fboronat/Research/NS2_RTP/NS2_RTP_RTCP_module.htm 文件:http://pan.baidu.c ...

  10. maven中文乱码问题——打包错误

    工程采用GBK编码, web应用中的配置文件打包后,war包里的配置文件里的中文成乱码.   用notepad++打开后,可以看到是用utf-8格式的(可以通过菜单中的[格式]查看),也就是说,在经过 ...