style屬性中display和visibility控制可見性的不同

阿新 • • 發佈：2019-01-14

1：使用display屬性實現的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display屬性控制的圖片隱藏與顯示</title>
<script type="text/javascript">
	function showImage() {
		var image = document.getElementById('successImg');
		image.style.display = 'block';
	}
	
	function hideImage() {
		var image = document.getElementById('successImg');
		image.style.display = 'none';
	}
</script>
</head>

<body>
  <div><img id="successImg" src="images/success.jpg" width="200" height="200"/></div>
  <input type="button" name="showButton" value="用display屬性顯示圖片" onclick="showImage();"/>
  <input type="button" name="showButton" value="用display屬性隱藏圖片" onclick="hideImage();"/>
</body>
</html>

當點選"用display屬性顯示圖片"按鈕時的效果圖如下：

當點選"用display屬性隱藏圖片"按鈕時的效果圖如下：

2：使用visibility屬性實現的效果

原始碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>visibility屬性控制的圖片隱藏與顯示</title>
<script type="text/javascript">
	function showImage() {
		var image = document.getElementById('successImg');
		image.style.visibility = 'visible';
	}
	
	function hideImage() {
		var image = document.getElementById('successImg');
		image.style.visibility = 'hidden';
	}
</script>
</head>

<body>
  <div><img id="successImg" src="images/success.jpg" width="200" height="200"/></div>
  <input type="button" name="showButton" value="用visibility屬性顯示圖片" onclick="showImage();"/>
  <input type="button" name="showButton" value="用visibility屬性隱藏圖片" onclick="hideImage();"/>
</body>
</html>

程式正常顯示效果圖：

點選"用visibility屬性隱藏圖片"按鈕效果圖：

style屬性中display和visibility控制可見性的不同

1：使用display屬性實現的效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

轉 opacity() 和 rgba() 的區別？display 和 visibility 有什麽不同？

支持 body text position frame alpha pla 引擎操作一．背景介紹： 1.大家在寫頁面時，會用到各種元素，比如div, img等等。有時候一張頁面會放好幾張圖片，圖片如果顯示效果都一樣，看起來很單調，整個頁面給人的感覺會很硬。那麽

今天我們來討論一下display和visibility兩個CSS屬性。

分享圖片 font images 渲染大神 -s rdp abi css 在討論著兩個屬性之前我們先來看看HTML標簽的全局屬性。就是可以直接在HTML標簽上直接寫的屬性。以下是菜鳥教程的截圖： 1.看以下第一個快捷鍵的屬性accesskey;設置的就不多說了。主要就

CSS中的display和visibility

CSS中的display和visibility 在平時的開發過程中，總是會遇到一些文字在特定的場景下顯示或者隱藏來達到我們想要的效果，css中display和visibility語法，他們都可以隱藏和顯示html元素。看起來貌似一樣，但是

display和visibility之間的區別？

dde clas 布局加載因此發的 aci 透明度無法一、空間占據 display: none; 是徹底消失，不在文檔流中占位，瀏覽器也不會解析該元素 visibility:hidden; 是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會解

display和visibility的區別以及迴流和重繪

display:none會脫離文件流，不佔據頁面空間； visibility:hidden,只是隱藏內容，並沒有脫離文件流，會佔據頁面的空間。講述迴流以及重繪之前需要先了解頁面在文件載入完成之後到完全顯示中間的過程： 1.根據文件生成DOM樹(包括display：none的節點) 2.在D

display和visibility的區別

做前端快一年了，竟然對css的visibility一點印象都沒有，今天總結一下兩者的區別： 1.display:none是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文件流

關於display和visibility

display在隱藏時並不佔用整體寬高所以有的小夥伴們會遇到一個問題。當使用display來製作滑鼠懸浮效果的時候;如果在頂端加入一個圖形（比如三角）使得懸浮可見，這個時候新的圖形顯示出來之後因為display本身隱藏起來的時候是不佔寬高的，但是因為新圖形顯示了出來寬高被撐起來所以圖片會向下

二維碼展示以及display和visibility 區別

html+css:未新增圖片 <div id="er">顯示二維碼</div> <div id="showMa" style="visibility:hidden"> <img style="width: 50px;" src=""

CSS Display(顯示) 與 Visibility（可見性）

display屬性設定一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。隱藏元素 - display:none或visibility:hidden 隱藏一個元素可以通過把display屬性設定為"none"，或把visibility屬性設

JavaScript中物件屬性通過點(.)和方括號([])取值的不同之處

JavaScript中物件屬性通過點(.)和方括號([])取值的不同之處 1、點操作符: 靜態的。右側必須是一個以屬性名稱命名的簡單識別符號。屬性名用一個識別符號來表示。識別符號必須直接出現再js程式中，它們不是資料型別，因此程式無法修改它們。 2、中括號操作符: 動態的。方括號裡必

div style屬性中設定其border無效

本文出自：http://www.cnblogs.com/seasons1987/archive/2013/04/17/3025478.html <div style="border-width:2px; border-style:solid; border-colo

SpringBoot2.0中MVC和WebFlux控制層Controller對比

本篇文章是SpringBoot2.0關於Controller控制層的對比，相信很多開發最好奇的也是這塊。那麼小編就帶著大家一起先來看一下，嚐嚐鮮,本篇文章比較短小精悍,只講如何使用(前面一直在講概念,從這篇開始以後都是程式設計了),注意看圖,至於原理剖析,

overflow,clip,visibility 溢位和剪裁以及可見性

overflow 出於某種原因，一個元素固定為某個特定大小，但內容在元素中放不下。此時可以利用overflow屬性來控制這種情況。值： visible(初始值) | hidden | scroll | auto | 當為預設值visi

iOS中TextField 和 TextView 控制元件的基本使用

介紹-introduction This time I want to create a new simple project which is a self-introduction program to show some fundamental w

c#中Class和Struct使用與性能的區別

回收數據結構 com 垃圾回收父類改變 med .cn 指針在Unity中很多已經定義為結構體的數據結構 Vector2, Vector3 和 Vector4 Rect Color和Color32 Bounds Touch 1.Class為引用類型，Str

Page Visibility(頁面可見性) API介紹、微拓展

這篇文章釋出於 2012年11月29日，星期四，23:30，歸類於 web綜合。閱讀 6

Java 中 long 和 double 的原子性？

@override nbsp ng- field set possible 打印進行 lin JVM中對long的操作是不是原子操作？為什麽對long的操作不是原子的？在硬件，操作系統，JVM都是64位的情況下呢？ java中基本類型中，long和

JS中的style物件中的display屬性和visibility屬性的區別

<html><head><title>標題測試</title><script language="javascript"> function testVisibility() { document.all("tb_0").st

JS中style.display和style.visibility的區別

在JS中可以通過設定style.display或者style.visibility屬性來控制元素是否顯示，在style.display=block和style.visibility=visible的時候，元素被顯示，在style.display=none和style.vis

style屬性中display和visibility控制可見性的不同

相關推薦