开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

document.getElementById().style.display = 'block'；不工作

document.getElementById().style.display = 'block'; 这段代码的目的是通过JavaScript改变一个HTML元素的显示状态，使其从隐藏（如 display: none;）变为可见（display: block;）。如果你发现这段代码没有按预期工作，可能是以下几个原因：

基础概念

DOM（文档对象模型）：这是一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。
getElementById()：这是一个DOM方法，用于获取具有指定ID属性的元素。
style：这是一个DOM对象的属性，用于访问和修改元素的CSS样式。

可能的原因及解决方法

元素ID错误：
- 确保你使用的ID与HTML中的元素ID完全匹配，包括大小写。
- 确保你使用的ID与HTML中的元素ID完全匹配，包括大小写。

元素不存在：
- 确保在尝试访问元素之前，该元素已经加载到DOM中。如果你的脚本在元素加载之前执行，它将找不到该元素。
- 确保在尝试访问元素之前，该元素已经加载到DOM中。如果你的脚本在元素加载之前执行，它将找不到该元素。
CSS优先级问题：
- 如果元素的样式被其他CSS规则覆盖，直接修改内联样式可能不会生效。检查是否有其他CSS规则具有更高的优先级。
- 如果元素的样式被其他CSS规则覆盖，直接修改内联样式可能不会生效。检查是否有其他CSS规则具有更高的优先级。
JavaScript错误：
- 检查控制台是否有JavaScript错误，这可能会阻止代码的执行。
- 检查控制台是否有JavaScript错误，这可能会阻止代码的执行。
异步加载问题：
- 如果你的脚本依赖于异步加载的内容（如Ajax请求），确保在内容加载完成后再执行脚本。
- 如果你的脚本依赖于异步加载的内容（如Ajax请求），确保在内容加载完成后再执行脚本。

应用场景

这段代码通常用于响应用户交互（如点击按钮）来显示或隐藏页面上的元素。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Toggle Display</title>
    <style>
        #myElement {
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="toggleDisplay()">Toggle Display</button>
    <div id="myElement">This is a hidden element.</div>

    <script>
        function toggleDisplay() {
            var element = document.getElementById('myElement');
            if (element.style.display === 'none') {
                element.style.display = 'block';
            } else {
                element.style.display = 'none';
            }
        }
    </script>
</body>
</html>

参考链接

通过检查这些可能的原因并采取相应的解决措施，你应该能够使 document.getElementById().style.display = 'block'; 这段代码正常工作。

相关搜索:document.getElementById("popup_upload").style.display='none不工作 document.getElementById('').style.display='block'；在Wordpress中不起作用 document.getElementByID().submit()不工作 document.getElementById().value不工作 display: block；不执行此工作 Javascript document.getElementById CSS不工作？React: document.getElementById (或onClick)不工作 "document.getElementById(div).style.display = none“不起作用从.style.display =“block”中删除换行符；Angular style.display无法正常工作 JS .style.display = "inline“将在CSS中显示为"inline-block”无法使document.getElementById("").value或document.getElementById("").innerHtml工作为什么document.getElementById()不能工作？为什么document.getElementById不能工作？{% block content %}{% endblock %}无法加载/工作选项卡更改时，document.getElementById({IDHERE}).style.color不工作如果父display:block，Wavesurfer不渲染 Document.getElementById(‘l’)%.value；未正常工作 document.getElementById不工作取决于我何时放置我要访问的div Gradle不工作，下载位置不工作

相关搜索:

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

有帮助

没帮助

相关·内容

Echart图表自适应情况下的打印原

('printImg3').style.display = "block"; document.getElementById('barchart1').style.display = "...('linechart1').style.display = "none"; document.getElementById('printImg1').style.display...('linechart2').style.display = "none"; document.getElementById('printImg2').style.display...//关闭打印按钮后，再点击打印，否则第二次打印无图表 document.getElementById('linechart1').style.display = "block";...('linechart2').style.display = "block"; document.getElementById('printImg2').style.display

1.1K1 0

JavaScript自定义对话框(包括但不限于 HTML,CSS,JavaScript)

简述 JavaScript 自定义对话框，html5自适应对话框，不采用任何外部框架，纯 JavaScript 代码 ./index.html <!...('Dialog').style.display = 'inline-block'; } // 确定按钮点击事件 document.getElementById('dialogButtonA').onclick...= function () { // 关闭对话框 document.getElementById('Dialog').style.display = 'none'; } // 取消按钮点击事件...document.getElementById('dialogButtonB').onclick = function () { // 关闭对话框 document.getElementById...('Dialog').style.display = 'none'; }

8323 0

导航菜单优化制作

这样可以有效的避免js中命名重复的问题，并且修改起来很方便，不需要在HTML中加入许多id，代码简洁了不少： function navList(id){ var dad=document.getElementById... //利用构造函数进行封装，防止名字滥用，HTML动态添加 function navList(id){ var dad=document.getElementById...=zicaidan.length) throw '父类菜单和子类菜单长度不匹配'; //检索与父菜单索引相同子菜单 function findIndex...=zicaidan.length) throw '父类菜单和子类菜单长度不匹配'; //设置菜单样式 function addStyle(a){...zicaidan[a].style.display='block'; fucaidan[a].style.backgroundColor=

2.7K1 0

一个搜索条样式，包括select的美化

(pos+"Sel").style.display; if(posSel=="block"){ timer = setTimeout("drop_hide('"+pos+"')"..., 1000); } } function drop_hide(pos){ document.getElementById(pos+"Sel").style.display="none"...; document.getElementById(pos+"Sel").style.display="none"; document.getElementById(pos+"Slected...('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById...{document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display

8655 0

导航菜单优化制作

这样可以有效的避免js中命名重复的问题，并且修改起来很方便，不需要在HTML中加入许多id，代码简洁了不少： function navList(id){ var dad=document.getElementById... //利用构造函数进行封装，防止名字滥用，HTML动态添加 function navList(id){ var dad=document.getElementById...=zicaidan.length) throw '父类菜单和子类菜单长度不匹配'; //检索与父菜单索引相同子菜单 function findIndex...=zicaidan.length) throw '父类菜单和子类菜单长度不匹配'; //设置菜单样式 function addStyle(a){...zicaidan[a].style.display='block'; fucaidan[a].style.backgroundColor=

3.6K7 0

写一个问卷调查的功能（熟悉一下Array数组的操作以及对Radio的使用）

").append("这是结果") document.getElementById("a1").style.display = "none"; }else if(ary[0] == "A" &...& ary[1] == "B" && ary[2] == "A"){ $("#relult").append("这是结果") document.getElementById("a1").style.display...").append("这是结果") document.getElementById("a1").style.display = "none"; }else if(ary[0] == "B" &...").append("这是结果") document.getElementById("a1").style.display = "none"; }else{ $("#relult").append...("这是结果") document.getElementById("a1").style.display = "none"; } } </html

7792 0

Android webview实现拍照的方法

("video").style.display = "none"; document.getElementById("snap").style.display = "none"; document.getElementById...("canvasPreview").style.display = "block"; var image = document.getElementById("canvasUpload").toDataURL...("btnOpen1").addEventListener("click", function () { document.getElementById("vdoOne").style.display...= "block"; document.getElementById("video").style.display = "block"; document.getElementById("snap...").style.display = "block"; document.getElementById("canvasPreview").style.display = "none"; }); <

1.1K1 0

修复IOS浏览器侧边栏按钮和登录界面偏差

今天休息，空闲下来好久没有来过博客了，打开手机在浏览器里输入了熟悉的网址，第一次用iphone自带的Safari浏览器看自己的博客，发现好多瑕疵.....右侧菜单栏搜索框上方的按钮不适应剧中；登录页面不居中...=-1){ document.getElementById("android").style.display = "block"; } ...=-1){ document.getElementById("iphone").style.display = "block"; }

3321 0

HTML单击按钮弹出悬浮窗+页面遮罩

box-shadow: none; cursor: pointer; display: inline-block... function popWin() { document.getElementById...('light').style.display = 'block'; document.getElementById('fade').style.display = 'block...' } function closeWin() { document.getElementById('light').style.display...= 'none'; document.getElementById('fade').style.display = 'none' }

15.7K4 0

点击文字或按钮弹出一个DIV窗口（DIV悬浮窗口）

示例弹出层：请点这里...欢迎关注微信公众号【小轻论坛】点这里关闭本窗口</div

14.6K3 0

好多Javascript日期选择器呀–3

= curCapture) { curCapture = o; if(style.display == "block"){ style.left = curPosX + "px"; style.top... = curPosY + "px"; } else load(); } else{ if (style.display == "block") style.display = "none";... = "block"; } } }, turn: function(num){ Calendar.month += num; Calendar.date = 1; Calendar.init...("Calendar__").style.display = "none"; } }, loadDate: function(op, formatString){ formatString =...align=absMiddle> 本文由来源 21aspnet，由 javajgs_com 整理编辑，其版权均为 21aspnet 所有，文章内容系作者个人观点，不代表

7473 0

DIV+JS+CSS实现点击弹出图片效果

case 'contact_qq': qq_or_weixin = "light_qq"; break; } document.getElementById...(qq_or_weixin).style.display='block'; document.getElementById('fade').style.display='block';...} function closeWindow(){ document.getElementById('light_weixin').style.display='none...'; document.getElementById('light_qq').style.display='none'; document.getElementById(...'fade').style.display='none'; } Select Code Copy HTML代码

26.2K3 0

JavaScript与Node.js一起打造一款聊天App

= 'block'}// 初始页面注册document.querySelector("#reg").onclick = function () { register1.style.display...= "block"; init.style.display = "none"; document.querySelector(".bg").style.display = "none";}...// 初始页面登录document.querySelector("#log").onclick = function () { login1.style.display = "block";...init.style.display = "none"; document.querySelector(".bg").style.display = "none";}// 登录按钮login_b.onclick...() { if (document.getElementById("text").value.length !

2844 0

如何实现iframe(嵌入式帧)的自适应高度

好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数...//定义iframe的ID var iframeids=["test"] //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 var iframehide...window.opera) { dyniframe[i].style.display="block" if (dyniframe[i].contentDocument...document.all[iframeids[i]] : document.getElementById(iframeids[i]) tempobj.style.display="block"...> 使用的时候只要贴在里面就可以了本文由来源 21aspnet，由 javajgs_com 整理编辑，其版权均为 21aspnet 所有，文章内容系作者个人观点，不代表

1.2K2 0

Spimes模板添加打赏按钮，实现对打赏区域自由开启关闭

oevent.cancelBubble = true } else { oevent.stopPropagation() } if (document.getElementById...("div_reward").style.display === "none" || document.getElementById("div_reward").style.display === ""...) { document.getElementById("div_reward").style.display = "block" } else {...document.getElementById("div_reward").style.display = "none" } } document.onclick = function...() { document.getElementById("div_reward").style.display = "none" } document.getElementById

6982 0

如何用原生 javascript 写一个选项卡？

("li"); var _conDiv = document.getElementById("tab_div").getElementsByTagName("div"); // 循环，对 _tabLi...) { if (obj[i] == current) { return i; } } } 优化过第二个版本之后，发现自己真的是不细心啊...i < _tabLi.length; i++) { // 对元素进行初始化 _tabLi[0].className = "on"; _conDiv[0].style.display...if (j==_index) { _tabLi[j].className = "on"; _conDiv[j].style.display...conDiv[j].style.display = "none"; }; }; } }; // 获取元素索引函数 function index(current

4424 0

QQ客服右侧悬浮JS实现代码

(c_id+i).style.display='none'; document.getElementById(h_id+i).className=hout_class; }...document.getElementById(c_id+activeno).style.display='block'; document.getElementById(h_id+activeno...hon_class; } var tips; var theTop = 100; var old = theTop; function initFloatTips() { tips = document.getElementById...("meumid").style.display="none" document.getElementById("contentid").style.display="block" }...("meumid").style.display = "block"; document.getElementById("contentid").style.display = "none"

4.7K4 0

HTML打印准考证用JS在html页面实现打印功能

= ""; var footstr = ""; //执行隐藏打印区域不需要打印的内容 document.getElementById...("otherpho").style.display="none"; //此处id换为你自己的id var printData = document.getElementById("printdivaa...("otherpho").style.display="block"; document.body.innerHTML = oldstr ; } } 2.页面内容如下：...("otherpho").style.display="none"; var printData = document.getElementById("studentPhoTable").innerHTML...("otherpho").style.display="block"; wind.close(); window.document.body.innerHTML = oldstr; }

9.8K1 0

JavaScript与Node.js一起打造一款聊天App

= "block"; init.style.display = "none"; document.querySelector(".bg").style.display = "none"...() { if (document.getElementById("text").value.length !...document.querySelector(".title img").style.display = "block"; document.querySelector...(".fix").style.display = "block"; document.querySelector(".title").style.display...= "block"; document.querySelector(".box").style.display = "block

5141 0

查询IP的PHP程序开源

('zhuangTaiShow').style.display = 'none'; document.getElementById('zhuangTai').onclick = function ()...).style.display = 'none'; document.getElementById('Ip').onclick = function () { document.execCommand...(document.getElementById('Ip').value); } // document.getElementById('guoJiaSuoXieShow').style.display...; } // document.getElementById('shengFenShow').style.display = 'none'; document.getElementById('...').style.display = 'none'; document.getElementById('chengShi').onclick = function () { document.execCommand

2.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭