子元素按类名错误

Question

I am trying to access the element with class ="hs-input" ; this is the basic structure

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

This is what I have tried:

<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>

I am unable to even access the second class(hs-form stacked), Could anyone tell me how to change the background colour of the last class(hs-input)

Note: The console doesn't give any errors if I enter any of the functions but when I execute this it says that the code is not found.

I am new to javascript and stack overflow, please help with patience.Thanks

Note: This is the code-> http://jsfiddle.net/jg2rek1h/

Answer 1

You can try this:

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 just added the css sheet, check this : http://jsfiddle.net/jg2rek1h/4/

If you just want to change the visual outlook use css http://www.w3schools.com/css/

If you want to manipulate the look by script, better get along with jQuery for that matter.