// 为element增加一个样式名为newClassName的新样式

function addClass(element, newClassName) {
var value = element.className;
element.className = value + " " + newClassName;
}
var box = document.getElementById("box");
addClass(box,'js')

// 移除element中的样式oldClassName

function removeClass(element, oldClassName) {
var value = element.className;
var str = value.replace(oldClassName,"");
element.className = str;
}
var box = document.getElementById("box");
console.log(removeClass(box,"active"));

// 判断siblingNode和element是否为同一个父元素下的同一级的元素,返回bool值

function isSiblingNode(element, siblingNode) {
return element.parentNode===siblingNode.parentNode;
} var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2"); console.log(isSiblingNode(box1,box2))

// 获取element相对于浏览器窗口的位置,返回一个对象{x, y}

function getPosition(element) {
return {
x:element.offsetLeft,
y:element.offsetTop
};
}
var box1 = document.getElementById("box1");
console.log(getPosition(box1));

JS DOM元素的更多相关文章

  1. 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners

    偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...

  2. JS DOM元素的操作(创建,添加,删除,和修改属性)

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  3. js DOM 元素ID就是全局变量

    有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再 ...

  4. js dom元素加载完成执行

    //dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...

  5. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  6. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  7. riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

    前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...

  8. JS添加或删除HTML dom元素的方法实例分析

    本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...

  9. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

随机推荐

  1. iOS开发-Alpha,Hidden与Opaque区别

    UIView中的这三个属性用的比较多,尤其是Alpha和Opaque之间有的时候不是很好分别,稍微整理下: Alpha(不透明度) alpha是不透明度,属性为浮点类型的值,取值范围从0到1.0,表示 ...

  2. JavaWeb学习总结(十七)——JSP中的九个内置对象

    一.JSP运行原理 每个JSP 页面在第一次被访问时,WEB容器都会把请求交给JSP引擎(即一个Java程序)去处理.JSP引擎先将JSP翻译成一个_jspServlet(实质上也是一个servlet ...

  3. Linux中如何产生core文件?

      在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时加上调试信息).使用gdb来查看core文件,可以指示出导致程序出错的代码所在文件和行数.   1.core文件 ...

  4. Objective-C 高性能的循环

    Cocoa编程的一个通常的任务是要去循环遍历一个对象的集合  (例如,一个 NSArray, NSSet 或者是 NSDictionary). 这个看似简单的问题有广泛数量的解决方案,它们中的许多不乏 ...

  5. ASP.NET Web API的安全管道

    本篇体验ASP.NET Web API的安全管道.这里的安全管道是指在请求和响应过程中所经历的各个组件或进程,比如有IIS,HttpModule,OWIN,WebAPI,等等.在这个管道中大致分两个阶 ...

  6. webRTC-实时流媒体的福音

    WebRTC是一项在浏览器内部进行实时视频和音频通信的技术,是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术.[1] WebRTC实现了基于网页的视频会议 ...

  7. LeetCode:Spiral Matrix I II

    Spiral Matrix Given a matrix of m x n elements (m rows, n columns), return all elements of the matri ...

  8. 用户管理 之 Linux 用户(user)和用户组(group)管理概述

    一.理解Linux的单用户多任务,多用户多任务概念:Linux 是一个多用户.多任务的操作系统:我们应该了解单用户多任务和多用户多任务的概念: 1.Linux 的单用户多任务:单用户多任务:比如我们以 ...

  9. INSTALL MYSQL IN MAC

    安装好MYSQL后,在System References中找到MYSQL,启动它. 启动之后在终端中输入添加MySQL路径的命令,把MYSQL路径添加到PATH中: PATH="$PATH& ...

  10. iOS-Xcode上传后iTunes Connect构建版本不显示

    在升级到Xcode8版本以后大多数人会碰到这个问题-开开心心开发好一款app以后上传到iTunes后台提交审核,然而iTunes Connect后台活动栏里没有出现我们上传的app,确切的说是显示一会 ...