JavaScript实例第七天

最新推荐文章于 2022-09-01 14:43:02 发布

APinBom

最新推荐文章于 2022-09-01 14:43:02 发布

阅读量201

点赞数

分类专栏：前端Javascript实例文章标签： HTML JavaScript 链接样式事件处理窗口关闭

本文链接：https://blog.csdn.net/qq_51649346/article/details/120953053

版权

前端Javascript实例专栏收录该内容

20 篇文章 0 订阅

订阅专栏

2021.10.25

实例一、带下划线的链接

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带下划线的链接</title>
</head>
<style>
	a{
		text-decoration: none;
		
	}
	</style>
<body>
	<div css="css-p">
	<a href="#">带下划线的链接(href)</a><br><br>
		<a href="#">带下划线的链接(name)</a><br><br>
	<input type="button" value="为全部链接添加下划线" onClick="addLink()">
	</div>
</body>
	<script type="text/javascript">
		function addLink(){
			var alLink=document.getElementsByTagName("a")
			for(var i=0;i<alLink.length;i++){
				var link=alLink[i];
				link.style.textDecoration="underline";//textDecoration给文本添加装饰，underline为下划线
				
				
			}
			
		}
		
	</script>
</html>

text-decoration:none  //默认，定义标准的文本，没有任何样式，正常显示

text-decoration:underline  //定义文本下的一条线

text-decoration:overline  //定义文本上的一条线

text-decoration:line-through  //定义文本中间的一条线

text-decoration:blink  //定义闪烁的文本， IE、Chrome 或 Safari 不支持 "blink" 属性值。

text-deration:inherit  //从父元素继承text-decoration的值

实例二、改变链接的click事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>改变链接的click事件</title>
</head>

<body>
	<div class="css-p">
	<p>
		<a href="#anchor" id="id-m-link">一个链接</a>
		</p>
		<p>
		<a name="anchor" id="id-m-anchor">一个锚点</a>
		</p>
	</div>
</body>
	<script type="text/javascript">
	window.onload=function(){
		var mlink=document.getElementById("id-m-link");
		mlink.onclick=function(){
			alert("超链接被点击了!");
			return false;

								
								
								}
		
	}
	
	</script>
</html>

锚点类似于书签，第一种方法是跳转到当前页面中指定的位置，即单页面跳转；第二种方法是跳转到其指定的其他页面

实例三、关闭窗口X的链接

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>关闭窗口X链接</title>
</head>

<body>
	<a href="#" id="id-x-link">X</a>
</body>
	<script type="text/javascript">
	var xLink=document.getElementById("id-x-link");
		xLink.onclick=function(){
			window.close();//关闭窗口
			return false;
			
		}
	
	</script>
</html>