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 ...
随机推荐
- 在php中,如何将一个页面中的标签,替换为用户想输出的内容
前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例 ...
- Leetcode 27 Remove Element STL
和remove zero类似的方法完成该题 class Solution { public: int removeElement(vector<int>& nums, int va ...
- [原创]Java静态代码检查工具介绍
[原创]Java静态代码检查工具介绍 一 什么是静态代码检查? 静态代码分析是指无需运行被测代码,仅通过分析或检查源程序的语法.结构.过程.接口等来检查程序的正确性,找出代码隐藏的错误和缺陷,如参数 ...
- HOWTO: InstallScript MSI工程取Log
InstallShield的各种类型安装包如果遇到安装问题(尤其是在客户安装时遇到问题),获取Log分析是最有效的方法之一. 对于封装一个Setup.exe的InstallScript MSI工程,我 ...
- Java SimpleDateFormat[转]
[补充] [转] http://stackoverflow.com/questions/2603638/why-cant-this-simpledateformat-parse-this-date-s ...
- 求n*m网格内矩形的数目
一个n*m的网格,求这个网格中矩形的数目. 比如以下2*2网格,总共有9个矩形:4个1*1的矩形,4个1*2的矩形,1个2*2的矩形 算法1:动态规划,假设dp[i][j]表示以第 i 行第 j ...
- Android系列---JSON数据解析
您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内 ...
- easyui中 在子tabs中 添加新的tabs
function addToParentTab(title, url) { self.parent.addTabIgnoreExist(title, url, 'icon-cha ...
- Oracle中group by用法
Oracle中group by用法 在select 语句中可以使用group by 子句将行划分成较小的组,一旦使用分组后select操作的对象变为各个分组后的数据,使用聚组函数返回的是每一个组的汇总 ...
- 使用dynamic类型改进反射
首先还是声明一下,使用场景: 1.如果编译时函数名称确定,对象类型运行时确定,那么运用dynamic是一个好主意.2.如果编译时函数名称确定,对象类型在编译时也确定,那就既不需要反射也不需要dynam ...