🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!
问题描述
帮忙看下写法对不,需要隐藏按钮,如图写了,但是没有生效实现效果
<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';
如上问题有来自我自身项目开发,有的收集网站,有的来自读者,如有侵权,立马删除。
解决方案
如下是上述问题的解决方案,仅供参考:
在您提供的代码片段中,您已经通过设置 style="display:none"
来隐藏了 print
和 download
按钮。如果您希望使用JavaScript来动态隐藏这些按钮,您可以直接修改它们的样式属性。
但是,您需要确保JavaScript代码在DOM元素加载之后执行。如果JavaScript代码在HTML元素之前执行,它将无法找到对应的按钮元素,因为这些元素尚未被渲染到DOM中。
以下是一些可能的解决方案:
- 确保DOM加载完成后执行JS代码:将您的JavaScript代码放在
window.onload
事件中,或者将<script>
标签放在HTML的底部。
window.onload = function() {
document.getElementById('print').style.display = 'none';
document.getElementById('download').style.display = 'none';
};
- 使用AngularJS:如果您正在使用AngularJS,您可以使用Angular的隐藏指令
ng-hide
来控制按钮的显示。
<button id="print" ng-hide="hidePrint" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span>
</button>
<button id="download" ng-hide="hideDownload" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
</button>
然后在AngularJS的控制器中设置hidePrint
和hideDownload
的值:
angular.module('yourApp', [])
.controller('yourController', function($scope) {
$scope.hidePrint = true;
$scope.hideDownload = true;
});
- 检查元素是否存在:在尝试修改样式之前,检查DOM元素是否存在。
var printButton = document.getElementById('print');
var downloadButton = document.getElementById('download');
if (printButton) {
printButton.style.display = 'none';
}
if (downloadButton) {
downloadButton.style.display = 'none';
}
-
检查是否有其他CSS影响:确保没有其他CSS规则或JavaScript代码覆盖了您的样式设置。
-
检查控制台错误:在浏览器的开发者工具中查看控制台,看是否有任何错误信息,这可能会帮助您诊断问题。
-
确保ID唯一性:确保
print
和download
这两个ID在您的HTML文档中是唯一的,没有其他元素使用相同的ID。
请尝试上述解决方案,并检查是否有其他因素可能影响到按钮的显示。如果问题仍然存在,请提供更多的上下文信息,以便进一步帮助您解决问题。
希望能够帮到有需要的你。
PS:如若遇到采纳如下方案还是未解决的同学,希望不要抱怨&&急躁,毕竟影响因素众多,我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴,即把你未解决或者产生新Bug黏贴在评论区,我们大家一起来努力,一起帮你看看,可以不咯。
若有对当前Bug有与如下提供的方法不一致,有个不情之请,希望你能把你的新思路或新方法分享到评论区,一起学习,目的就是帮助更多所需要的同学,正所谓「赠人玫瑰,手留余香」。
☀️写在最后
ok,以上就是我这期的Bug修复内容啦,如果还想查找更多解决方案,你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」,都是实战中碰到的Bug,希望对你有所帮助。到此,咱们下期拜拜。
码字不易,如果这篇文章对你有所帮助,帮忙给bugj菌来个一键三连(关注、点赞、收藏) ,您的支持就是我坚持写作分享知识点传播技术的最大动力。
同时也推荐大家关注我的硬核公众号:「猿圈奇妙屋」 ;以第一手学习bug菌的首发干货,不仅能学习更多技术硬货,还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料,你想要的我都有!
📣关于我
我是bug菌,CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家,C站博客之星Top30,华为云2023年度十佳博主,掘金多年度人气作者Top40,51CTO年度博主Top12,掘金/InfoQ/51CTO等社区优质创作者;全网粉丝合计 20w+;硬核微信公众号「猿圈奇妙屋」,欢迎你的加入!免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料,你想要的我都有,关键是你不来拿。