DOM基础学习2

begin 专注

已于 2022-04-10 21:58:15 修改

阅读量800

点赞数

文章标签： html 前端 javascript

于 2022-04-10 21:53:14 首次发布

本文链接：https://blog.csdn.net/qq_61718994/article/details/124073594

版权

学习内容：密码输入的显示与隐藏练习，元素操作--修改样式属性，排他思想，自定义属性的操作，tab栏切换练习

学习笔记：

密码输入的显示于隐藏练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document</title>
		<style>
			.box {
				position: relative;
				width: 400px;
				border-bottom: 1px solid #ccc;
				margin: 100px auto;
			}
			.box input {
				width: 370px;
				height: 30px;
				border: 0;
				outline: none;
			}
			img{
				position: absolute;
				top: 10px;
				right: 2px;
				width: 30px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<label for="">
				<img src="../images/bi.png" alt="" id="eye"/>
			</label>
			<input type="password" name="" id="pwd" value="" />
		</div>
		<script>
            //获取元素
			var eye=document.getElementById('eye');
			var pwd=document.getElementById('pwd');
			var flag=0;
            //注册事件 事件处理
			eye.onclick = function() {
				if(flag == 0){
					pwd.type='text';
					eye.src='../images/zheng.png'
					flag=1;
				}else{
					pwd.type='password';
					eye.src='../images/bi.png';
					flag=0;
				}
			}
		</script>
	</body>
</html>

点击前

点击后：

元素操作-修改样式属性

可以通过JS修改元素的大小、颜色、位置等样式。

element.style 行内样式操作

element.className 类名样式操作

注意：

1.JS里面的样式采取驼峰命名法比如 fontSize backgroundColor

2.JS修改style样式操作，产生的是行内样式，css权重比较高

使用element.style修改样式

适合样式比较少或者功能简单的情况下使用

示例练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document</title>
         <style>
         	div {
         		width: 200px;
         		height: 200px;
         		background-color: pink;
         	}
         </style>
	</head>
	<body>
		<div>
			
		</div>
		<script>
			var div =document.querySelector('div');
			div.onclick=function() {
				this.style.backgroundColor='purple';
				this.style.height='300px';
			}
		</script>
	</body>
</html>

点击前：

点击后：

使用className修改样式

适合于样式较多或者功能复杂情况下使用

注意：

1.class是个保留字，因此使用className来操作元素类名属性

2.className会直接更改元素的类名，会覆盖原先的类名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>docuument</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			.change {
				width: 150px;
				height: 150px;
				background-color: aliceblue;
				font-size: 24px;
			    text-align: center;
			    line-height: 150px;
			}
		</style>
	</head>
	<body>
		<div>
			文本
		</div>
		<script>
			var test=document.querySelector('div');
			test.onclick=function() {
				this.className='change';
			}
		</script>
	</body>
</html>

点击前：

点击后：

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1.把所有元素全部清除样式

2.给当前元素设置样式

3.注意顺序不能颠倒，先清除所有样式再设置自己的样式

自定义属性的操作

获取属性值

1.element.属性获取属性值

2.element.getAttribute('属性')

我们自己添加定义的属性称为自定义属性，当我们添加了自定义属性并且想要获得自定义属性的时候，可以使用element.getAttribute('属性')来获取

区别：

element.属性获取内置属性值（元素本身自带的属性）

element.getAttribute('属性')；主要获取自定义属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document</title>
	</head>
	<body>
		<div id="demo"  index='1'>
			
		</div>
		<script>
			//1.element.属性
			var div = document.querySelector('div');
			console.log(div.id);
			//2.element.getAttribute('属性')
			console.log(div.getAttribute('id'));
			console.log(div.getAttribute('index'));
		</script>
	</body>
</html>

设置自定义属性

element.属性='值' 设置内置属性

element.setAttribute('属性','值'); 主要设置自定义属性

class比较特殊

用element.属性设置的时候属性写className

而element.setAttribute('属性','值'); 设置的时候属性写class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document</title>
	</head>
	<body>
		<div id="demo"  index='1'>
			
		</div>
		<script>
			//1.element.属性
			var div = document.querySelector('div');
			console.log(div.id);
			//设置内置属性
			div.id='Demo';
			console.log(div.getAttribute('id'));
			//2.element.getAttribute('属性')
			//console.log(div.getAttribute('id'));
			console.log(div.getAttribute('index'));
			//设置自定义属性
			div.setAttribute('index','2');
			console.log(div.getAttribute('index'));
		</script>
	</body>
</html>

移除属性

removeAttribute(属性) 移除属性

H5自定义属性

自定义属性目的：是为了保存并使用数据，有些数据可以保存到页面中而不保存到数据库中。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：

设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值。比如:

<div data-index= "1"></div>

获取H5自定义属性

h5新增的获取自定义属性的方法它只能获取以data开头的属性

如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法

1.兼容性获取 div.getAttribute('data-index')

2.H5新增 div.dataset.index 或者 div.dataset['index']

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document</title>
	</head>
	<body>
		<div getTime="20" data-index = "1" data-list-name="day"></div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			div.setAttribute('data-time','20');
			console.log(div.getAttribute('data-index'));
			//h5新增的获取自定义属性的方法  它只能获取以data开头的属性
			//dataset 是一个集合 里面存放了所有一data开头的自定义属性
			console.log(div.dataset);
			console.log(div.dataset.index);
			console.log(div.dataset['index']);
			//如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
			console.log(div.dataset.listName);
			console.log(div.dataset['listName']);
		</script>
	</body>
</html>

tab栏切换练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document</title>
		<style>
			.tab {
				width: 100%;
			}
			.tab_list {
				width: 100%;
				height: 39px;
				
			}
			.tab_list ul {
				list-style: none;
			}
			.tab_list li {
				float: left;
				height: 39px;
				padding: 0 20px;
				line-height: 39px;
				text-align: center;
				cursor: pointer;
			}
			.tab_list .current {
				background-color: red;
				color: #fff;
			}
			.tab_con {
				margin:10px 0 0 40px;
				
			}
			.item {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价(50000)</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 type="text/javascript">
			var tab_list = document.querySelector('.tab_list');
			var lis = tab_list.querySelectorAll('li');
			var items=document.querySelectorAll('.item');
			for(var i = 0;i < lis.length;i++) {
				//一开始给五个li设置索引号
				lis[i].setAttribute('index',i);
				lis[i].onclick = function() {
					//干掉所有人
					for(var i = 0;i < lis.length;i++) {
						lis[i].className='';
					}
					//留下我自己
					this.className='current';
					//2.下面的显示内容模块
					var index = this.getAttribute('index');
					for(var i = 0;i < items.length;i++) {
						items[i].style.display = 'none';
					}
					items[index].style.display = 'block';
				}
			}
		</script>
	</body>
</html>

begin 专注

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基础学习2

学习内容：密码输入的显示于隐藏练习，元素操作--修改样式属性，排他思想，自定义属性的操作，tab栏切换练习学习笔记：密码输入的显示于隐藏练习<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>document</title> <style> .box { position: relative; width:
复制链接

扫一扫