JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
以下内容:
一、获取元素的属性
二、设置元素的属性
三、删除元素的属性
一、获取元素的属性
1-原生JS
获取属性 .getAttribute("属性")
2-jquery
获取属性 .attr("属性")
示例代码
/*jq获取属性*/
var temp = $('.test1').attr('class');
/*js获取属性*/
var temp = document.getElementById('test1').getAttribute('data');
二、设置元素的属性
1-原生JS
设置属性 .setAttribute("属性","值")
2-jquery
设置属性 .attr("属性","值")
实例代码
/*jq设置属性*/
var temp2= $('.test2').attr('class','test-spe');
/*js设置属性*/
var temp2= document.getElementById('test2').setAttribute('data','self-name-2');
三、删除元素的属性
1-原生JS
删除属性 .removeAttribute
2-jquery
删除属性 .removeAttr
示例代码
/*jq删除属性*/
var temp = $('.test1').removeAttr('data');
/*js删除属性*/
var temp = document.getElementById('test1').removeAttribute('data');
以上上面代码实例全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>元素属性</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
}
a{
color: #5579ee;
cursor: pointer;
}
</style>
</head> <body>
<div id="mayouchen" style="width: 500px;margin: 50px auto;">
<a id="test1" class="test1">元素属性获取(class为test1)</a>
<p><span>属性名:</span><span class="test1_2"></span></p>
<br />
<a id="test2" class="test2">元素属性设置(修改class为test2的值为test-spe)</a>
<p><span>设置的属性名:</span><span class="test2_2"></span></p>
<br />
<a id="test3" class="test3" data="self-name">元素属性删除(删除data属性)</a>
<p><span>删除属性名:</span><span class="test3_1"></span></p>
</div>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$('.test1').on('click',function(){
/*jq获取属性*/
var temp = $('.test1').attr('class');
/*js获取属性*/
var temp = document.getElementById('test1').getAttribute('class'); console.log(temp);
$('.test1_2').text(temp);
})
$('.test2').on('click',function(){
/*jq设置属性*/
var temp2= $('.test2').attr('class','test-spe');
/*js设置属性*/
var temp2= document.getElementById('test2').setAttribute('class','test-spe'); var temp_spe = $('.test-spe').attr('class');
$('.test2_2').text(temp_spe);
})
$('.test3').on('click',function(){
var tempSpe = $('.test3').attr('data');
/*jq删除属性*/
var temp = $('.test3').removeAttr('data');
/*js删除属性*/
var temp = document.getElementById('test3').removeAttribute('data'); console.log(tempSpe);
$('.test3_1').text(tempSpe);
})
</script>
</body>
</html>
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)的更多相关文章
- 原生JavaScript支持6种方式获取元素
一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...
- 原生js获取元素非行内样式属性的方法
获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...
- js原生继承几种方式
js原生继承 js本身并没有继承和类的概念,本质上是通过原型链(prototype)的形式实现的. 1.先写两个构造函数Parent和Child,用于将Child继承Parent function P ...
- js 原生JS实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序——获取元素的宽高等属性
微信小程序里面无法像用jquery一样获取到元素的节点.小程序提供了一个wx.createSelectorQuery()来获取元素的相关信息.官方的文档对于它的用法都已经写的很详细了. 我直接上在项目 ...
- JS备忘--子父页面获取元素属性、显示时间,iframe之间互相调用函数
//页面加载完成后执行 $(function () { getHW();}); //当用户改变浏览器大小改变时触发 $(window).resize(function () { setHW(); }) ...
- js:表单校验(获取元素、事件)
1.表单校验步骤 (1)确定事件(submit事件),创建一个函数并和该事件绑定. (2)书写函数对输入的数据是否合法进行校验(需要设定ID并通过ID来获取用户输入的数据的值). (3)输入的信息合法 ...
- jsonrpc.js -- 原生js实现 JSON-RPC 协议
很早以前就涉及到多端远程调用 api的设计,那时候自己设计了个消息传递回调过程.最近了解了JSON-RPC协议,更正规,就可以自己实现下.逻辑也不复杂,没有限制底层消息传递的方式,可以应用到更多的场景 ...
- JS 原生JS 判断滚动条滑动到底部(兼容苹果safari)
ListenerScoller () { var pageIndex = 1; var startX, startY; document.addEventListener('touchstart',f ...
- JS 原生JS 判断滚动条滑动到底部
window.addEventListener("scroll", function(event) { var scrollTop = document.documentEleme ...
随机推荐
- Oracle EBS R12文件系统结构(学习汇总网上资料)
Oracle EBS R12在服务器端文件结构如下: 顶层目录下面分为 1)inst --–跟ebs整个实例(instance)相关的配置信息以及其他信息 2) db ---主要存储DB层的信息 ...
- Android进阶(六)文件读操作
Android中文件的读写操作与Java中文件的读写操作是有区别的.在Java中,读文件操作如以下代码所示: public class FileRead { private static final ...
- C++为什么要设计友元函数和友元类
1. 首先要提一下java,比如java定义一个类1.class,会生成字节码.java有反射机制,可以找到类对象,直接修改类的私有属性.逐渐反射机制成为了一种标准,sun做成标准,JDK的API函数 ...
- 数据拟合:多项式拟合polynomial curve fitting
http://blog.csdn.net/pipisorry/article/details/49804441 常见的曲线拟合方法 1.使偏差绝对值之和最小 2.使偏差绝对值最大的最小 3 ...
- Android Studio查看应用数字签名-android学习之旅(76)
Android Studio和Eclispe还是有比较大的区别,在这地方,eclipse可以直接在设置里面,而AS就需要通过Terminal来查看 步骤 1.首先定位到.android 一般都是在C盘 ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(十)
上篇最后遇到是神马问题呢? 原来由于现在seq动作的时间变得不确定了,jump的持续时间不能对应发生变化,导致可能选手在比赛后边就没有跳跃动作了!这虽不影响整个代码逻辑,却多少有些让玩家不爽. 一种解 ...
- H5的学习之旅-H5的实体(14)
H5有些关键字比如<等等是显示不出来的,这时候,就需要用实体来表示,实体我理解就是最初的编码 代码实例 <!DOCTYPE html> <html lang="en& ...
- 如何实现一个malloc(转)
本文转自博文如何实现一个malloc.就如作者本人所说,该博文大量参考了A malloc Tutorial,所以对照着阅读这两篇文章更能加深理解. 任何一个用过或学过C的人对malloc都不会陌生.大 ...
- hibernate关联对象的增删改查------增
本文可作为,北京尚学堂马士兵hibernate课程的学习笔记. 这一节,我们看看hibernate关联关系的增删改查 就关联关系而已,咱们在上一节已经提了很多了,一对多,多对一,单向,双向... 其实 ...
- python-inotify 在linux上安装
python-inotify 在linux上安装 0 下载 $ wget --no-check-certificate https://pypi.python.org/packages/source/ ...