Question

我正在尝试在JS中创建的表中使用以下css代码，但似乎它没有得到任何样式，我不知道为什么。

所以这是代码： CSS代码：

<style type="text/css">
    div.team
    {
        margin-right: 30%;
    }
    .team table
    {
        border-collapse: collapse;
    }
    .team table td
    {
        background-color: #4F5FAC;
        border: 2px groove grey;
    }
    .team table th
    {
        font-style: italic;
        background-color: #0B1260;
        padding: 0 15px;
        color: white;
        border: 2px groove black;
    }
    .team tr td:first-child
    {
        color: yellow;
        font-weight: bold;
        text-align: center;
    }
</style>

JS代码：

myWindow=window.open('table.html');
myWindow.document.write("<table class = 'team'>");
myWindow.document.write("<tr><td> שם  פרטי: </td><td>" + document.reg.name.value + "</td></tr> <tr><td> שם משפחה: " + document.reg.lname.value + "</td></tr> <tr><td> אימייל: " + document.reg.email.value + "</td></tr> <tr><td> סיסמא: " +document.reg.password.value +"</td></tr>");
myWindow.document.write("</table>");

知道为什么我没有得到表的样式吗？（没有js的情况下工作）提前谢谢！

Answer 1

我至少看到四个问题：

CSS规则必须与您尝试影响的文档相同。所以这些CSS规则需要在table.html。
如果您在加载文档后使用document.write()，则会清除当前文档（包括您之前包含的所有样式规则）并启动新文档。因此，这些样式规则无法在table.html文件中生效，因为您已清除该文档的先前内容。如果要将内容添加到现有页面而不破坏其当前内容和样式，则需要使用DOM插入API调用，如.append()或.insertBefore()或在现有DOM上设置.innerHTML对象。
未正确指定您的CSS规则。当您在同一标记上定位多个标识符时，标识符之间不能有空格。因此，.team table必须为table.team，.team table th必须为：table.team th。如.team table中的标识符之间有空格，则表示您希望将table对象与祖先class="team"匹配。如果您想要一个同时为table和class="team"的对象，那么您必须在两个标识符之间没有空格，如下所示：table.team。
如果要在保留table.html内容的同时向此新窗口添加内容，则必须等待加载（使用onload()事件或其中一个{{1}在其内容准备好修改之前，您无法使用DOMReady。

要解决这一切，我建议：

将所有样式规则放在外部样式表中，并将它们包含在table.html中。
将用于修改页面的javascript也放入table.html。
当您加载table.html时，请在URL的末尾添加查询参数，以便为其传递要在该文件中显示的值。
将JavaScript添加到table.html，解析查询参数以获取数据，然后，一旦DOM准备好在该页面中，就将相关内容添加到页面中。

这将样式规则放在正确的文件中，并将数据传递到新页面，同时保留用于在其页面内修改页面的代码（大大简化了维护）。

好的，假设您不需要table.html中的任何内容，您可以使用以下代码从头开始创建一个新窗口：

document.write()

您可以在此处查看此工作：http://jsfiddle.net/jfriend00/VLt8h/。样式规则将不适用于那里，因为css文件没有正确的完整URL。

Answer 2

CSS <style>元素仅适用于他们所在的页面。您正在打开一个全新的页面。它需要自己的CSS副本。

您可以将<style>元素设为“id”，然后复制它。

<style id='page-style'> ... </style>

然后：

var myWindow=window.open('table.html');
myWindow.document.write('<style>' + document.getElementById('page-style').innerHTML + '</style>');
// ... your code to build the table

在Internet Explorer上，我认为你需要“innerText”而不是“innerHTML”。

无论如何，将样式保存在单独的样式表中可能会更好。

Answer 3

尝试为您的团队成员使用双引号（＆＃34;＆＃34;）。

Answer 4

您不能将样式应用于具有一页CSS的其他页面。

将CSS上传到文件，然后使用以下代码段将css加载到打开的页面上。

myWindow=window.open('table.html');
var cssLink = document.createElement("link") 
cssLink.href = "iframestylefile.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
myWindow.document.body.appendChild(cssLink);
// Now carry on writing the elements

使用JS，内部css对我不起作用

4 个答案:

您不能将样式应用于具有一页CSS的其他页面。