很久没写原生的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一些操作的更多相关文章
-
使用原生js来操作对象dom的class属性
之前一直都使用jquery来操作dom,今天想自己用原生写一些插件,却发现给dom增删class的时候,使用slice来截取className特别的麻烦,后来发现,原来原生JS本来就有提供api来对d ...
-
原生JS节点操作
获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...
-
原生JS数组操作的6个函数 arr.forEach arr.map arr.filter arr.some arr.every arr.findIndex
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
-
抛开jQuery,拾起原生JS的DOM操作
常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...
-
原生js与jquery操作iframe
1 原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...
-
js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)
js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...
-
框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
-
原生js 样式的操作整理
内联样式的获取 function getStyle(obj,attr){//简单的获取内联样式 return obj.currentStyle?obj.currentStyle[attr]:obj.g ...
-
[笔记]原生JS实现的DOM操作笔记
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
随机推荐
-
Java程序员必备的6款最佳开发工具
工欲善其事,必先利其器.每一个Java程序员都有其惯用的工具组件.对于Java程序员,各种有用的软件和工具泛滥成灾.初级开发人员要么找不到合适的工具,要么在寻找过程中浪费了大量的时间.下面,我将为大家 ...
-
JOB的创建,定时,执行
--建表 create table test_job(para_date date); commit; insert into test_job values(sysdate); commit; ...
-
大数据分析神兽麒麟(Apache Kylin)
1.Apache Kylin是什么? 在现在的大数据时代,越来越多的企业开始使用Hadoop管理数据,但是现有的业务分析工具(如Tableau,Microstrategy等)往往存在很大的局限,如难以 ...
-
转: JS自定义事件的定义和触发(createEvent, dispatchEvent)
四.伪DOM自定义事件 这里的“伪DOM自定义事件”是自己定义的一个名词,用来区分DOM自定义事件的.例如jQuery库,其是基于包装器(一个包含DOM元素的中间层)扩展事件的,既与DOM相关,又不直 ...
-
布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
-
CSS3 :target伪类实现Tab切换效果 BY commy
http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...
-
ios UICollectionView简单说明
原谅我记不住写下来好了 UICollectionViewFlowLayout 流式自动布局 继承于UICollectionViewLayout 初始化:[[UICollectionViewFlowLa ...
-
基于Office 365的随需应变业务应用平台
作者:陈希章 发表于 2017年9月7日 这是我去年10月底在微软技术大会(Microsoft Ignite 2016) 上面的演讲主题,承蒙大家抬爱,也沾了前一场明星讲师的光,我记得会场几乎是满座. ...
-
【AGC 005F】Many Easy Problems
Description One day, Takahashi was given the following problem from Aoki: You are given a tree with ...
-
Eureka入门案例
1.整体思路 1.1.服务注册中心Eureka(可以是一个集群,对外暴露自己的地址) 1.2.服务提供者:启动后向Eureka注册自己的信息(地址,提供什么服务) 1.3.客户端消费者:向Eureka ...