多种 CSS 样式答案

【问题标题】：Multiple CSS Styles多种 CSS 样式
【发布时间】：2013-08-15 06:27:05
【问题描述】：

我正在尝试格式化提供给我的函数的信息。我想要的方式是将每个项目放在自己的行上。公司名称使用 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);
}

【问题讨论】：

您没有在问题中列出任何 CSS / 样式信息。

标签： javascript html css styles

【解决方案1】：

您需要给您的p 标签类名称，以便您可以设置它们的样式。例如，创建p1后，可以设置它的类名：

p1.className = "contactname";

然后在你的样式表中你可以使用这个新类来设置样式：

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

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

我还建议您使用比p1、p2 等更具描述性的变量名称，以便更容易分辨哪个是哪个，以便将来维护。

【讨论】：

谢谢你，完美！你不会碰巧知道如何缩进，比如使用制表符、p 标签？
要缩进你可以使用text-indent属性。我已经用一个例子更新了我的答案。

【解决方案2】：

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

【讨论】：