原生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();};
}
原生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 ...
随机推荐
- 安装scrapy 出现error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools 错误
安装scrapy 出现以下 错误: error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C ...
- c#devexpres TreeList 最简单显示动态值的应用
为了让数据显示在行内,也为熟练一下devexpress treelist 控件, 查找了很多,最多的是先把数据放在datatable 表里边, 然后赋值给treelist的datasource 的 ...
- html标签三
1.下拉框和下拉表框 <select name="" id="" multiple> <option value="xx" ...
- Java 内存模型、GC原理及算法
Java 内存模型.GC原理:https://blog.csdn.net/ithomer/article/details/6252552 GC算法:https://www.cnblogs.com/sm ...
- XiaoKL学Python(C)__future__
__future__ in Python 1. from __future__ import xxxx 这是为了在低版本的python中使用可能在某个高版本python中成为语言标准的特性,从而 在将 ...
- java.lang.AbstractMethodError: javax.servlet.jsp.JspFactory.getJspApplicationContext(Ljavax/servlet/ServletContext;)Ljavax/servlet/jsp/JspApplicationContext;
在Tomcat下部署应用时会报这个错误,参考以下这篇博客:http://blog.csdn.net/robinsonmhj/article/details/37653189,删除Tomcat目录下we ...
- Zookeeper 修改heap size
对应原文出处: https://support.pivotal.io/hc/en-us/articles/201861286-Zookeeper-service-heapsize-is-10GB-or ...
- python基础之Day4
流程判断 一.if 1.语法一 各条件都执行 if条件1: if条件2: if条件3: 2.语法二 if多分支,自上而下执行,一旦满足条件,后面代码即使满足条件也不会执行 if条件1: elif条件2 ...
- spring boot 启动自动跳到 断点 throw new SilentExitException
项目 debug 启动,自动跳到 断点 ,而且就算F8 ,项目还是停止启动. 百度了一下,答案都是 Eclipse -> Preferences ->Java ->Debug去掉&q ...
- web.xml 详细介绍(zz)
web.xml 详细介绍 博客分类: CoreJava WebXMLServletJSPTomcat http://mianhuaman.iteye.com/blog/1105522 1.启动一个W ...