代码之家 › 专栏 › 技术社区 › the_darkside

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

pseudo-element html-lists css-selectors css javascript

the_darkside · 技术社区 · 4 年前

我有一个动态生成的垂直时间线,其中包含 <li> 具有 ::after 伪类。

我的目标是,在创建时间线之后,设计样式某些圆形元素(仅更改圆本身的颜色)。我不明白为什么一个类不能在事件发生后添加到每个特定元素中。

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

3 回复 | 直到 4 年前

RCC 4 年前

试试这个:

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上添加新类:

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

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

Mister Jojo Åukasz Daniel Mastalerz 4 年前

这边

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

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>

Leo Keba 4 年前

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

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