开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生js设置display

display 是CSS中的一个属性，用于控制HTML元素的布局方式。通过JavaScript，你可以动态地修改这个属性来改变元素的显示或隐藏状态。以下是关于原生JavaScript设置display属性的基础概念、优势、类型、应用场景以及常见问题的解答。

基础概念

display 属性定义了元素如何在页面上布局。常见的值包括 block、inline、inline-block、none 等。例如，将一个元素的 display 设置为 none 可以使其完全从页面上消失。

优势

灵活性：可以实时响应用户的交互或其他条件变化，动态调整页面布局。
性能：相比于使用 visibility 或 opacity，直接修改 display 属性通常更高效，因为它会触发浏览器的重排（reflow）和重绘（repaint），但不会保留元素的空间。

类型

block：使元素表现为块级元素，独占一行。
inline：使元素表现为行内元素，不独占一行。
inline-block：结合了 block 和 inline 的特性，元素表现为行内块元素。
none：隐藏元素，不占据任何空间。

应用场景

导航菜单的展开与收起：通过切换 display 属性来控制子菜单的显示与隐藏。
模态框的弹出与关闭：在用户触发某个操作时，显示一个覆盖整个页面的模态框。
响应式设计：根据屏幕尺寸调整元素的显示方式。

示例代码

以下是一个简单的示例，展示了如何使用原生JavaScript来切换一个元素的 display 属性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Property Example</title>
<style>
  #myDiv {
    width: 100px;
    height: 100px;
    background-color: red;
    display: none; /* 初始状态为隐藏 */
  }
</style>
</head>
<body>

<button onclick="toggleDisplay()">Toggle Display</button>
<div id="myDiv"></div>

<script>
function toggleDisplay() {
  var element = document.getElementById('myDiv');
  if (element.style.display === 'none') {
    element.style.display = 'block'; // 显示元素
  } else {
    element.style.display = 'none'; // 隐藏元素
  }
}
</script>

</body>
</html>

常见问题及解决方法

问题：修改 display 属性后，页面布局发生了意外的变化。

原因：可能是由于其他CSS规则或JavaScript代码影响了该元素的布局。

解决方法：

检查并调整相关的CSS规则，确保它们不会相互冲突。
使用浏览器的开发者工具（如Chrome的DevTools）来调试和查看元素的实时样式。
确保JavaScript代码正确无误地修改了 display 属性。

通过以上方法，你可以有效地利用原生JavaScript来控制页面元素的显示与隐藏，从而提升用户体验和应用的功能性。

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

有帮助

没帮助

相关·内容

Linux DISPLAY 变量设置

在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处....直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上...如果使用su username或者su - username切换到别的用户, 并且使用命令 export DISPLAY=:0.0 设置DISPLAY环境变量, 运行图形程序...包含 ForwardX11 yes 则从客户端ssh到服务器端后会自动设置DISPLAY环境变量, 允许在服务器端执行的图形程序将图形显示在客户端上....DISPLAY环境变量以外, 还需要设置本地机器的Xserver监听相应的TCP端口.

11.3K2 0

原生JS设置CSS样式的几种方式

用JS来动态设置CSS样式，常见的有以下几种： 1. 直接设置style的属性某些情况用这个设置 !...设置style的属性 element.setAttribute('style', 'height: 100px !important'); 4. 使用setProperty 如果要设置!...改变class 比如JQ的更改class相关方法因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式 element.className = 'blue';...创建引入新的css样式文件 function addNewStyle(newStyle) { var styleElement = document.getElementById('styles_js... document.createElement('style'); styleElement.type = 'text/css'; styleElement.id = 'styles_js

23.7K3 0

html5设置table样式_原生js添加样式

table样式设置表格： ._table{width: 100%; border-collapse: collapse; border:0px;} 设置表头： ....color: #2e3b45; text-align: center; background-color: rgba(230, 255, 250, 0.92); font-weight:bold;} 设置列...line-height: 20px; text-align: center; padding: 4px 10px 3px 10px; height: 18px;border: 0px solid #ffffff;} 设置行背景

14.6K2 0

js书写原生ajax,JS 原生ajax写法

原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户，使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦

15.3K4 0

设置display:flex后 flex布局设置单个子元素靠右

比如有三个元素：　　　　　　最外层的设置display:flex，水平排列，子元素前两个靠左，第三个靠右...有两种方式实现，第三个元素设置 // 方法一 margin-left: auto; // 方法二 flex: 1; text-align:right

2K1 0

原生JS TitleTip

What How Why 原生JS TitleTip 为了实现对特定的A标签Title的美化，使其可以按照我们想要的样式显示。...div.innerHTML = linkObj.tip; document.body.appendChild(div); if (param && param.width) { //如未设置...div.style.display = ""; ///set TitleTip position // console.log("a W"+linkObj.offsetWidth);...{ if (document.getElementById("TitleTipDiv")) { document.getElementById("TitleTipDiv").style.display

6.2K4 0

JS原生复制

display:none" id="text">http://hou.lmlemon.com/app/index/qudao.html <textarea id="input

16.9K3 0

原生JS拖拽

content="IE=edge"> 原生...JS拖拽 * { margin: 0; padding: 0; }

13.1K4 0

JS原生打印

//打印预览 window.print(); /*设置默认横向打印*/ @page { size: landscape; } /*设置默认纵向打印*/ @page { size: portrait

22.5K2 0

input获取焦点原生js_原生js的input事件

oninput 当input的value值发生变化时就会触发，(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法：以上事件可以直接放到input的属性里，例如： 1 ，可以通过js

25.8K6 0

原生JS之fetch

今天看JS文章，发现了一个新方法fetch https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch 这货跟ajax

5.2K2 0

原生JS | 作用域

HTML5学堂-码匠：作用域那些必须掌握的知识，还有大量作用域案例练习与分析，快快进来！作用域的基础知识在JavaScript中，每个变量会有一个有效区域（...

4.8K5 0

原生js的笔记

引入Javascript 的方式有三种 1.在html 中直接放到 2.外部引入js文件 3.在标签直接写 <p...2、以驼峰命名规则 ——开始单词小写后面的单词首字母大写例如 helloWorld boyAge suZiXing 保留字 js中大小写严格区分的 alert弹框 String（）保留字不能用于普通表示符...形参对应的值通过调用函数中传入的实参（具体数值）函数参数：如果函数在调用时缺少参数，参数会默认设置为： undefined 我们可以将变量放在小括号中，作为形参（形式参数，相当于变量，只是不需要声明...全局作用域：在js中作用域：一个变量作用的范围 1、全局作用域（整个标签中）：页面打开全局作用域被打开，页面关闭全局作用域被销毁；全局作用域的变量叫全局变量，全部变量可以在全局作用域中使用...不同的是构造函数习惯上首字母大写 * * 构造函数和普通函数的区别就是调用方式的不同 * 普通函数是直接调用，而构造函数需要使用new关键字来调用 * 构造函数的执行流程： * 1.立刻创建一个新的对象 * 2.将新建的对象设置为函数中

961 0

原生js数组排序

原生js数组排序 js 排序以正序为例（即由小到大） var arr = [0,2,1,4,3,9,6,5,7,8]; // 未排序的数组 var sortArr = null; // 排序后得到的数组

5.8K3 0

原生JS的Ajax

转自：https://www.cnblogs.com/yufann/p/JS-Ajax.html 1.创建一个Ajax对象非IE6浏览器：var obj = new XMLHttpReuqest...name=123',true); //设置头信息 obj.setRequestHeader('Content-type','application/x-www-form-urlencoded

11.1K2 0

js 原生无缝滚动

demo.scrollTop++ //如果是横向的将所有的 height top 改成 width left } } var MyMar=setInterval(Marquee,speed)//设置定时器...demo.scrollTop++ //如果是横向的将所有的 height top 改成 width left } } var MyMar=setInterval(Marquee,speed)//设置定时器

37.7K3 0

原生JS--Ajax

t='+new Date().getTime(),true); --同步:js中指事情必须一件一件来 --异步:js中指多件事情要一起做 --ajax是做异步传输的,... 　　//js中,使用一个没有定义的变量会报错,使用一个没有定义的属性,是undefined 　　//IE6下使用没有定义的XMLHttpRequest会报错,所以当做window的一个属性使用...xhr=new ActiveXObject("Microsoft.XMLHTTP"); 　　 } 　　//2.连接到服务器　　xhr.open("POST",url,true); 　　//设置头信息...}] 1 HTML代码: 2 3 4 5 6 JS...Microsoft.XMLHTTP"); 42 } 43 //2.连接到服务器 44 xhr.open("POST",url,true); 45 //设置头信息

6.2K2 1

JS设置定时器_js设置定时器

JS定时器的一些特性和如何避免重复设置定时器概述和总结每个JS定时器产生时会被系统分配一个id，这个id是正整数，而且一个页面里面的定时器id不重复，我们能用一个变量接收这个id，但是如果重复执行一条接收创建语句...案例分析用两个按钮来控制灯泡的闪烁，运用CSS简单美化页面，然后控制功能由JavaScript实现，但在使用JS中的计时器时遇到一些问题。也不再废话了，下面是最开始的代码设置字符编码为utf-8 --> 电灯 /* border-radius:设置边框圆角 margin-top: 设置上外边距 margin-left:设置左外边距这里边距使用百分比比直接设置..." name="start" id="start"> /* 这里就是JS

29.9K3 0

原生JS实现哈希路由

在我们用前端框架的时候，经常用到路由技术，就是在地址栏确实发生了变化但是页面没有刷新，那么本文就介绍通过更改哈希的方式实现这样一种路由，下面是页面代码：

2.4K2 0

原生JS实现翻书特效

给大家分享一个用原生JS实现的翻书效果图，效果如下：实现代码如下，欢迎大家复制粘贴。原生JS实现翻书特效

20.4K0 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭