原生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 ...
随机推荐
- Java图形界面——Border
Swing编程边框(Border)的用法总结 Java进行客户端编程,使用了大量的Swing控件,由于系统默认的边框无法满足项目的要求,不得不自己更改控件的边框样式,网上找了不少资料,本文对Swing ...
- java 字符串截取类 区分中文、英文、数字、标点符号
package com.founder.fix.ims; /** * @author WANGYUTAO * 操作字符串 */ public class SubString { // public s ...
- 常用的TCP Option
当前,TCP常用的Option如下所示———— Kind (Type) Length Name Reference 描述 & 用途 0 1 EOL RFC 793 选项列表结束 1 1 NOP ...
- JavaScript.how-to-debug-javascript
How to debug JavaScript code 1. 写一个HTML文件.例如: <!DOCTYPE html> <html> <title>Web Pa ...
- java mina框架使用
1.目前为止,看到写mina最清晰的一篇博客:https://my.oschina.net/ielts0909/blog/85946! 2.官网的开发文档:http://mina.apache.org ...
- spring+mybatis+mina+logback框架搭建
第一次接触spring,之前从来没有学过spring,所以算是赶鸭子上架,花了差不多一个星期来搭建,中间遇到各种各样的问题,一度觉得这个框架搭建非常麻烦,没有一点技术含量,纯粹就是配置,很低级!但随着 ...
- 在 Ubuntu 上使用微信客户端
原文地址: http://www.myzaker.com/article/5979115d1bc8e08c30000071/ 在这个快速信息交互时代,无论是工作还是生活,都需要频繁的网络社交,而在中国 ...
- UI设计工资有多高?怎么快速拿高薪?
1.UI设计工资有多高? 有人不服UI设计待遇薪资高,那么下面就来看下一线城市的最新UI设计平均薪资待遇,大家也可以打开各招聘网站查询各行业平均薪资情况,一个行业的薪资高不高行业市场决定. 待遇较高说 ...
- Ubuntu中文乱码问题解决方案
问题描述 在ubuntu上部署了jar包(java开发的图形界面),但是图形界面上的中文显示乱码. 采用以下步骤后你能够完美支持中文 第一步,安装中文支持包langauge-pack-zh-hans ...
- [Groovy] 创建Excel,追加Excel
package ScriptLibrary import java.awt.Color import java.awt.GraphicsConfiguration.DefaultBufferCapab ...