如何设置Javascript代码段的样式

Question

我想将此Javascript代码段（来自AWeber的webform）嵌入到我的网站中： <script type="text/javascript" src="http://forms.aweber.com/form/49/522310949.js"></script>

我的网站使用样式p { line-height: 1.5em; }。不幸的是，这也适用于Javascript片段并使其看起来很愚蠢。

如何告诉Javascript代码段使用1em而不是1.5em的行高？

我尝试了这个，但它不起作用：

<p style="line-height: 1em;">
<script type="text/javascript" src="http://forms.aweber.com/form/49/522310949.js"   
</script>
</p>

我还考虑使用Javascript（document.getElementById('p').style.lineHeight = '1 em';）来更改CSS，但据我所知，Javascript修改整个网站而不仅仅是一个元素......

你能帮帮忙吗？ 提前谢谢！

Answer 1

将表单放在<p>中没有意义，因为<p>不能包含块级元素。改为使用<div>：

<div style='line-height: 1em;'>
  <script src = " ... "></script>
</div>

正如@Max隐含地指出的那样，添加CSS来设置内容样式会更“好”。

您可以使用Firebug或Chrome / Safari开发人员工具来检查“实时”页面元素的样式。这可以帮助您找出特定元素看起来特定方式的原因，并且它还可以让您对样式进行更改。

编辑可能类似于：

div.af-form p { line-height: 1em; }

Answer 2

div.af-form {
    line-height: 1em;
}

如果您需要更多样式，我会看到您生成的块也使用这些样式：af-header，af-body，af-footer，af-element和af-textWrap

但是，如果您需要更通用的解决方案，请参阅@ Pointy的答案。