【Web前端笔记-基础】第十五课，Javascript的元素属性及属性值问题

最新推荐文章于 2024-06-24 16:48:18 发布

好好学习嘿嘿嘿

最新推荐文章于 2024-06-24 16:48:18 发布

阅读量300

点赞数 1

分类专栏： JavaScript Web 前端基础笔记文章标签：自定义属性 Javascript tab栏切换元素属性获取元素属性设置

本文链接：https://blog.csdn.net/qq_42250032/article/details/103307069

版权

Web 前端基础笔记同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

一：获取元素属性值

element.属性（获取内置属性：元素自带属性，如id,class）
element.getAttribute("属性") （获取自定义属性:下面介绍）

二：设置元素属性值

element.属性=“值” （内置属性设置）
element.setAttribute("属性"，"值") (自定义属性设置)
element.removeAttribute("属性") （移除属性）

三：自定义属性

例子（tab栏的切换）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab栏的切换</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.tab{
				height: 420px;
				width: 700px;
				margin: 100px auto;
			}
			
			.tab_list{
				width: 700px;
				background-color: rgb(245, 239, 246);
				float: left;
			}
			.tab_list ul{
				list-style: none;
				width: 700px;
				height: 30px;
				border-bottom:1px solid #C81623 ;
				
			}
			.tab_list li{
				float: left;
				left: -30px;
				display: block;
				/* width: 90px; */
				height: 30px;
				text-align: center;
				line-height: 30px;
				cursor:pointer;
				/* border: 1px #4169E1 solid; */
				padding: 0 20px 0 20px;
			}
			.tab_con{
				/* float: left; */
				width: 640px;
				/* height: 330px; */
			}
			.tab_list .current{
				background-color: #c81623;
				color: #fff;
				/* border: 1px #4169E1 solid; */
			}	
			.item_info{
				padding:20px 0 0 20px;
			}
			.item{
				display: none;
				
			}
		</style>
		
	</head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价(5000)</li>
					<li>手机社区</li>
				</ul>
				
			</div>
			<div class="tab_con">
				<div class="item" style="display: block;">商品介绍模块内容</div>
				<div class="item">规格与包装模块内容</div>
				<div class="item">售后保障模块内容</div>
				<div class="item">商品评价（50000）模块内容</div>
				<div class="item">手机社区模块内容</div>
			</div>
		</div>
		<script>
			//1.获取事件源
			var tab_list=document.querySelector(".tab_list");
			var lis=tab_list.querySelectorAll("li");
			var items=document.querySelectorAll(".item");
			console.log(items);
			for(var i=0;i<lis.length;i++){
				//开始给5个小li设置自定义属性
				lis[i].setAttribute("data-index",i);
				
				lis[i].onclick=function(){
					for(var i=0;i<lis.length;i++){
						lis[i].className="";
						//排除其他
					}
					this.className="current";
					
					//2.显示内容模块，下面显示与上面一一对应
					//获取当前的index的属性值
					var index=this.getAttribute("data-index");
					for (var i = 0; i < items.length; i++) {
						items[i].style.display="none";
					}
					items[index].style.display='block';
				}
			}
				
				
		</script>
	</body>
</html>

效果：

四：h5定义自定义属性

自定义属性：目的是为了保存并使用数据，这些数据可以保存到页面中，但不保存到数据库中，但是有些属性很容易引起歧义，让人分不清是自定义属性还是内置属性，为了解决这个问题，h5新增了规定，规定自定义属性要以“data-”开头，并且还添加了新的方法来获取自定义属性的值，element.dataset.属性名，或者element.datasre["属性名"]。但是这种方法是由限制的，要IE11以后才支持，另外，如果这个自定义属性名很长，如：data-lis-name，那么获取这个属性值的时候，要写成：data.dataset.lidName.（驼峰命名法）。