zoukankan      html  css  js  c++  java
  • 原生JS一些操作

    很久没写原生的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();};
    }

  • 相关阅读:
    .JDBC访问数据库的基本步骤是什么?
    文本的四种编码方式
    实现不在栈中产生对象
    字符串链接和复制
    堆和栈的区别(详细)
    产生随机数字
    利用返回引用来操作结构体
    inline 内联函数可以避免函数重定义问题
    五大内存分区,堆与栈的区别(转)
    Strategy模式
  • 原文地址:https://www.cnblogs.com/huangxiaowen/p/4494038.html
Copyright © 2011-2022 走看看