使用javascript将父div传递给弹出div
Posted
技术标签:
【中文标题】使用javascript将父div传递给弹出div【英文标题】：Passing parent div to popup div using javascript 【发布时间】：2011-10-15 18:33:00 【问题描述】：我正在为客户设计一个页面，我在一个名为“areaToPrint”的 div 中有一个数据库表，我想以某种方式打印它，并且我希望能够对表进行 css 格式。基本思想是使用javascript将'areaToPrint'.innerhtml发送到我的css格式文件printer.php中一个名为'printer'的div。
//我的脚本在主/父页面中
<script>
function printDiv()
var divToPrint=document.getElementById('areaToPrint');
var newWin = window.open("printer.php");
newWin.document.getElementById('printer').innerHTML=divToPrint.innerHTML;
newWin.print();
newWin.close();
</script>
//Printer.php中的body元素
<body>
<div id="printer"></div>
</body>
我希望areaToPrint 的内容填充弹出的printer.php 中的打印机div。 我能够使用类似的东西来完成类似的任务
newWin.document.write(divToPrint.outerHTML)
但我希望能够对 div 内的表格进行 css 格式设置。 （通过链接调用javascript）
关于 javascript 错误有什么建议吗？
【问题讨论】：
【参考方案1】：也许 jQuery 会有所帮助
$(this).parent()
$("someone").css()
$("someone").addClass()
【讨论】：
【参考方案2】：除非您想使用 JavaScript 动态格式化表格（例如，根据交互更改视觉样式），最简单的方法是在您的 printer.php 视图模板中包含一个样式表。
例如
<html>
<head>
<link rel="text/css" media="print" href="css/print.css" />
</head>
<body>
<div id="printer"></div>
</body>
<html>
【讨论】：
是的，我的打印机就是这样操作的。我只是没有包括头块。我的问题是如何执行 Javascript 并解决打印机 div 问题。 在这种情况下，我不确定您的要求是什么，您的问题是说您想知道如何为其添加 CSS 样式。你能澄清一下吗？ 如果我让自己不清楚，我很抱歉。我想在我的主页上获取一个 div 的内容，打开一个新窗口 printer.php 并用该内容填充它的打印机 div！我可以写一个外层HTML，但是我失去了我的css格式。 您不能对内容进行格式化（无论如何都不能通过任何简单的方式）。就像我说的，最简单的方法是在弹出窗口中包含一个样式表，以设置内容的样式。当您插入内容时，它将被样式表设置样式。 感谢您的尝试。但你仍然没有明白我的意思。我知道我可以在 head 块中包含一个 css 文件，但我没有在上面的代码中包含 head 块，因为那是题外话。我的问题仍然是 javascript 以及如何在打印机 DIV 中获取它以上是关于使用javascript将父div传递给弹出div的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 sass 将父 div 定位在子 div 的焦点上。？
将鼠标悬停在单个子 div 上时，将父 div 更改为不同的背景