JS---DOM---自定义属性引入和移除
总结:在html标签中添加的自定义属性, 如果想要获取这个属性的值, 需要使用getAttribute("自定义属性的名字")才能获取这个属性的值
- html标签中有没有什么自带的属性可以存储成绩的----没有
- 本身html标签没有这个属性, 自己(程序员)添加的----自定义属性---为了存储一些数据
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
</head> <body>
<ul>
<li score="60">张三的数学成绩</li>
<li score="90">赵四的数学成绩</li>
<li score="90">王五的数学成绩</li>
<li score="80">唐七的数学成绩</li>
<li score="50">宋八的数学成绩</li>
</ul>
<script src="common.js"></script>
<script>
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onclick = function () {
// alert(this.score);//弹出undefined
alert(this.getAttribute("score"));
};
}
</script>
</body>
移除自定义属性:removeAttribute("属性的名字")
<input type="button" value="移除自定义属性" id="btn" />
<div id="dv" score="80分" class="cls"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
// my$("dv").removeAttribute("score");
// my$("dv").className = "";
//也可以移除元素的自带的属性
my$("dv").removeAttribute("class");
};
</script>
JS---DOM---自定义属性引入和移除的更多相关文章
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- JS DOM(文档对象模型)与BOM(浏览器对象模型)
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- 货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- 关于Yii2中CSS,JS文件的引入心得
js和css的引入 use yii\helpers\Html; 1.全局引入,所有的view生效 /assets/AppAsset.php public $css = [ 'css/site.css' ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- 怎样使用自定义标签简化 js、css 引入?
国庆将至,工作兴致全无,来总结点项目里平时不起眼干货. 前端引入 js .css 一般是这样: <script type="text/javascript" src=&quo ...
随机推荐
- Android 内存泄漏原因
Android 手机给应用分配的堆内存通常是8 M 左右, 如果内存处理不当很容易造成 OOM (OutOfMemoryError),OOM 主要由于一下这些原因引起的: 1. 数据库 Cursor ...
- dubbo 发布 RPC 服务
Dubbo 发布 RPC 服务 建立服务提供者项目 pom.xml <?xml version="1.0" encoding="UTF-8"?> & ...
- CF 1131A,1131B,1131C,1131D,1131F(Round541 A,B,C,D,F)题解
A. Sea Battle time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- Spring Security OAuth2 Demo —— 密码模式(Password)
前情回顾 前几节分享了OAuth2的流程与授权码模式和隐式授权模式两种的Demo,我们了解到授权码模式是OAuth2四种模式流程最复杂模式,复杂程度由大至小:授权码模式 > 隐式授权模式 > ...
- 【Python必学】Python爬虫反爬策略你肯定不会吧?
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 正文 Python爬虫反爬策略三部曲,拥有这三步曲就可以在爬虫界立足了: ...
- ARTS-S k8s常用命令
本地访问minikube的docker eval $(minikube docker-env) 删除statefulset kubectl delete statefulset web --casca ...
- 【Cute-Webpack】Webpack4 入门手册(共 18 章)
介绍 1. 背景 最近和部门老大,一起在研究团队[EFT - 前端新手村]的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平. 本文也是属于[E ...
- wxxcx_learn独立验证与REST
模块,控制器,方法 validate 接口参数校验 独立验证(验证器对独立验证做了更好的封装) $date = [ 'name' => '111', 'email' => '123@qq ...
- python学习-文件创建读取
# 文件创建 # 读写# 文件存在?不存在?在操作系统上# 读 read r 写 write w# 打开一个文件# fs = open("xiaojian.txt",encodin ...
- Runtime - 关联对象使用方法及注意点
大家都知道在分类里,可以间接的添加属性,运用runtime关联对象. 如下图,只是声明了btnClickedCount的set, get方法而已 并没有生成_btnClickedCount 成员变量, ...