很久没写原生的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. shell 脚本编写基础

    在进行Linux测试时编写脚本是必不可少的,Shell脚本的名称可以随便定义,也不要什么后缀名,例如可以写abc,smartzip这类名称,运行时只要键入 ./smartzip就能运行脚本了.. 每行 ...

  2. andorid 网格视图GridView

    .xml <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android=&qu ...

  3. 基于TCP的socket套接字的网络编程(客户端/服务端模式)

    于数据完整性要求较高的场合,就应采用TCP协议. IP网络层提供IP寻址和路由.因为在网络上数据可以经由多条线路到达目的地,网络层负责找出最佳的传输线路. IP地址与数据包: IP层就是把数据分组从一 ...

  4. ROC曲线 Receiver Operating Characteristic

    ROC曲线与AUC值   本文根据以下文章整理而成,链接: (1)http://blog.csdn.net/ice110956/article/details/20288239 (2)http://b ...

  5. POJ3422或洛谷2045 Kaka's Matrix Travels

    POJ原题链接 洛谷原题链接 很裸的费用流. 将每个点\(x\)拆成\(x_1,x_2\),并从\(x_1\)向\(x_2\)连一条容量为\(1\),费用为该点的权值的边,以及一条容量为\(+\inf ...

  6. JoyOI1035 棋盘覆盖

    原题链接 对棋盘染色,坐标和为奇数的染黑,偶数为白.这时会发现对于相同颜色的格子,是无法放置骨牌的,这样我们就将所有格子分成两类,然后根据能否放置骨牌连边,最后就是求二分图最大匹配了. 这里我是用的匈 ...

  7. Luogu 1341 无序字母对 - 欧拉路径

    Solution 找一条字典序最小的欧拉路径. 用 $multiset$ 存储领接表. 欧拉路径模板传送门 Code #include<cstdio> #include<cstrin ...

  8. BZOJ 3932 [CQOI2015]任务查询系统 - 差分 + 主席树

    Solution 差分就好了, 在$s_i$ 的点+1, $e_i + 1$ 的点 - 1. 查询的时候注意$l == r$ 要返回 $k * b[l]$ ,而不是$sum[node] $因为当前位置 ...

  9. 使用iTEXT库生成pdf

    iTEXT下载地址 https://sourceforge.net/projects/itext/files/ 选择绿色的按钮,下载最新版本,解压后是一些jar包 为了使用方便,将文件夹放到JAVA_ ...

  10. wordvec_词的相似度

    import gensimfrom gensim.models import word2vecimport loggingimport jiebaimport osimport numpy as np ...