dom操作------操作元素属性的若干方法
// 1,通过HTMLElement类型的属性来获得和设置元素特性(设置的是元素属性,比如class,id,title,而不是css样式,比如float,border等)
let div = document.getElementById("div");
let link = document.getElementById("link");
// 获取
const id = div.id;
const classname = div.className;
const title = div.title;
const href = link.href;
// 设置
div.id = "boxes";
div.className = "test";
div.title = "我是标题";
link.href = "http://www.sina.com.cn"; // 2,通过getAttribute()、setAttribute() 方法,获取、设置、移除元素的特性
// 获取
div.getAttribute("id");
div.getAttribute("class");
link.getAttribute("href");
// 设置
div.setAttribute("id","myDiv");
div.setAttribute("title","我也是标题哦");
link.setAttribute("href","link.html");
// 注:不建议使用该特性设置元素的类名(浏览器不兼容),设置类名可以这样:document.getElementById("myDiv").className=("***"); // 3,通过attributes属性,获取、设置、移除元素的特性
// 获取
id2 = div.attributes["id"].nodeValue;
// 设置
div.attributes["id"].nodeValue = "myDiv2"; // 4,移除元素属性的方法
div.removeAttribute("class");
div.attributes.removeNamedItem("class"); // 5,追加类名的方法(以上设置属性值的方法,均是将原值替换掉,因为类名可以同时存在多个值,故需要增加和删除)
el.classList.add("classname");
el.classList.remove("classname");
注:classList兼容IE>=10,以下版本的兼容实现方法如下(该方法为网络上照抄的写法):
if (!("classList" in document.documentElement)) { Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function() {
const self = this;
function update(fn) {
return function(value) {
let classes = self.className.split(/\s+/g);
let index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(" ");
}
} return {
add: update(function(classes, index, value) {
if (!~index) classes.push(value);
}), remove: update(function(classes, index) {
if (~index) classes.splice(index, 1);
}), toggle: update(function(classes, index, value) {
if (~index)
classes.splice(index, 1);
else
classes.push(value);
}), contains: function(value) {
return !!~self.className.split(/\s+/g).indexOf(value);
}, item: function(i) {
return self.className.split(/\s+/g)[i] || null;
}
};
}
});
}
dom操作------操作元素属性的若干方法的更多相关文章
- jquery 用于操作动态元素的delegate/on方法
delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素). 在做项目中有很多由ajax动态生成的html标签,jquery对这些标签不会响应\((selector).c ...
- “无法更新EntitySet“*****”,因为它有一个DefiningQuery,而元素中没有支持当前操作的元素”问题的解决方法
百思不得其解,最后发现 1:实体中的表必须有主键(数据库中的表必须有主键),如果没有,会有这样的提示 2:主键设置好后,运行还是会出现类似问题,那就一个郁闷 1):方法一:先从EF中删除刚设置主键的模 ...
- robotframework,移动端(小程序)自动化,获取元素属性值的方法
如下图,获取商品价格 属性值显示在content-desc内 传统的get text指定是无法获得到这个元素指定属性的值的 只有通过使用AppiumLibrary.get element attrib ...
- jQuery元素属性操作
在jQuery中,用attr()方法来获取或者设置元素属性,removeAttr()方法用来删除元素属性. attr() 实例: var $para=$('p');//获取<p>节点 va ...
- JS-002-修改元素属性(以按钮示例)
此文以修改 button 元素属性(例如:添加属性.修改属性.修改颜色样式.边框样式等)为简单示例,演示 js 修改 HTML 元素属性的基本方法,敬请参阅.若有不足之处敬请指正,不胜感激! 多不闲述 ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- Javascript操作元素属性方法总结
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript 操作元素属性的方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 调用azkaban接口,upload 本地zip文件
使用azkaban部署任务,可以将job文件打成zip包,通过web页面上传. 如图 但是当我们实践CI持续化部署的时候,要实现自动的部署上线. 这时就要调用azkaban提供的api. 地址如下:h ...
- Allegro中常见的文件格式
allegro/APD.jrl : 记录开启 Allegro/APD 期间每一个执行动作的 command .产生在每一次新开启 Allegro/APD 的现行工作目录下 .env : 存在 pcbe ...
- Python自动化开发 - 面向对象(一)
本节内容 1.编程范式 面向过程编程 面向对象编程 2.面向对象编程介绍 类的语法 类与实例内存分配 构造方法 自定义方法 3.面向对象特性 一.编程范式 编程是程序员 用特定的语法+数据结构+算法组 ...
- oracle 中top-n的使用
对于ms sqlserver数据库中可以直接使用top(n)提取前N 个结果,而oracle中并不能直接使用的.oracle中提供了对于提取前N 条的结果的方法 那就是用行编号 例如:select ...
- [C# 开发技巧]如何防止程序多次运行
一.引言 最近发现很多人在论坛中问到如何防止程序被多次运行的问题的,如: http://social.msdn.microsoft.com/Forums/zh-CN/6398fb10-ecc2-4c0 ...
- 【计算机网络】 网络体系结构分类: 客户机/服务器体系和P2P
网络体系结构的分类 现代网络应用程序有两种主流的体系结构: 客户机/服务器体系结构和P2P体系结构(peer to peer “对等”) 一 . 客户机/服务器体系结构 客户机/服务器体系 ...
- 522. Longest Uncommon Subsequence II
Given a list of strings, you need to find the longest uncommon subsequence among them. The longest u ...
- 【062有新题】OCP 12c 062出现大量之前没有的新考题-16
choose one Which users are created and can be used for database and host management of your DBaaS da ...
- 关于IE9 table显示错位的问题
首先,win10无法安装IE9,所以需要用IE11模拟IE9,这样:http://www.w10zj.com/Win10xy/Win10yh_638.html: 其次,table显示错位的可能原因:h ...
- sync.WaitGroup和sync.Once
sync.WaitGroup,顾名思义,等待一组goroutinue运行完毕.sync.WaitGroup声明后即可使用,它有如下方法: func (wg *WaitGroup) Add(delta ...