在页面上隐藏元素的方法有哪些

方法 是否占据空间 是否响应事件 补充说明
display: none; 会引起回流和重绘
visibility: hidden; -
opacity: 0; 会引起重绘
position: absolute;top: -100px;将元素移除可见区域 - -
transform: scale(0);将元素缩放为 0 尺寸 -
z-index: -999;层级调低的同时在同样的位置上用其他元素覆盖 -
ransform: rotateY(90deg);transform: rotateX(90deg);使元素在 x/y 轴不可见 - -

原文地址:https://www.cnblogs.com/xiaoyucoding/p/12552017.html

时间: 2024-08-02 14:10:39

在页面上隐藏元素的方法有哪些的相关文章

隐藏元素的方法,都有啥区别?

前言 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.下面我的这篇文章就给大家解说一下他们之间的区别吧,让大家能根据场合来选择适合的方式. Opacity 该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消

css隐藏元素的方法何区别

前言 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域. 但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法.下面我的这篇文章就给大家解说一下他们之间的区别吧,让大家能根据场合来选择适合的方式. Opacity 该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消

JQuery iframe页面通过parent方法操作父页面中的元素与方法(实例讲解)

1)在iframe中查找父页面元素的方法: $('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量: parent.method parent.value 3)实例 1.父页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="If

2、selenium点击被页面上其他元素遮住的控件

使用WebDriver点击界面上Button元素时,如果当前Button元素被界面上其他元素遮住了,或没出现在界面中(比如Button在页面底部,但是屏幕只能显示页面上半部分),使用默认的WebElement.Click()可能会触发不了Click事件. 需加上browser.execute_script(‘arguments[0].click()’, webElement); 原文地址:https://www.cnblogs.com/zengfh/p/12287898.html

selenium处理隐藏元素的方法

<li class="navbar-nav-item "> <a href="#" id="cust">XX管理</a> <ul class="navbar-dropdown-menu"> <li class="dropitem-current"><a href="/Customer/Index">XX列表</

一直无法获取到页面上一个元素js

①前言 流程审批页面我写了一个公共的模板页面,但是里面的数据是动态添加进去的.我想在公共的页面的js中去隐藏一个元素. ②我的思路: 我准备直接通过id去获取元素,然后添加属性 display:none 首先我通过jquery的方法: var v1 = $("#shenpiyijian"); console.log(v1) //结果为n.fn.init() 我最初以为这就拿到了对象,然后直接设置属性  v1.css("display","none"

六)iframe 及父子页面之间获取元素、方法调用

http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <head> <script type="text/javascript"> function ff(msg) { alert(msg); } function test() { // 只能通过iframe名称获取子页面,不能通过id var div = window.fram

CSS隐藏元素的方法及区别

1.opacity opacity:0将元素本身及其子元素都置为不可见的,而元素本身依然占据它自己的位置并对网页的布局起作用,它会响应用户交互. 2.visibility visibility:hidden将元素本身及其子元素都置为不可见的,而元素本身依然占据它自己的位置并对网页的布局起作用,它不会响应用户交互.如果想让子元素显示,则设置子元素的visibility:visibility: 3.display display:none使用这个属性,被隐藏的元素对网页的布局不起作用.不仅如此,一旦

css隐藏元素的方法

1. display:none 去除元素位置: 造成回流.重绘: 元素都没有了,自然无法触发时事件了: 2. visibility:hidden 元素存在且大小不变,只是没有渲染: 造成重绘: 元素绑定的事件不会触发了: 3. opacity:0 全透明: 元素存在且大小不变,只是没有渲染: 造成重绘: 元素绑定的事件依然会触发: 4. transorm:scale(0) 缩放缩为最小: 元素存在,大小为0*0: 造成回流.重绘: 5. position:absolute; top:-999em