JS DOM元素
// 为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元素的更多相关文章
- 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners
偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...
- JS DOM元素的操作(创建,添加,删除,和修改属性)
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
- js DOM 元素ID就是全局变量
有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再 ...
- js dom元素加载完成执行
//dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
- JS添加或删除HTML dom元素的方法实例分析
本文实例讲述了JS代码添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...
- 详解JS中DOM 元素的 attribute 和 property 属性
一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...
随机推荐
- 祸福相依,大难之后的O2O迎来新福报?
今天的O2O似乎已经成为了一个人人都不愿意提的名词,很多原本做O2O的创业者,如今都不提自己是O2O,只说是互联网+.创业者们实际上仍然是在干着O2O的事情,之所以不敢提不愿提,无非就是一提O2O,投 ...
- MySql的基本操作以及以后开发经常使用的常用指令
第一章:数据类型和操作数据表MySQL语句的规范(1):关键字与函数名称全部大写(2):数据库名称,表名称,字段名称全部小写(3):SQL语句必须以分号结尾 1:命令行模式启动mysql服务net s ...
- MyEclipse使用总结——在MyEclipse中设置jsp页面为默认utf-8编码
在MyEclispe中创建Jsp页面,Jsp页面的默认编码是“ISO-8859-1”,如下图所示: 在这种编码下编写中文是没有办法保存Jsp页面的,会出现如下的错误提示: 因此可以设置Jsp默认的编码 ...
- js命名规范
- Tomcat启动后快逸报表报错的解决方法
SSH2+EasyUI项目用到了快逸报表,启动Tomcat后系统报错: Report System initing...... [2015-06-04 15:03:05] runqianReportL ...
- 聊天IM的时间戳显示规则
====================================================== 以下规则是在体验微信操作后,推测出来的规则,可能存在一些不准确的表述 ========== ...
- Unity3D Shader入门指南(二)
关于本系列 这是Unity3D Shader入门指南系列的第二篇,本系列面向的对象是新接触Shader开发的Unity3D使用者,因为我本身自己也是Shader初学者,因此可能会存在错误或者疏漏,如果 ...
- TCP_NODELAY 和 TCP_CORK主要区别
一句话总结: tcp_nodelay:禁止nagle算法,有需要发送的就立即发送,比较常见 tcp_cork:它是一种加强的nagle算法,过程和nagle算法类似,都是累计数据然后发送.但它没有 n ...
- MySQL模拟:线上误update的恢复
作为DBA,细心.沉稳是首要的基本素质.不过总有那么一会心烦意乱或者开发同学出现误操作之类的...这里模拟一个误update操作,然后恢复. 如果开发同学有误操作之后最好先别乱动生产环境,需要记录几个 ...
- Scala 深入浅出实战经典 第61讲:Scala中隐式参数与隐式转换的联合使用实战详解及其在Spark中的应用源码解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...