css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

一、总结

一句话总结：使用的时候直接在元素的样式中设置display和visibility属性即可。推荐使用display，因为他是不占位隐藏。

1、display和visibility的区别？

占位隐藏和不占为隐藏
如何显示。（block显示，inline也可以显示，none隐藏）

2、display有哪三个属性？

block显示，inline也可以显示，none隐藏

3、display的显示隐藏属性和visibility的显示隐藏属性的区别是什么？

display3，visibility才两个，并且写法不同，visibility是显示:visible和隐藏:hidden。

显示和隐藏:
1.display
显示:block|inline
隐藏:none

2.visibility
显示:visible
隐藏:hidden

二、如何控制元素的显示和隐藏（display和visibility的区别是什么）

1、相关知识

显示和隐藏:
1.display
显示:block|inline
隐藏:none

2.visibility
显示:visible
隐藏:hidden

2、代码

display显示时要注意块和行

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

         }

         .line1{

             display:none;

             /*visibility:hidden;*/

         }    

     </style>

     <script src="jquery.min.js"></script>

 </head>

 <body>

     <span class='line1'>aaaaaaaaaaaaaaaaaaaaaaa</span>

     <span class='line2'>bbbbbbbbbbbbbbbbbbbbbbb</span>

     <span class='line3'>ccccccccccccccccccccccc</span>

     <button>显示1</button>

     <button>显示2</button>

     <button>显示3</button>

 </body>

 <script>

     $('button').eq(0).click(function(){

         $('.line1').css({'display':'inline'});

     })

 </script>

 </html>
 

css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）的更多相关文章

  1. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  2. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  3. legend3---19、要更多的从服务器端控制元素的显示和隐藏，而不要是页面端

    legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...

  4. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...

  5. jquery控制元素的显示与隐藏

    比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...

  6. react中控制元素的显示与隐藏

    1.通过 state 变量来控制是否渲染元素 类似于 vue 的 v-if 方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的. class Demo extends Re ...

  7. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  8. JS控制元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  9. js控制元素的显示与隐藏

    <body class="easyui-layout"> <div id = "centerId" data-options="re ...

随机推荐

  1. 从硬件到语言，详解C++的内存对齐（memory alignment）（一）

    作者:赵宗晟 出处:https://www.cnblogs.com/zhao-zongsheng/p/9099603.html 很多写C/C++的人都知道“内存对齐”的概念以及规则,但不一定对他有很深 ...

  2. Java语言的Hook实现

    引言:最近在玩完美时空的诛仙Online(不知道这里有没人有共同爱好的),这个游戏每晚七点会出现一个任务"新科试炼".这个任务简单地说就是做选择题,范围小到柴米油盐,大到世界大千, ...

  3. svn: Can&#39;t convert string from &#39;UTF-8&#39; to native encoding 解决的方法

    今天在down代码时遇到了例如以下问题: [xxx@xxx ~]$ svn co https://xxxxxxxxxxxxx svn: Can't convert string from 'UTF-8 ...

  4. Catch Me If You ... Can't Do Otherwise--转载

    原文地址:https://dzone.com/articles/catch-me-if-you-cant-do-otherwise I don't know whether it's an anti- ...

  5. Android-ViewPager+Fragment数据更新问题

    由于FragmentPagerAdapter内部存在缓存.因此调用notifyDataSetChanged()并不可以去更新Fragment的内容. 參考:http://www.devba.com/i ...

  6. [React & Testing] Snapshot testings

    For example we have a React comonent: -- A toggle button, we want to test. When it si toggle on, the ...

  7. js课程 6-15 js简单弹力球如何实现

    js课程 6-15 js简单弹力球如何实现 一.总结 一句话总结:a.通过document的documentElement属性获取可是区域的高: b.通过增值变为负的实现到底部后反弹 1.docume ...

  8. 逆波兰法（计算器）程序<无括号版>

    涉及队列.栈的运用. Java中队列可以用: Queue<String> q = new LinkedList(); 来声明,其主要的方法有: poll(),peak(),offer(), ...

  9. 15、python学习手册之：列表和字典

    1.列表属于可变序列,支持在原处的修改 2.在标准python解锁器内部,列表就是C数组而不是链接结构 3.内置函数map对序列中的各项应用一个函数并把结果收集到一个新的列表中 eg:list(map ...

  10. 【CS Round #43 E】Coprime Pairs

    [链接]点击打开链接 [题意] 让你选择n个数字,组成一个数组,使得这n个数字中恰好有k对,它们是互质的. [题解] 我们可以先找出前n个质数,那么接下来的问题就转化为,凑出rest = n*(n-1 ...