JavaScript(三)

最新推荐文章于 2020-07-21 09:23:10 发布

@ ^ @

最新推荐文章于 2020-07-21 09:23:10 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/jdbfvhxx/article/details/99676108

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了使用JavaScript进行网页导航控制的方法，包括历史记录回退、页面刷新等，并详细讲解了如何通过document对象操作DOM元素的显示状态，利用visibility和display属性实现元素的隐藏与显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

document
getElementById
getElementByTag
getElementByTagName

history
history.back();//回退
history.forword();
history.go()//回退几步

location
location.href(“demo.html”);
location.reload();

object.style.visibility 通过jsp操作样式表
注意：display属性与visibiity属性的区别！

visibility属性：
确定元素显示还是隐藏；

visibility=“visible|hidden”，visible显示，hidden隐藏。
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

display属性:
就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。
其中block和none值最常用。
block：默认值。
当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像

元素一样，它会在那个点被放入到页面中。(实际上你可以设置的display:block，使其可以像

一样工作。
inline:
将display设置为inline，将使其行为和元素inline一样—即使它是普通的块元素如

，它也将会被组合成像那样的输出流。
none：
最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<script>
	function f(){
		history.back();//回退
		//history.forword();

		//history.go()//回退几步
	}
	function ff(){

		//location.href("demo.html");
		location.reload();

	}
	
	function fff(){

		document.getElementById("d").style.visibility='hidden';

	}
	function fff2(){

		document.getElementById("d").style.visibility='visible';

	}
	function fff3(){

		document.getElementById("d").style.visibility="hidden";
	}
	
	
	function gg(){
		
		document.getElementById("d").style.display='none';
	
	}

	function ggg(){
			
		document.getElementById("d").style.display='block';
		
	}


</script>
<BODY>
	<a href="demo.html"> demo.html</a>

	<input type="button" value="前进" onclick="f();"/>
	
	<a href="#" onclick="ff();return false;"></a>
	
	<input type="button" value="style隐藏" onclick="fff();"/>
	
	<input type="button" value="style显示" onclick="fff2();"/>

	<hr/>
	
	<div id="d" style="width:100px;height=100px; border=1px red solid" >
	</div>

	<hr/>

	<input type="button" value="style隐藏" onclick="gg();"/>
	
	<input type="button" value="style显示" onclick="ggg();"/>


</BODY>
</HTML>