如何设置Javascript代码段的样式

Question

I want to embed this Javascript snippet (webform from AWeber) into my website: <script type="text/javascript" src="http://forms.aweber.com/form/49/522310949.js"></script>

My site uses the style p { line-height: 1.5em; } p { line-height: 1.5em; } . Unfortunately this is also applied to the Javascript snippet and makes it look stupid.

How can I tell the Javascript snippet to use a line-height of 1em instead of 1.5em?

I tried this but it doesn't work:

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

I also considered using Javascript ( document.getElementById('p').style.lineHeight = '1 em'; ) to change the CSS, but as I understand Javascript modifies the whole website and not only one element...

Can you please help? Thanks in advance!

Answer 1

Putting the form inside a <p> does not make sense, as <p> cannot contain block-level elements. Use a <div> instead:

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

As @Max implicitly noted, it'd be "nicer" to add CSS to style the content.

You can use Firebug or the Chrome/Safari developer tools to examine the styles of "live" page elements. That can help you figure out the reasons that particular elements look a particular way, and it also lets you play around with alterations to the styles.

edit maybe something like:

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

Answer 2

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

In case you need more styling, I see that your generated block also uses these styles: af-header , af-body , af-footer , af-element and af-textWrap .

However, if you need a more universal solution, refer to @Pointy's answer.