创建后按 id 设置伪列表元素的样式

Question

我有一个动态生成的垂直时间轴，其中包含 <li> 个带有 ::after 伪 class 的元素。

我的 objective 是在创建时间线后，为某些圆形元素设置样式（仅更改圆形本身的颜色）。我不明白为什么事后不能将 class 添加到每个特定元素。

使用@RCC 的回答进行编辑：以下代码选择了元素，但最终并没有改变颜色——是否有一种变通方法可以将特定列表元素的 ::after class 的样式设置为 Javascript?如有任何建议，我们将不胜感激！

myArr = ['elem1', 'elem3', 'elem8']

 for (var i = 0; i < myArr.length; i++) {

var elem=document.getElementById(myArr[i])
console.log(elem)
elem.className += ".timeline ul li.newstyle::after {background:#3887be}";

}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  background: #ffffff;
  color: #404040;
  overflow-x: hidden;
  padding-bottom: 50px;
}  


/* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.intro {
  background: #FFFFFF;
  padding: 100px 0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 2.5rem;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #404040;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #FFFFFF;
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent transparent transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent transparent;
}

/* LEFT JUSTIFY
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li {
    margin-left: 20px;
  }
  
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
  
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
  
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;

  }

<section class="intro">
  <div class="container">
    <h1>Vertical Timeline &darr;</h1>
  </div>
</section>

<section class="timeline">
  <ul>
    <li id='elem1'>
      <div>
        <time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
      </div>
    </li>
    <li id='elem2'>
      <div>
        <time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
      </div>
    </li>
    <li id='elem3'>
      <div>
        <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
      </div>
    </li>
    <li id='elem4'>
      <div>
        <time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li id='elem5'>
      <div>
        <time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li id='elem6'>
      <div>
        <time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li id='elem7'>
      <div>
        <time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
      </div>
    </li>
    <li id='elem8'>
      <div>
        <time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
      </div>
    </li>
  </ul>
</section>

Answer 1

试试这个：

var myArr = ['elem1', 'elem3', 'elem8'];

for (var i = 0; i < myArr.length; i++) { // "i" is the index!
  var elem = document.getElementById( myArr[i] ); // "myArr[i]" to get the item
  elem.className += " newstyle";
}

此外，永远在变量声明之前放置 var。

并在 CSS 上添加新的 class:

.timeline ul li.newstyle::after {background:#3887be}

检查： https://jsfiddle.net/rcheruti/qeb1yzu0/6/

Answer 2

我想你忘了查找数组中的字符串值。

尝试elem=document.getElementById(myArr[i])

Answer 3

这样

添加到您的 css

.timeline ul li.newStyle::after { /* TIMELINE + newStyle –––– */
  background  :#3887be;   
  }

改变你的 JS :

const myArr = ['elem1', 'elem3', 'elem8']

myArr.forEach( el =>
  document.getElementById(el).classList.add('newStyle')
  )

*,
*::before,
*::after {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  }
body {
  font           : normal 16px/1.5 "Helvetica Neue", sans-serif;
  background     : #ffffff;
  color          : #404040;
  overflow-x     : hidden;
  padding-bottom : 50px;
  }
/* INTRO SECTION –––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro {
  background : #FFFFFF;
  padding    : 100px 0;
  }
.container {
  width     : 90%;
  max-width : 1200px;
  margin    : 0 auto;
  text-align : center;
  }
h1 {
  font-size : 2.5rem;
  }
/* TIMELINE–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li {
  list-style-type : none;
  position        : relative;
  width           : 6px;
  margin          : 0 auto;
  padding-top     : 50px;
  background      : #404040;
  }
.timeline ul li::after {
  content       : '';
  position      : absolute;
  left          : 50%;
  bottom        : 0;
  transform     : translateX(-50%);
  width         : 30px;
  height        : 30px;
  border-radius : 50%;
  background    : inherit;
  }
.timeline ul li.newStyle::after { /* TIMELINE + newStyle –––– */
  background  :#3887be;   
  }
.timeline ul li div {
  position   : relative;
  bottom     : 0;
  width      : 400px;
  padding    : 15px;
  background : #FFFFFF;
  }
.timeline ul li div::before {
  content      : '';
  position     : absolute;
  bottom       : 7px;
  width        : 0;
  height       : 0;
  border-style : solid;
  }
.timeline ul li:nth-child(odd) div {
  left : 45px;
  }
.timeline ul li:nth-child(odd) div::before {
  left         : -15px;
  border-width : 8px 16px 8px 0;
  border-color : transparent transparent transparent transparent;
  }
.timeline ul li:nth-child(even) div {
  left : -439px;
  }
.timeline ul li:nth-child(even) div::before {
  right        : -15px;
  border-width : 8px 0 8px 16px;
  border-color : transparent transparent transparent transparent;
  }
/* LEFT JUSTIFY–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li {
  margin-left  : 20px;
  }
.timeline ul li div {
  width        : calc(100vw - 91px);
  }
.timeline ul li:nth-child(even) div {
  left         : 45px;
  }
.timeline ul li:nth-child(even) div::before {
  left         : -15px;
  border-width : 8px 16px 8px 0;
  }

  <section class="intro">
    <div class="container">
      <h1>Vertical Timeline &darr;</h1>
    </div>
  </section>
  
  <section class="timeline">
    <ul>
      <li id='elem1'>
        <div>
          <time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
        </div>
      </li>
      <li id='elem2'>
        <div>
          <time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
        </div>
      </li>
      <li id='elem3'>
        <div>
          <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
        </div>
      </li>
      <li id='elem4'>
        <div>
          <time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
        </div>
      </li>
      <li id='elem5'>
        <div>
          <time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
        </div>
      </li>
      <li id='elem6'>
        <div>
          <time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
        </div>
      </li>
      <li id='elem7'>
        <div>
          <time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
        </div>
      </li>
      <li id='elem8'>
        <div>
          <time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
        </div>
      </li>
    </ul>
  </section>

创建后按 id 设置伪列表元素的样式

Style pseudo list elements by id after creation

javascript

css

css-selectors

html-lists

pseudo-element