Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 国产综合视频在线观看一区,男女做视频网站免费观看,国产一区二区三区四区小蝌蚪 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          「前端小技巧」用CSS隱藏元素的幾種方法
          
        
           
          
	
	
          
		
                        
          言
          2021 年最后一天，疫情還沒有完全結(jié)束，武漢市政府也取消了跨年活動(dòng)。今晚，就連地鐵都提前到 9 點(diǎn)關(guān)閉，大家都在家里跨年。這不，我也在家里跨年。不過我并沒有看晚會(huì)，而是整理了一篇前端小技巧，算是給自己 2021年一個(gè)小小的總結(jié)。
          正文
          用 CSS 隱藏元素有很多種方法，這里介紹 3 種常見的。
          opacity: 0
          特點(diǎn)是【看不見，占空間，摸得著】
          • 元素隱藏
          • 不改變布局
          • 如果綁定了事件，點(diǎn)擊該區(qū)域，是可以觸發(fā)事件的
          visibility: hidden
          特點(diǎn)是【看不見，占空間，摸不著】
          • 元素隱藏
          • 不改變布局
          • 如果綁定了事件，點(diǎn)擊該區(qū)域，是無法觸發(fā)事件的
          display: none
          特點(diǎn)是【看不見，不占空間，摸不著】
          • 元素隱藏
          • 改變布局
          • 如果綁定了事件，點(diǎn)擊該區(qū)域，是無法觸發(fā)事件的
          接下來，我們來編寫代碼驗(yàn)證一下。首先寫入三個(gè)方塊，對中間的橙色方塊添加點(diǎn)擊事件。代碼及頁面效果如下所示：
          <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發(fā)點(diǎn)擊操作 0.0');
            }
        </script>
    </body>
</html>
          image
          image
          image
          opacity: 0
          對中間橙色方塊添加 opacity: 0 樣式，代碼及效果如下：
          • 元素隱藏
          • 不改變布局
          • 如果綁定了事件，點(diǎn)擊該區(qū)域，是可以觸發(fā)事件的
          <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .opacity {opacity: 0}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange opacity' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發(fā)點(diǎn)擊操作 0.0');
            }
        </script>
    </body>
</html>
          image
          image
          image
          visibility: hidden
          對中間橙色方塊添加 visibility: hidden 樣式，代碼及效果如下：
          • 元素隱藏
          • 不改變布局
          • 如果綁定了事件，點(diǎn)擊該區(qū)域，是無法觸發(fā)事件的
          <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .visibility {visibility: hidden}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange visibility' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發(fā)點(diǎn)擊操作 0.0');
            }
        </script>
    </body>
</html>
          image
          image
          image
          display: none
          對中間橙色方塊添加 display: none 樣式，代碼及效果如下：
          • 元素隱藏
          • 改變布局
          • 如果綁定了事件，點(diǎn)擊該區(qū)域，是無法觸發(fā)事件的
          <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .display {display: none}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange display' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('觸發(fā)點(diǎn)擊操作 0.0');
            }
        </script>
    </body>
</html>
          image
          image
          結(jié)尾
          本人 2021 年度成就總結(jié)：
          1. 學(xué)術(shù)方面，憑借個(gè)人努力，在核酸檢測領(lǐng)域產(chǎn)出多份數(shù)據(jù)真實(shí)詳盡的報(bào)告。
          2. 健康方面，保證膳食纖維攝入，具體表現(xiàn)為每日堅(jiān)持吃瓜，吃好瓜，吃大瓜。
          3. 商業(yè)方面，與各大平臺(tái)合作，全面參與投資 618、雙 11、雙 12 等千億級(jí)重大項(xiàng)目。
          4. 環(huán)保方面，股票基金一片綠，綠水青山就是金山銀山。在廢物利用領(lǐng)域更是成績斐然：自己作為廢物，常常被別人利用。
          5. 運(yùn)動(dòng)方面，專注于水上項(xiàng)目，在摸魚、劃水等小項(xiàng)上有突出表現(xiàn)。
          最后，祝大家元旦快樂～
          1）定義n初始值0,
          <script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            "n": 0
        },
        methods: {},
        computed: {},

    })
</script>
          （2）定義自加按鈕，展示n的值，和判斷結(jié)果
          <p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3>
          1、v-show
          <h1 style="color: red">使用v-show進(jìn)行條件渲染</h1>
<h3 v-show="n == 1">使用v-show進(jìn)行條件渲染</h3>
          2、v-if
          <h1 style="color: red">使用v-if進(jìn)行條件渲染</h1>
<h3 v-if="n == 1">使用v-if進(jìn)行條件渲染</h3>
          3、v-if v-else-if v-else
          <h1 style="color: red">使用if else-if else進(jìn)行條件渲染 </h1>
<h3 v-if="n === 1">使用v-if進(jìn)行條件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if進(jìn)行條件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if進(jìn)行條件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if進(jìn)行條件渲染 if else-if - v-else</h3>
          4、template
          <h1 style="color: red">使用template v-if進(jìn)行條件渲染 </h1>
<template v-if="n == 1">
    <h3>使用v-if進(jìn)行條件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if進(jìn)行條件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if進(jìn)行條件渲染 - template v-if="n == 1"</h3>
</template>
          執(zhí)行結(jié)果
          筆記分享
          <pre v-show="true">
    條件渲染：
    1、v-if
        寫法：
            （1）v-if = "表達(dá)式"
            （2）v-else-if = "表達(dá)式"
            （3）v-else = "表達(dá)式"
        適用于：切換頻率較低的場景
        特點(diǎn)：不展示的DOM元素將被直接刪除
        注意：v-if和v-else-if、v-else一起使用的時(shí)候，要求結(jié)構(gòu)不可以被打斷
    2、v-show
        寫法：v-show = "表達(dá)式"
        適用于：切換頻率較高的場景
        特點(diǎn)：不展示的DOM元素未被移除，使用樣式進(jìn)行隱藏
    3、備注
        使用v-if時(shí)，元素可能無法獲取到，使用v-show是可獲取到的
    4、使用template v-if
        寫的時(shí)候template對內(nèi)容進(jìn)行了包裹，
        等最終頁面渲染的時(shí)候，將把template標(biāo)簽刪掉，
        這也就是說不破壞原來的樣式。
        但是template只能配合v-if進(jìn)行使用。
</pre>
          源碼截圖
          TML本身并不能完全防止用戶復(fù)制內(nèi)容，因?yàn)镠TML是一種標(biāo)記語言，它只負(fù)責(zé)定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，而不涉及用戶的行為。但是，您可以使用一些技術(shù)來防止用戶復(fù)制您的網(wǎng)頁內(nèi)容，例如：

          1. 禁用右鍵菜單：您可以使用JavaScript代碼來禁用右鍵菜單，這樣用戶就無法使用右鍵菜單復(fù)制您的內(nèi)容。但是，這種方法并不可靠，因?yàn)橛脩羧匀豢梢允褂闷渌椒▉韽?fù)制內(nèi)容。

          2. 使用CSS樣式：您可以使用CSS樣式來隱藏您的內(nèi)容，例如將文本顏色設(shè)置為與背景顏色相同，這樣用戶就無法看到您的內(nèi)容，也就無法復(fù)制。但是，這種方法可能會(huì)影響您網(wǎng)頁的可讀性和可訪問性。

          3. 使用JavaScript代碼：您可以使用JavaScript代碼來防止用戶復(fù)制您的內(nèi)容，例如在用戶嘗試復(fù)制時(shí)彈出警告框或禁用復(fù)制功能。但是，這種方法可能會(huì)影響用戶體驗(yàn)，并且用戶仍然可以通過其他方法來復(fù)制內(nèi)容。

          總之，HTML本身并不能完全防止用戶復(fù)制內(nèi)容，但是您可以使用一些技術(shù)來增加復(fù)制的難度。但是，這些技術(shù)可能會(huì)影響您網(wǎng)頁的可讀性和可訪問性，因此需要謹(jǐn)慎使用。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲欧美日韩一区二区三区在线
|
爆乳无码AV一区二区三区
|
国内自拍视频一区二区三区
|
国产av一区二区三区日韩|
亚洲一区二区三区高清不卡|
国产suv精品一区二区6|
国产精品一区二区久久|
www亚洲精品少妇裸乳一区二区|
波多野结衣一区视频在线|
国产自产V一区二区三区C|
国产福利一区二区在线视频
|
国产在线一区观看|
色婷婷香蕉在线一区二区|
亚洲国产精品一区二区久久|
亚洲一区二区三区免费|
视频一区视频二区日韩专区|
精品国产免费一区二区|
亚洲中文字幕久久久一区|
3d动漫精品啪啪一区二区免费|
国产一区二区电影在线观看|
亚洲高清成人一区二区三区|
影院无码人妻精品一区二区|
一区二区三区在线免费
|
末成年女A∨片一区二区|
中文字幕一区二区三区在线播放
|
国产av一区二区精品久久凹凸|
日韩精品免费一区二区三区|
亚洲熟女综合色一区二区三区
|
精品一区二区91|
日韩精品一区二三区中文
|
中文字幕日韩人妻不卡一区|
久久久91精品国产一区二区|
a级午夜毛片免费一区二区|
精品成人一区二区三区四区|
中文字幕一区精品|
久久se精品一区二区国产|
久久精品午夜一区二区福利
|
国产亚洲情侣一区二区无码AV|
亚洲一区二区三区在线播放|
在线精品国产一区二区三区
|
动漫精品一区二区三区3d
|