// 为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. IT 需要知道的一些专业名词和解释 (长期更新)

    c2c: 就是我卖东西你来买  (comsumer to comsumer个人对个人) b2c: 就是我开公司卖东西你来买 (business to comsumer 公司对个人) o2o: 就是我开 ...

  2. IoC实践--用Autofac实现MVC5.0的IoC控制反转方法

    Autofac是一个.net平台下发性能还不错的IoC框架,利用它可以实现依赖注入和控制反转,使自己的软件模块之间的耦合性大大降低,让软件扩展.维护更加容易.控制反转(Inversion of Con ...

  3. mysql忘记密码重置(mac)

    setp1: 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server) step2:进入终端输入:cd /usr/local/ ...

  4. LeetCode:Minimum Path Sum(网格最大路径和)

    题目链接 Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right ...

  5. Hermes实时检索分析平台

    一.序言 随着TDW的发展,公司在大数据离线分析方面已经具备了行业领先的能力.但是,很多应用场景往往要求在数秒内完成对几亿.几十亿甚至几百上千亿的数据分析,从而达到不影响用户体验的目的.如何能够及时有 ...

  6. C#数据库绑定

    .Net对数据库的绑定 using System; using System.Collections.Generic; using System.ComponentModel; using Syste ...

  7. JAVA自动化测试中多数据源的切换

    在做自动化测试时,数据驱动是一个很重要的概念,当数据与脚本分离后,面对茫茫多的数据,管理数据又成了一个大问题,而数据源又可能面对多个,就跟在开发过程中,有时候要连接MYSQL,有时候又要连接SQL S ...

  8. Oracle限制某个用户的连接数及PROFILE介绍

    限制一个用户的链接数,可以通过ORACLE的PROFILE文件来实现 1.     查看resource_limit参数: SQL> show parameter resource_limit ...

  9. WPF的定时器

    一.注意事项 引用命名空间:System.Windows.Threading.DispatcherTimer. 二.使用方法 var _timer = new DispatcherTimer(); _ ...

  10. schedule() 和 scheduleAtFixedRate() 区别

    1.  schedule() ,2个参数方法:在执行任务时,如果指定的计划执行时间scheduledExecutionTime <= systemCurrentTime,则task会被立即执行. ...