很久没写原生的JS了,上周做了一个小东西让我又重新了解了一下原生JS,以下记录一些常见的原生JS

var canvArrow = document.getElementById('js-canv_arrow');
var body = document.getElementsByTagName('body')[0];

var a = document.getElementById('nav-text');

1、修改css属性:canvArrow.style.display = "block";

2、去除子元素:父级X.removeChild(a);
3、增加子元素:IndexNav.appendChild(a)相当于IndexNav.insertBefore(a,IndexNav.childNodes[0]);

表示将a子元素插入到IndexNav父级的第一个孩子

4、为一个元素增加一个类即要对该元素的类都进行重置
IndexNav.setAttribute("class", "m-navLeft m-navLeft-top");//IE6,IE7不支持

IndexNav.setAttribute("className", "m-navLeft m-navLeft-top");//仅IE6,IE7支持

IndexNav.className = "m-navLeft m-navLeft-fix";//所有浏览器都支持

5、绑定时间hover效果:

使用IndexNav.onmouseenter = function (){}

IndexNav.onmouseleave = function (){}

或者用兼容写法

if( window.addEventListener ){
  wrap.addEventListener( 'mouseover',hoverDir,false );
  wrap.addEventListener( 'mouseout',hoverDir,false );
}else if( window.attachEvent ){
  wrap.attachEvent( 'onmouseenter',hoverDir );
  wrap.attachEvent( 'onmouseleave',hoverDir );
}

6、获取浏览器宽度:document.body.clientWidth

7、监控浏览器窗口大小需要全部加载完之后才可触发

window.onload= function(){

  window.onresize = function(){moveIndexNav();};
}

原生JS一些操作的更多相关文章

  1. 使用原生js来操作对象dom的class属性

    之前一直都使用jquery来操作dom,今天想自己用原生写一些插件,却发现给dom增删class的时候,使用slice来截取className特别的麻烦,后来发现,原来原生JS本来就有提供api来对d ...

  2. 原生JS节点操作

    获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...

  3. 原生JS数组操作的6个函数 arr.forEach arr.map arr.filter arr.some arr.every arr.findIndex

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 抛开jQuery,拾起原生JS的DOM操作

    常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...

  5. 原生js与jquery操作iframe

    1  原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...

  6. js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  7. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  8. 原生js 样式的操作整理

    内联样式的获取 function getStyle(obj,attr){//简单的获取内联样式 return obj.currentStyle?obj.currentStyle[attr]:obj.g ...

  9. [笔记]原生JS实现的DOM操作笔记

    原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...

随机推荐

  1. input,textarea在ios和Android上阴影和边框的处理方法(在移动端)

    1.去掉ios上阴影的方法只需要在css文件上添加input,textarea{-webkit-appearance: none;}就可以了 2.在移动端上input和textarea边框问题,也是在 ...

  2. ofo退押金脚本

    同事钉钉给的 因为押金一直没退,电话很难打进去,咨询客服排队要等好久,一直几千位. 长时间挂机就自动退出客服了,所以自动写了一个脚本,目前已经成功退押金了.所以共享出来 1.关注ofo小黄车订阅号,注 ...

  3. C#编译时,提示缺少NuGet包

    A--还原Nuget包前,一定要确保你配置了该项目的包源:如果你没有那就找别人要吧. 工具-选项-Nuget包管理器-程序包源 B--配置编译时自动还原缺少的nuget包: 工具-选项-Nuget包管 ...

  4. andorid 进度条和图片的透明度

    layout.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  5. Java的反射技术

    什么是反射机制 Java的反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能调用它的任意属性和方法.这种动态获取信息以及动态调用对象属性和方法的即使称为J ...

  6. PHP ini 配置无效的坑给自己记录

    装redis 扩展时,发现装成功之后扩展一直加载不上, 于是phpinfo 发现Configuration File (php.ini) Path:none Loaded Configuration ...

  7. nginx指令中的优化(配置文件)

    nginx指令中的优化(配置文件)worker_processes 8; nginx进程数,建议按照cpu数目来指定,一般为它的倍数.worker_cpu_affinity 00000001 0000 ...

  8. 微信小程序播放视频发送弹幕效果

    首先.先来看一下效果图 然后.再看一下官方文档API对video的说明 相关属性解析: danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 contr ...

  9. Java第12章笔记

    如何定义 Java 中的方法 所谓方法,就是用来解决一类问题的代码的有序组合,是一个功能模块. 一般情况下,定义一个方法的语法是: 其中: //方法名为骆驼命名法 1. 访问修饰符:方法允许被访问的权 ...

  10. java测试ATM自助操作系统

    开学第一周系主任安排了一项测试,测试要求:模拟ATM自助取款机用文件进行存储账户信息,密码等,并进行存款取款,转账,查询记录等操作,而且要进行文件的读取与录入. 这是一个ATM自助取款的操作系统,进行 ...