Как оформить фрагмент Javascript

Question

Я хочу встроить этот фрагмент Javascript (веб-форму от AWeber) на мой сайт: <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

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

Если вам нужно больше стилей, я вижу, что ваш сгенерированный блок также использует эти стили: af-header, af-body, af-footer, af-element и af-textWrap.

Однако, если вам нужно более универсальное решение, обратитесь к ответу @ Pointy.

Answer 2

Поместить форму внутри <p> не имеет смысла, так как <p> не может содержать элементы уровня блока. Вместо этого используйте <div>:

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

Как неявно заметил @Max, было бы «лучше» добавить CSS для стилизации содержимого.

Вы можете использовать Firebug или инструменты разработчика Chrome / Safari для изучения стилей «живых» элементов страницы. Это может помочь вам выяснить причины, по которым определенные элементы выглядят особым образом, а также позволит вам поиграть с изменениями стилей.

edit может быть что-то вроде:

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