CODEWITHSUNDEEP
javascripthtmlcss
ahhfzrx
ahhfzrx

Reputation: 75

Why the element I created by js has different style with that I directly added in html file

Jan and Feb are elements directly added to html. Mar to Dec are elements generated by js. I was wondering why the style of Jan and Feb are different with those created by javascript. 

var monthsElement = document.getElementsByClassName("months")[0]
var monthList = ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
for (var month in monthList) {
    var newMonth = document.createElement("span")
    monthsElement.appendChild(newMonth)
    newMonth.setAttribute("class","month-hover")
    newMonth.innerHTML = monthList[month]
   

}
.month-hover:hover{
  
  color:#27e779 !important;
  
}

.months {
  color: #AAAAAA;
  position: relative;
  left: 350px;
  top: 90px;
  word-spacing: 10px;
}
<body>
    <div class="calendar-base">
        <div class="months">
            <span class="month-hover">Jan</span>
            <span class="month-hover">Feb</span>
            
        </div>
    </div>
</body>

Upvotes: 4

Views: 66

Answers (3)

NoOneJr
NoOneJr

Reputation: 52

This could also be done by making changes in JS 

newMonth.innerHTML = monthList[month].concat(" ");

Upvotes: 1

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

word-spacing is a style for paragraphs <p>. For this case you will need to use either padding or appending all your text in one tag.

Hope this helps :)

var monthsElement = document.getElementsByClassName("months")[0]
var monthList = ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
for (var month in monthList) {
    var newMonth = document.createElement("span")
    monthsElement.appendChild(newMonth)
    newMonth.setAttribute("class","month-hover")
    newMonth.innerHTML = monthList[month]
   

}
.month-hover:hover{
  color:#27e779 !important;
}
.month-hover{
  padding:0 7px;
}

.months {
  color: #AAAAAA;
  position: relative;
  left: 350px;
  top: 90px;
}
<body>
    <div class="calendar-base">
        <div class="months">
            <span class="month-hover">Jan</span>
            <span class="month-hover">Feb</span>
        </div>
    </div>
</body>

Upvotes: 3

Stradosphere
Stradosphere

Reputation: 1285

If I copy the resulting HTML into notepad it looks like this, looks like whitespace:

<div class="months">
            <span class="month-hover">Jan</span>
            <span class="month-hover">Feb</span>

        <span class="month-hover">Mar</span><span class="month-hover">Apr</span><span class="month-hover">May</span><span class="month-hover">Jun</span><span class="month-hover">Jul</span><span class="month-hover">Aug</span><span class="month-hover">Sept</span><span class="month-hover">Oct</span><span class="month-hover">Nov</span><span class="month-hover">Dec</span></div>

Upvotes: 2

Related Questions