整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「前端小技巧」用CSS隐藏元素的几种方法

2021 年最后一天,疫情还没有完全结束,武汉市政府也取消了跨年活动。今晚,就连地铁都提前到 9 点关闭,大家都在家里跨年。这不,我也在家里跨年。不过我并没有看晚会,而是整理了一篇前端小技巧,算是给自己 2021年一个小小的总结。


正文

用 CSS 隐藏元素有很多种方法,这里介绍 3 种常见的。

opacity: 0

特点是【看不见,占空间,摸得着

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是可以触发事件的

visibility: hidden

特点是【看不见,占空间,摸不着

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的

display: none

特点是【看不见,不占空间,摸不着

  • 元素隐藏
  • 改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的

接下来,我们来编写代码验证一下。首先写入三个方块,对中间的橙色方块添加点击事件。代码及页面效果如下所示:

<!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('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

image

image

opacity: 0

对中间橙色方块添加 opacity: 0 样式,代码及效果如下:

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是可以触发事件的
<!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('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

image

image

visibility: hidden

对中间橙色方块添加 visibility: hidden 样式,代码及效果如下:

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的
<!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('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

image

image

display: none

对中间橙色方块添加 display: none 样式,代码及效果如下:

  • 元素隐藏
  • 改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的
<!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('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

image


结尾

本人 2021 年度成就总结:

  1. 学术方面,凭借个人努力,在核酸检测领域产出多份数据真实详尽的报告。
  2. 健康方面,保证膳食纤维摄入,具体表现为每日坚持吃瓜,吃好瓜,吃大瓜。
  3. 商业方面,与各大平台合作,全面参与投资 618、双 11、双 12 等千亿级重大项目。
  4. 环保方面,股票基金一片绿,绿水青山就是金山银山。在废物利用领域更是成绩斐然:自己作为废物,常常被别人利用。
  5. 运动方面,专注于水上项目,在摸鱼、划水等小项上有突出表现。

最后,祝大家元旦快乐~

1)定义n初始值0,

<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            "n": 0
        },
        methods: {},
        computed: {},

    })
</script>

(2)定义自加按钮,展示n的值,和判断结果

<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进行条件渲染</h1>
<h3 v-show="n == 1">使用v-show进行条件渲染</h3>

2、v-if

<h1 style="color: red">使用v-if进行条件渲染</h1>
<h3 v-if="n == 1">使用v-if进行条件渲染</h3>

3、v-if v-else-if v-else

<h1 style="color: red">使用if else-if else进行条件渲染 </h1>
<h3 v-if="n === 1">使用v-if进行条件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if进行条件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if进行条件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if进行条件渲染 if else-if - v-else</h3>

4、template

<h1 style="color: red">使用template v-if进行条件渲染 </h1>
<template v-if="n == 1">
    <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if进行条件渲染 - template v-if="n == 1"</h3>
</template>

执行结果

笔记分享

<pre v-show="true">
    条件渲染:
    1、v-if
        写法:
            (1)v-if = "表达式"
            (2)v-else-if = "表达式"
            (3)v-else = "表达式"
        适用于:切换频率较低的场景
        特点:不展示的DOM元素将被直接删除
        注意:v-if和v-else-if、v-else一起使用的时候,要求结构不可以被打断
    2、v-show
        写法:v-show = "表达式"
        适用于:切换频率较高的场景
        特点:不展示的DOM元素未被移除,使用样式进行隐藏
    3、备注
        使用v-if时,元素可能无法获取到,使用v-show是可获取到的
    4、使用template v-if
        写的时候template对内容进行了包裹,
        等最终页面渲染的时候,将把template标签删掉,
        这也就是说不破坏原来的样式。
        但是template只能配合v-if进行使用。
</pre>

源码截图

TML本身并不能完全防止用户复制内容,因为HTML是一种标记语言,它只负责定义网页的结构和内容,而不涉及用户的行为。但是,您可以使用一些技术来防止用户复制您的网页内容,例如:


1. 禁用右键菜单:您可以使用JavaScript代码来禁用右键菜单,这样用户就无法使用右键菜单复制您的内容。但是,这种方法并不可靠,因为用户仍然可以使用其他方法来复制内容。


2. 使用CSS样式:您可以使用CSS样式来隐藏您的内容,例如将文本颜色设置为与背景颜色相同,这样用户就无法看到您的内容,也就无法复制。但是,这种方法可能会影响您网页的可读性和可访问性。


3. 使用JavaScript代码:您可以使用JavaScript代码来防止用户复制您的内容,例如在用户尝试复制时弹出警告框或禁用复制功能。但是,这种方法可能会影响用户体验,并且用户仍然可以通过其他方法来复制内容。


总之,HTML本身并不能完全防止用户复制内容,但是您可以使用一些技术来增加复制的难度。但是,这些技术可能会影响您网页的可读性和可访问性,因此需要谨慎使用。