讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

JS修改元素display属性实例代码

小云云
发布： 2018-03-12 16:05:42
原创
4131人浏览过

当我们想要使用js来控制元素 display 属性来使其显示或者隐藏时，需要将 display  属性作用在行间样式上，本文主要和大家分享js修改元素display属性实例代码，希望能帮助到大家。

并使用 ID 选择器

即

 <p id="drop-box" style="display:none">
在JS文件中，
        var dropBox = document.getElementById("drop-box");
        //设置元素显示
        function showBox(){        dropBox.style.display = "block";
        }
        //设置元素隐藏
        function hideBox(){        dropBox.style.display = "none";        }
登录后复制

相关推荐：

CSS3中display属性的Flex布局的方法

名扬银河企业建站源码2.0.2
名扬银河企业建站源码2.0.2

名扬银河企业建站系统，适用于无代码基础的新手，快速搭建企业网站，程序内置了多项实用功能及插件，能够便捷的对网站进行修改、调整、优化等方面进行操作。【部分功能介绍】1、产品管理发布企业产品信息，管理企业产品，自定义产品封面图，产品详情图、文、视频，产品扩展属性自定义等。2、案例管理系统发布企业成功案例，管理成功案例，自定义案例封面图，案例详情图、文、视频，案例扩展属性自定义等。3、资讯管理系统发布企

名扬银河企业建站源码2.0.2 0
查看详情 名扬银河企业建站源码2.0.2

js将控件隐藏的方法及display属性介绍_javascript技巧

jquery控制display属性为none或block_jquery

以上就是JS修改元素display属性实例代码的详细内容，更多请关注php中文网其它相关文章！

相关标签：
javascript

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：Rxjs的使用详解 下一篇：JS脚本判断在客户端大小和文件类型方法实例
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
javascript_性能监控指标分析 执行时间与长任务：JavaScript单线程特性使超50ms的长任务阻塞主线程，引发卡顿，可通过PerformanceObserver监控并优化大量DOM操作、复杂计算等问题。2.脚本加载与解析耗时：JS文件大小和加载顺序影响首屏速度，利用ResourceTimingAPI分析下载与执行时间，采用代码分割、懒加载、defer/async等策略优化。3.内存使用情况：内存泄漏由事件监听未解绑、闭包引用等引起，可通过ChromeDevTools内存快照和performance.memory实时监控堆
2025-12-21 09:31:40
439
javascript如何实现代码分割_有哪些方法 JavaScript代码分割核心是按需加载以提升首屏速度，主要靠动态import()实现路由/组件级懒加载，配合SplitChunksPlugin提取公共依赖，二者协同优化。
2025-12-21 09:24:58
675
如何在javascript中实现颜色选择器_有哪些调色板方案？ JavaScript实现颜色选择器核心是监听交互并实时计算规范颜色值；可用原生input或Canvas自绘HSV/HSL控件，需归一化处理后转CSS格式；推荐vanilla-picker等轻量库避免手写色彩转换逻辑。
2025-12-21 09:24:08
762
javascript如何实现数组乱序_如何洗牌算法 最可靠方法是Fisher-Yates洗牌算法：从后往前遍历，每次随机选[0,i]索引与当前位置交换，时间复杂度O(n)，原地操作且各排列概率均等；不可用sort(()=>Math.random()-0.5)，因浏览器实现差异导致结果不可预测、不均匀。
2025-12-21 09:12:07
813
javascript箭头函数是什么_它与普通函数有何不同 箭头函数是ES6引入的简洁函数表达式，无自身this/arguments/super/new.target，继承外层作用域值；语法更短，单表达式自动返回；不能用作构造函数、Generator函数，不支持call/apply/bind改变this。
2025-12-21 08:55:25
352
如何在javascript中操作DOM_有哪些高效的选择器可以使用？ JavaScriptDOM操作核心是先选中元素再增删改查，推荐使用getElementById、querySelector、querySelectorAll等高效选择器，并通过缓存元素、使用classList、DocumentFragment和事件委托提升性能与安全性。
2025-12-21 08:41:02
448
javascript函数如何工作_闭包在实际项目中有什么用途 JavaScript函数是“一等公民”，执行时创建含词法环境和变量环境的执行上下文；闭包即函数与其定义时词法环境（含自由变量）的组合，实现私有状态、事件变量绑定、函数工厂等功能。
2025-12-21 08:34:52
172
javascript异步编程是什么_Promise如何简化回调地狱？ JavaScript异步编程通过Promise解决回调地狱问题，以链式调用替代嵌套回调，支持统一错误处理；还提供all、race、allSettled、any等方法协调多任务，但无法取消且立即执行。
2025-12-21 08:33:08
148
什么是JavaScript Web Worker_如何利用它执行多线程任务 WebWorker是浏览器提供的后台线程API，不阻塞主线程，支持并发执行但无法访问DOM；通过postMessage通信，适用于CPU密集型任务。
2025-12-21 08:33:07
590
Javascript如何发送请求_什么是AJAX AJAX是一种异步JavaScript技术，核心是后台发起HTTP请求并局部更新页面；现代实现方式包括FetchAPI（推荐）、XMLHttpRequest（兼容性好）和Axios（功能增强）。
2025-12-21 08:13:15
724
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部