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> ...
随机推荐
- 取得cxgrid的表格的值,仔细看下面的代码
procedure TfrmMain.cxGridDBTableView_List_PSSJCustomDrawCell(Sender: TcxCustomGridTableView; ACanvas ...
- IntelliJ IDEA通过maven构建ssm项目找不到mapper
idea运行ssm项目的时候一直报错 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 原 ...
- SQLSERVER CXPACKET 等待
--SQLSERVER CXPACKET 等待 2013-6-11 2 --联机丛书: 3 --当尝试同步查询处理器交换迭代器时出现.如果针对该等待类型的争用成为问题时,可以考虑降低并行度 4 5 6 ...
- sql server 字符串分割函数
),)) )) as begin ) set @SourceSql=@SourceSql+@StrSeprate while(@SourceSql<>'') begin )) insert ...
- 【问题解决方案】Keras手写数字识别-ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接
参考:台大李宏毅老师视频课程-Keras-Demo 在载入数据阶段报错: ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接 Google之 ...
- [学习笔记]状压dp
状压 \(dp\) 1.[SDOI2009]Bill的挑战 \(f[i][j]\) 表示匹配到字符串的第 \(i\) 位状态为 \(j\) 的方案数 那么方程就很明显了,每次枚举第 \(i\) 位的字 ...
- cad 关键字被保留了?选择集关键字保留了? N S W E关键字无法用?
N S W E是东南西北四个方位,s是南方270度,在设置关键字的时候必须避开这四个关键字. 设置早期的R14 也有.
- Android常用布局属性解析 -- Layout_weight
Layout_weight是Android开发中一个比较常用的布局属性,在面试中也经常被问到.下面通过实例彻底搞懂Layout_weight的用法. 先看下面的布局代码: <?xml versi ...
- 利用Makefile安装helloworld模块(速成)
这学期对了一门操作系统,满怀着好奇装了虚拟机然后安了Ubuntu,这周作业是编译内核和安装个模块,妈耶,折腾了我一两天.终于弄完,CSDN上有挺多类似的教程,例如陈皓的跟我一起写Makefile,写的 ...
- POJ 2501
#include<iostream> #include<iomanip> #include<stdio.h> #include<string> #inc ...