• 技术文章 >web前端 >前端问答

    隐藏dom元素的三种css方法是什么

    青灯夜游青灯夜游2021-12-09 16:01:04原创773

    隐藏dom元素的三种css方法:1、给dom元素添加“visibility:hidden;”样式;2、给dom元素添加“diaplay:none;”样式;3、给dom元素添加“opacity:0;”样式。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    隐藏dom元素的三种css方法

    1、visibility:hidden;

    将它的值设为hidden将隐藏我们的元素。如同opacity属性,被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外元素在读屏软件中会被隐藏。

    2、diaplay:none;

    display属性依照词义真正隐藏元素。将display属性设为none确保元素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。不仅如此,一旦display设为none任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

    任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的,他的任何不同状态值之间的切换总是会立即生效。

    不过请注意,通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。就跟其他未被隐藏的元素一样,例如$(“”)等

    3、opacity:0;

    opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。这一位着将opacity设置为0只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互。

    (学习视频分享:css视频教程

    以上就是隐藏dom元素的三种css方法是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:隐藏dom元素 css
    上一篇:css3动画类型有哪些 下一篇:CSS将叠层样式分为哪三种
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css常用的字体属性有哪些• css怎么去掉输入框样式• css中利用什么属性控制列表的样式• css怎样实现一直旋转动画效果• css怎么设置相对定位和绝对定位
    1/1

    PHP中文网