Dom直接选择器 使用js创建简单的模态删除框

鳄鱼君

发表文章数:591

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 经验教程 » Dom直接选择器 使用js创建简单的模态删除框

要使用js来让网页动起来,就需要先找到你想要让他动的标签,那么我们来总结一下常见的方法:

1.寻找标签
① 直接寻找
获取单个元素:document.getElementById(‘id名’)—-根据ID获取一个标签
获取多个元素(数组):document.getElementsByTagName(‘tag名’)—-根据标签名字获取
获取多个元素(数组):document.getElementsByName(‘name名’)—-根据name属性获取标签集合
获取多个元素(数组):document.getElementsByClassName(‘class名’)—-根据class属性获取标签集合
② 间接寻找
tag=document.getElementById(‘id名’)
tag.parentElement————寻找父级标签
tag.parentElement.children————父级标签的子标签
tag.parentElement.previousElementSibling————父级标签的兄弟标签


parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

2.操作标签
获取标签中的文本内容:标签的.innerText
对标签内部文本重新赋值:标签.innerText=” “
tag=document.getElementById(‘id名’)
tag.className————修改class属性
tag.classList.add(“样式名”)————添加指定样式
tag.classList.remove(“删除指定样式”)————删除指定样式

重要的就是一些对标签的操作,后面就是通过标签操作,删除或者添加属性,来达到让页面动起来的效果,比方说一些网站的侧边菜单,手机端的侧边菜单,点击会弹出来,再点击会收缩起来,我们可以给标签绑定一个函数事件:onclick="func();",点击的时候就会执行func函数,我们只需要在函数内部做一些操作。我们来看一个简单的实例:

<style type="text/css">
		*{margin: 0;padding: 0}
		.a1{
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-color: black;
			opacity: 0.5;
		}
		.a2{
			position: fixed;
			left: 50%;
			top: 50%;
			margin-left: -250px;
			margin-top: -200px;
			width: 400px;
			height: 400px;
			background-color: white;
			z-index: 10;

		}
		.hide{
			display: none;
		}
	</style>
<input type="submit" value="删除" onclick="ShadModel();">

<!-- 遮罩层开始 -->
<div id="i1" class="a1 hide">
	
</div>
<!-- 遮罩层结束-->
<!-- 弹出框开始 -->
<div  id="i2" class="a2 hide">
	<div class="a3" style="text-align: center;">
		<input type="submit" value="删除" onclick="ShadModel();">
		<input type="submit" value="取消" onclick="HideModel();">
 	</div>
</div>
<!-- 弹出框结束-->
<script type="text/javascript">
	function ShadModel(){
		document.getElementById('i1').classList.remove('hide');
		document.getElementById('i2').classList.remove('hide');
	}
	function HideModel(){
		document.getElementById('i1').classList.add('hide');
		document.getElementById('i2').classList.add('hide');
	}
</script>

忽略样式,我们来看一下思路,在网页中显示的是一个删除按钮,点击之后会弹出一个窗口进行确认操作,可以点击取消按钮,窗口消失。利用js函数为div标签的class属性添加一个hide属性,hide设置为隐藏状态,点击之后删除hide属性,就会显示弹出框,取消按钮在添加hide属性就可以了,简单练习一下,不要纠结于样式。

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《Dom直接选择器 使用js创建简单的模态删除框》 发布于2020-04-18

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

8 + 3 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册