Детский элемент по ошибке имени класса

Question

Я пытаюсь получить доступ к элементу с классом = "hs-input"; это базовая структура

<div class = "hbspt-form".......> 
<form ....class="hs-form stacked"> 
     <div class = "hs_firstname field hs-form-field"...> 
      <div class = "input"....> 
       <div class="hs-input"...> 

Это то, что я пробовал:

<script type="text/javascript"> 
var list = document.getElementsByClassName("hbspt-form")[0]; 
list.style.background = "#fffbd5"; 
list.style.borderRadius = "5px"; 
list.style.border= "solid"; 
list.style.boxShadow = "10px 20px 30px "; 
list.style.borderColor = "#f7761f"; 
list.getElementsByClassName("hs_firstname")[0].style.backgroundColor = "white"; 
</script> 

Я не могу даже открыть второй класс (HS-формы сложены), Может кто-нибудь сказать мне, как изменить цвет фона последнего класса (hs-input)

Примечание: Консоль не дает никаких ошибок, если я ввожу какую-либо из функций, но когда я ее выполню, он говорит, что код не найден.

Я новичок в яваскрипт и переполнение стека, пожалуйста, помогите с patience.Thanks

Примечание: Это код->http://jsfiddle.net/jg2rek1h/

Answer 1

Вы можете попробовать это:

var list = document.getElementsByClassName("hbspt-form")[0]; 

var secondclass = list.getElementsByClassName('hs-form')[0]; 
secondclass.style.background = "#333"; 

var last_class = list.getElementsByClassName('hs-input')[0]; 
last_class.style.color = "#94d"; 

http://jsfiddle.net/k581sL5q/

Answer 2

I ju й добавил CSS лист, проверить это: http://jsfiddle.net/jg2rek1h/4/

Если вы просто хотите, чтобы изменить визуальное использование прогноз csshttp://www.w3schools.com/css/

Если вы хотите, чтобы манипулировать внешний вид с помощью скрипта, лучше ладить с JQuery по этому вопросу ,