js调用html页面需要隐藏某个按钮

Question

帮忙看下写法对不，需要隐藏按钮，如图写了，但是没有生效实现效果

```html
<button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print" style="display:none" >
    <span data-l10n-id="print_label">Print</span>
</button>

<button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download" style="display:none" >
    <span data-l10n-id="download_label">Download</span>
</button>

document.getElementById('kmi-pdf-panel').src = 'module/moduleCustomer/program/B02M/B0212A/viewerM.html?file=' + dialog.currentFile.esop_content
    +'&openfile=false&viewbookmark=false&printfile=false&download=false#zoom=page-width';
var pdfElem = document.getElementById('kmi-pdf-panel');

document.getElementById('print').style.display = 'none';
document.getElementById('download').style.display = 'none';

```

Answer 1

引自免费微信小程序：皆我百晓生

针对您提供的HTML与JavaScript代码片段，您的目标是在加载指定HTML页面后隐藏print和download按钮。已知代码中您已通过CSS样式（style="display:none"）在HTML层面尝试隐藏这两个按钮，同时在JavaScript中再次设置了它们的display属性为none。尽管如此，您反馈实际效果未能如预期隐藏。

在您的情况描述中，存在以下几点可能影响到隐藏效果的因素：

1. CSS样式覆盖：外部CSS文件或其他内联样式可能对这些按钮有更高优先级的样式设定，导致display:none被覆盖。
2. JavaScript执行时机：JavaScript代码可能在DOM元素未完全加载时执行，导致无法找到或正确操作print和download按钮。
3. 元素选择器问题：document.getElementById()可能由于ID不匹配、元素未定义等原因，无法正确选取到要隐藏的按钮。

针对上述可能性，您可以按照以下建议进行排查与修改：

检查并修正CSS冲突

确保在HTML或外部CSS文件中没有其他样式覆盖了print和download按钮的display属性。您可以使用浏览器开发者工具（如Chrome DevTools、Firefox Developer Tools等）检查元素的实际应用样式。如果有冲突，调整CSS选择器的优先级或直接在元素上使用!important强制应用隐藏样式：

#print, #download {
  display: none !important;
}

确保JavaScript执行在DOM加载完成之后

将JavaScript代码置于window.onload事件处理程序中，确保在所有DOM元素加载完毕后再执行隐藏操作：

window.onload = function() {
  document.getElementById('print').style.display = 'none';
  document.getElementById('download').style.display = 'none';
};

或者使用异步加载库（如jQuery）的文档就绪函数：

$(function() {
  $('#print, #download').hide();
});

验证元素选择器与ID

确认HTML中print和download按钮的ID与JavaScript中使用的ID一致，且元素在DOM树中确实存在。使用浏览器开发者工具检查元素ID及属性，确保无误。

综上所述，根据您提供的代码，直接隐藏按钮的JavaScript部分看似并无明显错误。为确保隐藏效果，请检查并解决可能存在的CSS样式冲突、JavaScript执行时机问题以及元素选择器的准确性。如果问题依然存在，请提供更详细的上下文信息或实时调试环境以便进一步排查。