html:

<div class="nav-detail">
 <div class="team-introduction"><span>OUR TEAM</span></div>
 <div>
   <div class="personel-group">
     <ul id="personal-group-list">
       <li class="red-line">
         <div>
           <span>高管人员</span>
         </div>
       </li>
       <li>
         <div>
           <span>产品组</span>
         </div>
       </li>
       <li>
         <div>
           <span>程序组</span>
         </div>
       </li>
       <li>
         <div>
           <span>其他</span>
         </div>
       </li>
     </ul>
   </div>
   <div class="personel-group-picture" id="personel-group-picture">
     <div class="manager-portrait">
       <img src="../sprite/picture_03.png">
       <img src="../sprite/picture_03.png">
       <img src="../sprite/picture_03.png">
       <img src="../sprite/picture_03.png">
     </div>
     <div class="product-portrait">2</div>
     <div class="programmer-portrait">3</div>
     <div class="other-portrait">4</div>
   </div>
 </div>
</div>

css:

.nav-detail {
 text-align: center;
}

.team-introduction {
 margin-top: 98px;
 margin-bottom: 60px;
 font-size: 24px;
 font-weight: bold;
}
li {
 list-style-type: none;
}
#personal-group-list li{
  list-style-type: none;
  display: inline-block;
  width: 180px;
  font-size: 18px;
  color: #333;
  float: left;
  padding: 10px 0;
  border-bottom: 1px solid #D3D3CA;
}
.red-line {
 border-bottom: 3px solid red;
}
#personal-group-list li div {
 display: inline;
 width: 180px;
}
.personel-group {
 text-align: center;
 width: 720px;
 margin-left: auto;
 margin-right: auto;
}
.personel-group span {
 cursor: pointer;
}
.personel-group-picture {
 border-bottom: 1px solid #D3D3CA;
 width: 1200px;
 margin: 0 auto;
}
.manager-portrait {
 padding: 60px 0 60px 0;
 height: 364px;
}
.manager-portrait img {
 margin: 56px;
}
.product-portrait {
 display: none;
}
.programmer-portrait {
 display: none;
}
.other-portrait {
 display: none;
}

js:

window.onload = function () {
 var lists = document.getElementById('personal-group-list').getElementsByTagName('li')
 var divs = document.getElementById('personel-group-picture').getElementsByTagName('div')
 if (lists.length != divs.length) {
   return
 }
 for (var i = 0; i < lists.length; i ++) {
   lists[i].index = i
 }
}

但是打开浏览器的控制台，查看element，li元素并没有加上index这个属性，求大神帮我看一下问题出在哪里？

还有就是给每个li添加一个border-bottom:3px solid red;为什么也加不上去？