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

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()或设置.innerHTML现有的DOM对象.
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的末尾,并将要在该文件中显示的值传递给它.
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.