Question

我正在尝试格式化输入到我的函数的信息。我想要的方式是每个项目都在自己的行上。公司名称为Eurostile Bold 14pt，Myriad Pro Regular 10pt的街道地址，以及Myriad Pro Black 10pt的联系人姓名，电话和电子邮件。到目前为止，我的尝试创建了一个div，每个项目都是一个p标记。我没有像我想的那样在p标签样式方面取得任何成功。另外，我希望除了公司名称之外的所有项目都缩进。当我试图强制缩进时，输出仍然是左对齐的。提前感谢您的帮助！

addSuggestion = function (company_name, contact_name, street_address_1, street_address_2, phone, email) {
    var output = document.getElementById('container');
    var div = document.createElement('div');
    var p1 = document.createElement('p');
    var p2 = document.createElement('p');
    var p3 = document.createElement('p');
    var p4 = document.createElement('p');
    var p5 = document.createElement('p');
    var p6 = document.createElement('p');
    div.classList.add('container');

    if(company_name) {
        p1.textContent = company_name;
        div.appendChild(p1);
    }
    else {
        p1.textContent = "*** COMPANY INFO ***";
        div.appendChild(p1);
    }

    if(contact_name) {
        p2.textContent = contact_name;
        div.appendChild(p2);
    }

    if(street_address_1) {
        p3.textContent = street_address_1;
        div.appendChild(p3);
    }

    if(street_address_2) {
        p4.textContent = street_address_2;
        div.appendChild(p4);
    }

    if(phone) {
        p5.textContent = phone;
        div.appendChild(p5);
    }

    if(email) {
        p6.textContent = email;
        div.appendChild(p6);
    }

    output.appendChild(div);
}

Answer 1

为不同的样式创建CSS类。然后动态地将这些类添加到您的元素中！

Answer 2

您需要提供p标签类名称，以便您可以设置样式。例如，在创建p1之后，您可以设置其类名：

p1.className = "contactname";

然后在样式表中，您可以使用这个新类进行样式设置：

.contactname {
    font-family: 'Myriad Pro Black';
    font-size: 10pt;
    text-indent: 4em;
}

请注意text-indent属性，该属性将以固定金额缩进每个段落的第一行。如果这对你不起作用，你也可以使用padding-left。

我还建议您使用比p1，p2等更多的描述性变量名称，以便更容易确定哪些是未来的可维护性。

多种CSS样式

2 个答案: