开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js改变display属性

在JavaScript中，display 属性用于控制HTML元素的显示方式。通过修改这个属性，你可以让元素显示或隐藏，或者改变其显示的类型（如块级元素、行内元素等）。

基础概念

display 属性可以接受多种值，常见的有：

block：使元素成为块级元素，独占一行。
inline：使元素成为行内元素，与其他行内元素在同一行显示。
none：隐藏元素，不占据空间。
inline-block：使元素成为行内块元素，既可设置宽高，又与其他行内元素在同一行显示。

相关优势

灵活性：可以根据需要动态地改变元素的显示方式。
性能：相比于使用visibility属性，修改display属性通常会有更好的性能，因为display: none会使元素完全从布局中移除。
易于理解：直观地控制元素的显示状态。

类型与应用场景

隐藏元素

document.getElementById('myElement').style.display = 'none';

应用场景：当需要暂时隐藏某个元素时，比如用户点击按钮后隐藏一个提示框。

显示元素

document.getElementById('myElement').style.display = 'block';

应用场景：当需要显示之前隐藏的元素时，或者在某些条件下改变元素的显示方式。

切换显示状态

function toggleDisplay(elementId) {
    var element = document.getElementById(elementId);
    if (element.style.display === 'none') {
        element.style.display = 'block';
    } else {
        element.style.display = 'none';
    }
}

应用场景：实现元素的展开和折叠效果，比如侧边栏的开关。

遇到的问题及解决方法

问题：修改`display`属性后页面布局发生变化

原因：修改display属性可能会影响元素的布局，尤其是当从none切换到其他值时，元素会重新占据空间，可能导致周围元素的位移。

解决方法：

使用CSS过渡效果平滑布局变化。
在修改display属性之前，预先计算并设置好元素的位置和大小。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Property Example</title>
<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
</head>
<body>

<div id="box"></div>
<button onclick="toggleBox()">Toggle Box</button>

<script>
function toggleBox() {
    var box = document.getElementById('box');
    if (box.style.display === 'none') {
        box.style.display = 'block';
    } else {
        box.style.display = 'none';
    }
}
</script>

</body>
</html>

在这个例子中，点击按钮会切换红色方块的显示状态。

通过这种方式，你可以灵活地控制页面元素的显示与隐藏，以及它们的布局方式。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

display 属性

说明: 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。...对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。常见属性值：值描述 inline 默认。此元素会被显示为内联元素（行内元素），元素前后没有换行符。...input td 以上就是常见的行内元素和块级元素，还有常见的行内块元素实例1：如何把元素显示为内联元素（行内元素） p {display...: inline} div {display: none} 本例中的样式表把段落元素设置为内联元素（行内元素）。...实例2：如何把元素显示为块级元素 span { display: block } <body

2.2K3 0

display属性值有哪些_验证控件display属性

1、 display:flex 属性 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。...title> #main { width: 70px; height: 300px; border: 1px solid #c3c3c3; display...: -webkit-flex; display: flex; /* 设置flex布局*/ -webkit-flex-wrap: wrap; flex-wrap: wrap;... 注意: Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。...d9373a86b748 2、常用值 none block 块元素定义 inline 内联元素定义 3、其他值 https://www.w3school.com.cn/cssref/pr_class_display.asp

2.2K2 0

js简单改变页面的属性

前面简单介绍了页面获取元素,下面来说一下获取页面的属性....class值' 对象.value='设置input的value值' 对象.src='设置img的图片路径' 设置文档的标题 document.title='设置页面标题'; 通过这种方式只能获取部分的属性值.... ---- 下面说一下自行设置各类属性以及属性值对象.setAttribute('属性名','属性值') 例如通过id抓取id为header的元素赋值给变量head head.setAttribute...('name','heha')//给head添加属性name为heha head.setAttribute('width','500px')//给head添加属性width为500px

6.4K2 0

CSS的display 属性

CSS的display 属性规定元素应该生成的框的类型。 1.1、none：此元素不会被显示。 1.2、block：此元素将显示为块级元素，此元素前后会带有换行符。 1.3、inline：默认。...此元素会作为一个表格单元格显示（类似和） 2.8、table-caption：此元素会作为一个表格标题显示（类似） 2.9、inherit：规定应该从父元素继承 display...属性的值。

1.1K3 0

display属性，及其区别

标签（空格分隔）：未分类 ---- 所有属性 MDN中所有display的值 /* display-outside> values */ display: block; display: inline...display: flex; display: grid; display: ruby; display: subgrid; /* display-outside> plus display-inside.../* Global values */ display: inherit; display: initial; display: unset; 主要的几个属性inline,block,inline-block...但却真实存在，可以通过js获取被隐藏的元素区别设置了inline的元素不能设置宽高，有自身内容决定大小，margin值只有margin-left和margin-right值，设置margin-top...知识点总结 display属性值block，inline和inline-block概念和区别

1.3K1 0

【CSS】布局属性：display

今天我们来复习一下CSS原生的布局属性——display。...display 试一试 display:block; 块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。...block属性之后，有了换行效果。...display:inline; 行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。... p元素默认是换行的，加上inline属性之后，变成了一行。

1.5K2 0

display:table-cell属性

display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。 IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。...同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。如何垂直居中一个标签，也可以用到该属性

1001 0

js通过input框输入属性和值，改变div的属性

js实现在input框里面输入属性和值，页面的 div的属性根据输入的属性和值进行变化。 ? 函数传参，改变Div任意属性的值...margin-bottom:10px;/*下外边距*/ } label{ width:5em;/*60像素*/ display...，属性值，把值赋给属性 var changeStyle = function (elem, name, value) { elem.style[name] =...>重置在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。

15.8K5 0

JS，如果改变span标签的是否隐藏属性

Transitional//EN"> New Document js.../Menu.js"> 查询类型...BODY> ----------------------------------Hongten-------------------------------------------- js.../Menu.js 代码： //这是用了自定义的方法hideElement()和shwoElement() function isChang(values) { if(values=="yxsh"){....style.display="none"; document.getElementById("key").style.display=""; } } ----------------------

10.8K2 0

CSS布局-display属性 block 和 inblock

. ## 简介 display属性是控制网页布局非常重要的css属性。 display属性规定如何显示元素，每个html的元素都有一个默认的display值，一般为block或inline。...通过将 **display** 属性设置为 **none** 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中。...``` 比如、、 ``` **Display: none** **display: none;** 通常与 JavaScript 一起使用，以隐藏和显示元素， {visibility...**覆盖默认的 Display 值** 如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。

8912 0

深入理解和应用display属性（二）

属性。...在容器元素上用display:flex指定为flex盒子，在子元素上用flex指定元素所占用的格子数。...Flex容器重要属性： 1) Flex-direction：表示项目排列方向，可以有四个，左到右，右到左，上到下，下到上 2) Flex-wrap：表示是否允许换行，默认不允许(nowrap) Flex-flow...div class="grid02 grid04 ">04 05 Flex项目的重要属性...100 – 100 * 100 /500 = 80 注意事项： 1) Flex-grow和flex-shrink不好和flex直接混合应用，此两个值是在固定宽度的情况下进行均分的算法，如果嵌入flex属性

9356 0

深入理解和应用display属性（一）

Display在官方定义：规定元素应该生成的框的类型。本文只重点分析常用的6个值：none、block、inline、inline-block、inherit、flex。...主要与visibility属性为hidden时相区分。...1) 当元素的none时，js可以获取此元素，但不能获取/设置此元素的可视化属性的值（但可以设置自定义属性的值），如Width、Height、background等Css属性的值，这也就表明当元素为none...2) 当元素的visibility值为hidden时，元素虽然不可见，但可以获取/设置元素的任何值，包含Css相关属性。...width: 100px; } #div03{ width: 100px; } Js

7885 0

silverlight属性改变事件通知

工作中遇到silverlight本身没有提供的某些属性改变事件，但又需要在属性改变时得到通知，Google搬运stack overflow，原地址 /// Listen for change of the...changed")); 更正：以上方法可能会造成回调方法callback内存泄漏，改为封装一个方法再调用callback /// /// 监听任意依赖属性值改变事件的辅助方法

9062 0

【react hooks】属性作为useState 初始值，属性改变useState 不改变问题？

也就是说useState并没有随着属性的改变重新赋值解决方案：监听下属性，当属性改变的时候，重新复制state 。

2.1K2 0

css hover改变其他class属性

css鼠标效果改变其他样式效果如图:图片代码参考.zmki_box_li li{ background-color: #F2F5FB; padding: 8px 15px!...important; } 参考链接利用CSS hover伪类改变其他元素的总结百度未收录

3.7K1 0

css display属性的值及用法_css clear作用

display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; display: list-item; /*...下面就display的重要属性进行讲解，并配合一些相关的例子基本属性 display: none none 是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也无法显示，相当于该元素不存在...display: inline inline也是 CSS 1 提出的属性，它主要用来设置行内元素属性，设置了该属性之后设置高度、宽度都无效，同时text-align属性设置也无效，但是设置了line-height...，所以应该是不能使用的，支持度全无 display: flex flex是一种弹性布局属性注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。...: -webkit-box 由于某X5浏览器某些版本还不支持最新版的flex布局，所以为了保证良好的运行，建议还是使用display: box，box和flex布局的主要差别如下: 容器属性 display

2.5K1 0

JS遍历属性

可枚举属性对象属性可枚举，表示该属性的值不可修改，可认为该属性是常量。如何定义不可枚举的属性?...使用Object.keys(obj)可以获取对象obj自身所包含的所有可枚举属性。...Object.getOwnPropertyNames(obj) ;//获得对象上所有的“实例属性” 判断对象是否拥有实例属性 obj.hasOwnProperty(‘id’); //只要该对象obj...拥有属性id, 无论id是否可枚举，都返回true for(var i in obj){ } // 表示访问对象所有可枚举的属性，包括可枚举的实例属性和可枚举的原型对象的属性 “name” in...obj // 通过对象能够访问给定属性名时返回true, 无论该属性存在于实例中还是原型对象中

9.6K2 0

js对象属性

前言相信对于对象属性大家都或多或少的知道一些，那么本文从属性说开去，看看大家对属性的了解是否有遗漏的部分。...官方对属性分为两种，一种是数据属性，另一种访问器属性。...构造函数得到的属性以及基本属性赋值 //正常的构造函数以及对象属性赋值，call .apply构造函数继承方式的属性都可以正常获取，并且属于对象自有属性 let Animal = function ()...(let p in zhangsan){ console.log(zhangsan.hasOwnProperty(p),`${p}:${zhangsan[p]}`) } 参考代码 codepen关于js...对象属性的案例还什么方法可以拿到属性没错，我们一般情况下使用for,in循环获取属性，但有些属性我们也希望得到。

15.6K1 0

js nextSibling属性和previousSibling属性

1：nextSibling属性该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。...需要特别注意的是：该属性在不同的浏览器中的执行结果并不都相同，见下面例示：先来看一个例子： <input id=“a4” type=“button” οnclick...opera和safari对nextSibling的处理方式与FF一致 2：previousSibling属性该属性与nextSibling属性的作用正好相反。...3：通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题一般先通过nextSibling.nodeName来获知其标签名，或者通过nextSibling.nodeType...如果该nextSibling.nodeName = #text，则通过nextSibling.nodeValue来获知其文本值；否则，可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性

6.8K3 0

【CSS】元素的显示与隐藏 display visibility overflow 属性区别

元素的显示与隐藏 display属性 display：none 此元素不会被显示。 display：block 此元素将显示为块级元素，此元素前后会带有换行符。...display隐藏元素后，不占有原有位置 visibility 属性 visibility：visible 默认值。元素是可见的。 visibility：hidden 元素是不可见的。...visibility隐藏元素后，保留原有位置 overflow 属性 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。...inherit 规定应该从父元素继承 overflow 属性的值。...height: 100%; background: rgba(0,0,0, .3) url(bf.jpg) no-repeat center; } .tudou:hover .mask{ display

2.4K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭