内部CSS不适用于JS

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

我至少看到四个问题：

1. CSS规则必须在您要影响的同一文档中。 因此，这些CSS规则需要在table.html 。
2. 如果您在加载文档后使用document.write()在此处执行此操作），则它将清除当前文档（包括您先前包含的所有样式规则）并启动一个新文档。 因此， table.html文件中的这些样式规则无法生效，因为您已经清除了该文档的先前内容。 如果要在不破坏当前内容和样式的情况下将内容添加到现有页面，则需要使用DOM插入API调用（如.append()或.insertBefore()或在现有DOM对象上设置.innerHTML 。
3. 您的CSS规则未正确指定。 当您在同一标签上定位多个标识符时，标识符之间不能有空格。 因此， .team table需要为table.team而.team table th必须为： table.team th 。 如果在.team table标识符之间有空格，则意味着您想将table对象与class="team"的祖先匹配。 如果您想要一个既是table又是class="team" ，则必须在两个标识符之间没有空格，例如： table.team 。
4. 如果要在保留table.html内容的同时向此新窗口添加内容，则必须等待它加载（使用onload()事件或其他DOMReady事件之一），然后才能准备好其内容。修改后，您将无法使用document.write() 。

为了解决所有这些问题，我建议这样做：

1. 将所有样式规则放在外部样式表中，并将其包含在table.html中。
2. 将用于修改页面的javascript也放到table.html中。
3. 加载table.html时，将查询参数添加到URL的末尾，以将要在该文件中显示的值传递给URL。
4. 将javascript添加到table.html中以解析查询参数以获取数据，然后，在该页面中准备好DOM之后，将该相关内容添加到页面中。

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

---

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

function openMyWindow() {
    var newWin = window.open("", "table");
    newWin.document.write("<div class='team'>");
    newWin.document.write('<table>');
    newWin.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>");
    newWin.document.write("</table>");
    newWin.document.write("</div>");
    var cssLink = newWin.document.createElement("link") 
    cssLink.href = "iframestylefile.css"; 
    cssLink.rel = "stylesheet"; 
    cssLink.type = "text/css";     
    newWin.document.getElementsByTagName('head')[0].appendChild(cssLink);
}​

您可以在这里查看这项工作： 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

尝试在团队课程中使用双引号（“”）。

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