JavaScript-14（操纵属性和window） 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用JS操纵属性和window</title>
		<style type="text/css">
			.tiaozhuan{
				width: 50px;
				height: 20px;
				border-radius: 5px;
				background-color: orange;
				color: white;
				text-align: center;
				line-height: 20px;
				margin-top: 12px;
			}
		</style>
	</head>
	<body>
		<!--创造一个图片，然后用js实现点击它更换引用路径-->
		<img src="../img/fengjing.jpg" width="300px"height="170px" onclick="ghlj()"/>
		<!--点击下面的跳转，通过函数运用window.location.href命令将窗口跳转到指定路径-->
		<div class="tiaozhuan" onclick="tiaozhuan1()">
			跳转
		</div>
		<!--点击下面的刷新，通过函数运用window.location.reload()命令将窗口刷新-->
		<div class="tiaozhuan" onclick="shuaxin()">
			刷新
		</div>
		<!--点击下面的向后翻页，通过函数运用window.history.go(1)命令将窗口向后翻，如果将()中改为-1，则向前翻页-->
		<div class="tiaozhuan" onclick="xh()">
			向后翻页
		</div>
		
	</body>
</html>

<script type="text/javascript">
	//用tupian这个变量接收img标签的集合
	var tupian = document.getElementsByTagName("img");
	//运用getAttribute获得这个图片的src属性值；运用setattribute命令把这个图片的“src”属性设为想要改变的图片路径
	function ghlj(){
		alert(tupian[0].getAttribute("src"));
		tupian[0].setAttribute("src","../img/aiji.jpg");
	}
	function tiaozhuan1(){
		window.location.href = "../0328/HTMLjiaocheng.html";
	}
	function shuaxin(){
		window.location.reload();
	}
	function xh(){
		window.history.go(1);
	}
</script>

　　

posted @ 2018-04-16 19:42  张锐0328  阅读(106)  评论(0)    收藏  举报