gpt4 book ai didi

javascript - 根据按下的按钮选择不同的样式表

转载 作者:行者123 更新时间:2023-11-30 13:04:52 24 4
gpt4 key购买 nike

我希望用户能够打印包含或不包含 div 中某些信息的文档。我有 2 个样式表,其中一个指定了打印时要隐藏的 div 类的样式: 。隐藏 { 显示:无;

以下是根据传递的参数选择样式表的脚本:

function print(o) {
var head = document.getElementsByTagName('head')[0].innerHTML;
if (o == 'withinfo') {
head += '<link rel="stylesheet" href="printwithinfo.css" media="print" />';
}
if (o == 'withoutinfo') {
head += '<link rel="stylesheet" href="printwithoutinfo.css" media="print" />';
}
document.getElementsByTagName('head')[0].innerHTML = head;
}

然后在我的 html 中有以下内容:

   <div class="hide">My Info</div>

我的两个按钮如下:

   <input type="button" value="Print with info" onclick="print('withinfo');">

<input type="button" value="Print without info" onclick="print('withoutinfo');">

不幸的是,当我点击其中一个按钮时,没有任何反应。你能告诉我我做错了什么吗?

最佳答案

首先,我强烈建议您更改函数名称,因为 print() 在 Javascript 中是保留的。

然后对我来说你的代码似乎工作正常,试试这个:

<!doctype html>
<html>
<head></head>


<body>
<script>
function Myprint(o) {
var head = document.getElementsByTagName('head')[0].innerHTML;
if (o == 'withinfo') {
head += '<link rel="stylesheet" href="b.css" media="print" />';
}
if (o == 'withoutinfo') {
head += '<link rel="stylesheet" href="a.css" media="print" />';
}
document.getElementsByTagName('head')[0].innerHTML = head;
window.print();
}
</script>
<div id="hide">My Info</div>
Always here
<input type="button" value="Print with info" onclick="Myprint('withinfo');" />
<input type="button" value="Print without info" onclick="Myprint('withoutinfo');" />
</body>
</html>

使用 a.css:

div{display:none;}

和b.css:

div{display:block;}

关于javascript - 根据按下的按钮选择不同的样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16057084/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com