内部css不'我不适合JS

Internal css doesn't work for me with JS

本文关键字：不适合 JS css 内部      更新时间：2023-09-26

我试图在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的情况下工作）提前感谢！

我至少看到四个问题：

  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的末尾，这些参数将向其传递要在该文件中显示的值
  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。

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

在InternetExplorer上，我认为您需要"innerText"而不是"innerHTML"。

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

您不能使用一个页面的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

尝试在团队类中使用双引号（"）。

相关文章：