css隐藏原速

最新推荐文章于 2024-04-19 06:52:26 发布
最新推荐文章于 2024-04-19 06:52:26 发布
阅读量231 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangmin113659/article/details/64494182
版权

我们有几种方式可以隐藏一个元素：

  1. CSS display的值是none。
  2. type="hidden"的表单元素。
  3. 宽度和高度都显式设置为0。
  4. 一个祖先元素是隐藏的，该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0
<!DOCTYPE html>
<html>


<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>


<body>
    <h2>可见性筛选选择器</h2>
    <h3>:visible/:hidden</h3>
    <div class="left">
        <div class="div">
            <a>display</a>
            <p id="div1" style="display:none;">display</p>
        </div>
        <div class="div">
            <a>width</a>
            <a>height</a>
            <p id="div2" style="width:0;height:0">width/height</p>
        </div>
        <div class="div">
            <a>visibility</a>
            <a>opacity</a>
            <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
        </div>
    </div>


    <p id="show"></p>
    <script type="text/javascript">
        function show (ele) {
            if (ele instanceof jQuery) {
                $("#show").html('元素的长度的 = ' + ele.length)
            } else {
                alert(ele+' 不是jQuery对象')
            }
        }
    </script>




    <script type="text/javascript">
        //查找id = div1的DOM元素,是否可见
      // show($('#div1:visible' ));//0  display:none
       //查找id = div1的DOM元素,是否隐藏
        // show( $('#div1:hidden' ));//1  display:none
    </script>


    <script type="text/javascript">
        //查找id = div2的DOM元素,是否可见
        //show($('#div2:visible'));//0  width:0;height:0
         //查找id = div2的DOM元素,是否隐藏
      // show( $('#div2:hidden' ));//1  width:0;height:0
    </script>


  
    <script type="text/javascript">
        //查找id = div3的DOM元素,是否隐藏
     // show( $('#div3:hidden' ));//0 visibility:hidden;opacity:0


       //  查找id = div3的DOM元素,是否可见
        show( $('#div3:visible' ) );//1  visibility:hidden;opacity:0
    </script>






</body>


</html>
huangminmin1001
关注
专栏目录
css总结及常考问题
zhaohb2016的博客
07-11 697
参考问题介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？box-sizing属性？css模型的盒模型都具备content，padding，border,margin这些属性伪类：表示已存在的某个元素的某种状态，通过dom树结构又无法表示，就通过伪类来添加样式。 ：link，：visited,;hover,:first-child,:last-child,:disabled,:enabled伪元素：顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由
原生js、html、css实现自定义select框（带搜索框和滚动条）
Blank
10-14 4932
原生js、html、css实现自定义select框（带搜索框和滚动条）
CSS_控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）
小歪博客
10-20 7575
当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。 <video controls></video> //全屏按钮 video::-webkit-media-controls-fullscreen-button { display: none; } //播放按钮 video::-webkit-media-controls-play-button { display: non
将近20年，CSS终于在所有现代浏览器实现了原生嵌套语法！！！
linwu的博客
07-20 436
CSS嵌套使开发者能够以更直观和组织良好的方式编写样式规则。它有助于减少代码重复、提高可读性，并提供更好的维护性和重构能力。使用嵌套时，确保理解如何正确放置选择器和使用符号来连接或附加选择器。此外，熟悉无效的嵌套示例，以避免错误。在实际使用CSS嵌套时，请记住进行功能检测，并考虑适当的回退或替代方案，以确保在不支持嵌套的浏览器中也能提供一致的体验。最后，请记住，嵌套应该是有意义的，并且应该提高代码的可读性和可维护性。避免过度使用嵌套，以免引入样式的复杂性和性能问题。
阴阳师项目网站首页(动态网页）原生HTML+CSS+Javascript
Zhang_wang_yun的博客
04-04 5402
阴阳师项目网站首页（动态网页）原生HTML、CSS、JavaScript
DIV+CSS学习笔记总结篇
2401_84153177的博客
04-19 762
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。]( )textarea高度自适应多行溢出省略Retina屏1px线Flexbugs其他IF IE ENDIF条件判断之IE10Chrome 翻译插件网页retina优化常用meta树状菜单em vs remcss vs jscss解决方案（w3cplus）Textures生成纹理CSSgramCsscss（检查重复声明等）附录四 部分工具资源。
HTML+CSS
weixin_59742742的博客
12-23 590
dl定义列表，直接子元素只能是dt、dddtterm是项的意思，列表中每一项的项目名dd列表中每一项的具体描述，是对dt的描述、解释、补充。
CSS基础知识
Toreme的博客
01-19 172
基础 教程 ​ 使用css和不使用比较 不使用css 不使用css 给每一个单元格加上背景颜色 就需要给每一个td元素加上bgcolor属性 使用css 使用css 给每一个单元格加上背景颜色，只需要在最前面写一段css代码，所有的单元格都有背景颜色了，这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到 不同的td有不同的背景色 选择器 语法 css的语法 selector {property: value;} 即 选择器{属性:值} 学习css即学习有哪些选择器
CSS学习之路
梦星辰的博客
02-14 292
什么是 CSS 不使用css 不使用css 给每一个单元格加上背景颜色 就需要给每一个td元素加上bgcolor属性 <table border="1"> <tr > <td bgcolor="gray" >1</td> <td bgcolor="gray">2</td> </tr> <tr> <td bgcolor="gray">3&...
CSS基础
weixin_44303404的博客
05-28 273
这两天自学了CSS的基础知识，感觉都是很细节的东西。通过做网上的练习，也发现了很多自己不太懂的地方。整理一下笔记。 【CSS基础】 css的语法 selector {property: value} 即 选择器{属性:值} 学习css即学习有哪些选择器，哪些属性以及可以使用什么样的值。 1.选择器主要分3种：元素选择器、id选择器、类选择器。 元素选择器通过标签名选择元素； （1）在下面实例中，如果不进行单独设置，所有的p都被设置成蓝色。 <style> p{ color
html+css+js基础问答
qq_43751465的博客
08-26 5327
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
HTML +CSS样式笔记
weixin_52274216的博客
03-01 376
ctrl+/ 注释 ctrl+s 保存 ctrl+r 查看 我是标题 gb2312 中文字符 utf-8 国际化使用标准 网页主体部分《身体》 ...... 文本标题 段落标签 换行标签 水平线 加粗 斜体 锚链接： 发送邮件 download点击下载   空格 © 版权符号 " 双引号 < 小于号 > 大于号 img 图片标签 src 图片的链接地址 width 宽 height 高 alt 不显示图片的时候显示文字 ti
HTML、CSS、浏览器 相关面试题总结
m0_63621500的博客
03-28 394
1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小 在 ps 以 jpeg 格式存储时，提供 11 级压缩级别 2. 请简述 css 盒子模型 一个 css 盒子从外到内可以分成四个部分：margin（外边距），border （边框），padding（内边距），content（内容）。默认情况下，盒子的 width 和 height 属性只是设置 content（内容）的宽和高， 盒子真正的宽应该是：内容宽度+左右填..
Java核心技术.卷2.高级特性.原书第12版.中文
11-08
Java核心技术.卷2.高级特性.原书第12版.中文
【java毕业设计】springboot共享经济背景下校园闲置物品交易平台(springboot+mysql+说明文档).zip
11-08
项目经过测试均可完美运行！ 环境说明： 开发语言：java 框架：ssm jdk版本：jdk1.8 数据库：mysql 5.7+ 数据库工具：Navicat11+ 管理工具：maven 开发工具：idea/eclipse 部署容器：tomcat7+
anscombe.csv
最新发布
11-08
anscombe
大模型备案推进，AI生成内容商业化进程加快
11-08
内容概要：文章介绍了自2023年8月以来中国AIGC领域的最新动态和发展趋势，强调了百度、商汤等公司在大模型方面的重要进展及备案工作的积极影响。具体而言，国家网信办发布的《生成式人工智能服务管理办法（征求意见稿）》标志着政策对大模型的规范化管理进入实施阶段，促进了AIGC从技术研发走向商业化应用的步伐。此外，报告还列出了多个上市公司的中期财报，展示它们在此转型期内的业绩变化情况。 适合人群：对AI及计算机视觉感兴趣的研究者、开发者以及企业管理人员。 使用场景及目标：适用于希望了解当前AIGC领域发展趋势和政策环境的机构和个人；旨在帮助投资者识别潜在投资机会。 其他说明：尽管许多公司取得了良好的进展，但也提醒关注供应链、政策支持及国内替代等风险因素。
揭示CSS隐藏元素奥秘：display:none与visibility:hidden差异
在CSS中，元素隐藏的实现涉及到多种方式，每种方法都有其独特的特性和适用场景。本文将详细介绍几种常见的元素隐藏技巧：`display:none`、`visibility:hidden`，以及它们与`position`属性的结合使用，同时还会探讨`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值