如何为JavaScript中window.open创建的简历窗口添加CSS样式？

我正在用HTML、CSS和JavaScript开发简历生成器，需求是用户点击「创建简历」按钮后，通过window.open打开新窗口展示输入内容，而且不能用HTML标签来样式化简历。现在想给新窗口里的名字设居中样式，没报错但就是不生效。信息录入页面和内容填充逻辑已经做好了，求解决样式不生效的问题。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB-115 Final Project</title>
    <style>
        body {
            background-color: peru;
        }

        h1 {
            text-align: center;
            padding: 60px;
            background: forestgreen;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>Build Your Resume</h1>
    <form>
        <div id="myinfo">
            <h2>Personal Information:</h2>
            <label>Enter your first name:</label><br>
            <input type="text" id="firstName"><br><br>
            <label>Enter your last name:</label><br>
            <input type="text" id="lastName"><br><br>
            <label>Enter your preferred name:</label><br>
            <input type="text" id="preName"><br><br>
            <label>Enter your email address:</label><br>
            <input type="text" id="email"><br><br>
            <label>Enter your phone number:</label><br>
            <input type="text" id="number"><br><br>
            <label>Enter your state:</label><br>
            <input type="text" id="state"><br><br>
            <label>Enter your city:</label><br>
            <input type="text" id="city"><br><br>
            <label>Enter your zipcode:</label><br>
            <input type="text" id="zip"><br><br>
            <p>About Me</p>
            <textarea rows="15" cols="33" id="aboutMe">Tell us about the position you are looking for!</textarea><br><br>
        </div>

        <div id="myEdu">
            <h2>Enter Educational History:</h2>
            <label>Start Date:</label>
            <input type="date" id="eduStart"><br><br>
            <label>End Date:</label>
            <input type="date" id="eduEnd"><br><br>
            <label>Name of school:</label><br>
            <input type="text" id="school"><br><br>
            <label>Degree type:</label><br>
            <input type="text" id="degree"><br><br>
            <label>Field of study:</label><br>
            <input type="text" id="major"><br><br>
        </div>
        
        <div id="myJob">
            <h2>Enter job information:</h2>
            <label>Start Date:</label>
            <input type="date" id="jobStart"><br><br>
            <label>End Date:</label>
            <input type="date" id="jobEnd"><br><br>
            
            <p>Position Details:</p>
            <textarea rows="5" cols="33" id="details">Click Here!</textarea><br><br>
        </div>

        <div id="extra">
            <h2>Please Enter Your Skills:</h2>
            <textarea rows="15" cols="33" id="skills">Click Here!</textarea><br><br>

            <h2>Links:</h2>
            <p>Please provide links to any websites or blogs.</p>
            <textarea rows="15" cols="33" id="links">Click Here!</textarea><br><br>
        </div>

        <input type="button" id="btnSubmit" value="Create Resume">
    </form>
    <script src="projectJS.js"></script>
</body>
</html>

JavaScript代码（原代码） #

/*style*/
function myFunction () {
    let fName = document.getElementById("firstName");
    fName.style.textAlign = "center";
}
/*button*/
document.getElementById("btnSubmit").addEventListener('click',myWindow)
    /*function to create resume*/
    function myWindow()
    {
        /*get HTML first name*/
        fName = document.getElementById("firstName").value;
        /*get HTML last name*/
        lName = document.getElementById("lastName").value;
        /*get HTML preferred name*/
        pName = document.getElementById("preName").value;
        /*get HTML email address*/
        eAddress = document.getElementById("email").value;
        /*get HTML phone number*/
        phoneNum = document.getElementById("number").value;
        /*get HTML state*/
        stateAdd = document.getElementById("state").value;
        /*get HTML city*/
        cityAdd = document.getElementById("city").value;
        /*get HTML zip code*/
        zipCode = document.getElementById("zip").value;
        /*get HTML about me*/
        about = document.getElementById("aboutMe").value;
        /*get HTML Edu start date*/
        schoolStart = document.getElementById("eduStart").value;
        /*get HTML Edu end date*/
        schoolEnd = document.getElementById("eduEnd").value;
        /*get HTML School*/
        schoolName = document.getElementById("school").value;
        /*get HTML degree type*/
        degreeType = document.getElementById("degree").value;
        /*get HTML major*/
        fieldStudy = document.getElementById("major").value;
        /*get HTML job start date*/
        jStart = document.getElementById("jobStart").value;
        /*get HTML job end date*/
        jEnd = document.getElementById("jobEnd").value;
        /*get HTML job details*/
        jobDetails = document.getElementById("details").value;
        /*get HTML skills*/
        mySkills = document.getElementById("skills").value;
         /*get HTML links*/
        webPage = document.getElementById("links").value;
        myText = ("<html>\n<head>\n<title>WEB-115 Final Project</title>\n</head>\n<body>");
        myText += (fName);
        myText += (lName);
        myText += (pName);
        myText += (eAddress);
        myText += (phoneNum);
        myText += (stateAdd);
        myText += (cityAdd);
        myText += (zipCode);
        myText += (about);
        myText += (schoolStart);
        myText += (schoolEnd);
        myText += (schoolName);
        myText += (degreeType);
        myText += (fieldStudy);
        myText += (jStart);
        myText += (jEnd);
        myText += (jobDetails);
        myText += (mySkills);
        myText += (webPage);
        myText += ("</body>\n</html>");
    
        flyWindow = window.open('about:blank','myPop','width=400,height=200,left=200,top=200');
        flyWindow.document.write(myText);
    }

问题分析及解决方法 #

问题原因 #

1. 你写的myFunction完全没被调用，而且它是给原页面的输入框设置样式，和新窗口的内容无关。
2. 新窗口里的名字是纯文本直接拼接，没有块级容器包裹。text-align是块级元素的CSS属性，行内元素或纯文本无法直接生效。
3. 原代码里所有内容直接连在一起，没有排版结构，不仅样式没法生效，可读性也极差。

修复后的JavaScript代码 #

document.getElementById("btnSubmit").addEventListener('click', myWindow)

function myWindow() {
    // 获取所有输入值
    const fName = document.getElementById("firstName").value;
    const lName = document.getElementById("lastName").value;
    const pName = document.getElementById("preName").value;
    const eAddress = document.getElementById("email").value;
    const phoneNum = document.getElementById("number").value;
    const stateAdd = document.getElementById("state").value;
    const cityAdd = document.getElementById("city").value;
    const zipCode = document.getElementById("zip").value;
    const about = document.getElementById("aboutMe").value;
    const schoolStart = document.getElementById("eduStart").value;
    const schoolEnd = document.getElementById("eduEnd").value;
    const schoolName = document.getElementById("school").value;
    const degreeType = document.getElementById("degree").value;
    const fieldStudy = document.getElementById("major").value;
    const jStart = document.getElementById("jobStart").value;
    const jEnd = document.getElementById("jobEnd").value;
    const jobDetails = document.getElementById("details").value;
    const mySkills = document.getElementById("skills").value;
    const webPage = document.getElementById("links").value;

    // 构建新窗口的HTML，添加样式和清晰的排版结构
    let myText = `
    <html>
        <head>
            <title>WEB-115 Final Project</title>
            <style>
                .name { 
                    text-align: center; 
                    font-size: 1.5rem;
                    margin-bottom: 1rem;
                }
                .section { 
                    margin: 1.2rem 0; 
                    padding: 0 0.5rem;
                }
                .section-title { 
                    font-weight: bold; 
                    font-size: 1.1rem;
                    margin-bottom: 0.5rem;
                    border-bottom: 1px solid #ccc;
                    padding-bottom: 0.3rem;
                }
                body {
                    font-family: Arial, sans-serif;
                    line-height: 1.6;
                }
            </style>
        </head>
        <body>
            <div class="name">${fName} ${lName} ${pName}</div>
            <div class="section">
                <div class="section-title">联系方式</div>
                <div>${eAddress}</div>
                <div>${phoneNum}</div>
                <div>${cityAdd}, ${stateAdd} ${zipCode}</div>
            </div>
            <div class="section">
                <div class="section-title">关于我</div>
                <div>${about}</div>
            </div>
            <div class="section">
                <div class="section-title">教育经历</div>
                <div>${schoolStart} - ${schoolEnd}</div>
                <div>${schoolName}</div>
                <div>${degreeType} | ${fieldStudy}</div>
            </div>
            <div class="section">
                <div class="section-title">工作经历</div>
                <div>${jStart} - ${jEnd}</div>
                <div>${jobDetails}</div>
            </div>
            <div class="section">
                <div class="section-title">技能</div>
                <div>${mySkills}</div>
            </div>
            <div class="section">
                <div class="section-title">链接</div>
                <div>${webPage}</div>
            </div>
        </body>
    </html>`;

    const flyWindow = window.open('about:blank','myPop','width=600,height=800,left=200,top=200');
    flyWindow.document.write(myText);
    flyWindow.document.close(); // 关闭文档流，确保浏览器正确渲染样式和内容
}

关键修改点 #

1. 删除了无用的myFunction，它对新窗口样式没有任何帮助。
2. 给名字添加了块级容器<div class="name">，并在新窗口的<style>里设置text-align: center，满足居中需求。
3. 给所有简历内容划分了区块，添加基础排版样式，让简历结构清晰易读。
4. 调用flyWindow.document.close()，确保浏览器完成文档渲染，避免样式不生效的情况。

内容的提问来源于stack exchange，提问作者Jasmine Nichole