:: after pseudoelementを使用したCSSクラスの動的な幅

Question

私はいくつかのmvcテストを行っています。私はいくつかの要素を表示するためにモデルを通過するときにロードブロッキングを打ちました。各要素には、CSSの::after要素に動的に表示される "EXP"量が必要です。

• ::after要素の幅を動的に変更する方法はありますか？私は動的に変更する必要があるバーのこのモデルを通じて、各要素のために幅を通過したが、私はまだ
それを表示しません

ています、ここではどのように私のコードの例ピースですこれまでのところ、それをやった」：

.pkmn-pc { 
 
     color: white; 
 
     margin: 10px; 
 
     display: inline-block; 
 
    } 
 

 
    .pkmn-summary, .pkmn-info { 
 
     display: table-cell; 
 
     vertical-align: middle; 
 
     height: 60px; 
 
    } 
 

 
    .pkmn-summary { 
 
     width: 193px; 
 
     background: #745fb5; 
 
     background: linear-gradient(15deg, #745fb5, #9a6dbb); 
 
     border-radius: 5px 0 0 5px; 
 
     box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); 
 
     white-space: nowrap; 
 
     border-bottom: solid 5px grey; 
 
     text-align: left; 
 
     padding-left: 5px; 
 
    } 
 

 
     .pkmn-summary:after { 
 
      content: ''; 
 
      position: relative; 
 
      left: -181px; 
 
      bottom: -31px; 
 
      height: 5px; 
 
      background: green; 
 
      width: 73%; 
 
      display: inline-block; 
 
      border-radius: 0 0 0 5px; 
 
     } 
 

 
    .pkmn-info { 
 
     background: #333538; 
 
     border-radius: 0 5px 5px 0; 
 
     width: 70px; 
 
     text-align: center; 
 
     box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); 
 
    } 
 

 
    .pkmn-outer { 
 
     padding-bottom: 2px; 
 
    } 
 

 
    .pkmn-inner { 
 
     display: inline-block; 
 
     width: 3px; 
 
    } 
 

 
    .pkmn-sprite { 
 
     vertical-align: middle; 
 
    } 
 

 
    .pkmn-name { 
 
     font-size: 1.2em; 
 
    } 
 

 
    .pkmn-lvl { 
 
     font-size: 0.8em; 
 
     display: block; 
 
    } 
 

 
    .crown { 
 
     padding-top: 5px; 
 
    } 
 

 
    code { 
 
     padding: 0; 
 
     font-size: 1em; 
 
     color: white; 
 
     background-color: transparent; 
 
     border-radius: 0; 
 
    }

<div class="pkmn-pc"> 
 
    <div class="pkmn-summary"> 
 
     <img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" /> 
 
     <code class="pkmn-name">15Characterssss</code> 
 
    </div> 
 
    <div class="pkmn-info"> 
 
     <img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" /> 
 
     <div class="pkmn-outer"> 
 
      <img class="heart" src="https://image.ibb.co/kB8vi6/heart.png"> 
 
      <div class="pkmn-inner"></div> 
 
      <img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png"> 
 
     </div> 
 
     <code class="pkmn-lvl">lvl 100</code> 
 
    </div> 
 
</div>

任意の助けをいただければ幸いです！ありがとう！

Answer 1

のようなバー要素やスクリプトを追加データ内で使用可能なEXP値（他のユーザー情報とともに）を使用すると、要素を作成できます（.pkmn-exp）、経験レベル（または幅）をインラインスタイルで設定します。

たとえば、ユーザーが73/100の経験レベルがある場合：

<div class="pkmn-exp" style="width:73%;"></div> 

73がユーザーのデータから来ています。

.pkmn-pc { 
 
    color: white; 
 
    margin: 10px; 
 
    display: inline-block; 
 
} 
 

 
.pkmn-summary, 
 
.pkmn-info { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 60px; 
 
} 
 

 
.pkmn-summary { 
 
    position: relative; 
 
    width: 193px; 
 
    background: #745fb5; 
 
    background: linear-gradient(15deg, #745fb5, #9a6dbb); 
 
    border-radius: 5px 0 0 5px; 
 
    box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); 
 
    white-space: nowrap; 
 
    border-bottom: solid 5px grey; 
 
    text-align: left; 
 
    padding-left: 5px; 
 
} 
 

 
.pkmn-exp { 
 
    position: absolute; 
 
    left: 0px; 
 
    bottom: -5px; 
 
    height: 5px; 
 
    background: green; 
 
    display: inline-block; 
 
    border-radius: 0 0 0 5px; 
 
} 
 

 
.pkmn-info { 
 
    background: #333538; 
 
    border-radius: 0 5px 5px 0; 
 
    width: 70px; 
 
    text-align: center; 
 
    box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); 
 
} 
 

 
.pkmn-outer { 
 
    padding-bottom: 2px; 
 
} 
 

 
.pkmn-inner { 
 
    display: inline-block; 
 
    width: 3px; 
 
} 
 

 
.pkmn-sprite { 
 
    vertical-align: middle; 
 
} 
 

 
.pkmn-name { 
 
    font-size: 1.2em; 
 
} 
 

 
.pkmn-lvl { 
 
    font-size: 0.8em; 
 
    display: block; 
 
} 
 

 
.crown { 
 
    padding-top: 5px; 
 
} 
 

 
code { 
 
    padding: 0; 
 
    font-size: 1em; 
 
    color: white; 
 
    background-color: transparent; 
 
    border-radius: 0; 
 
}

<div class="pkmn-pc"> 
 
    <div class="pkmn-summary"> 
 
    <img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" /> 
 
    <code class="pkmn-name">15Characterssss</code> 
 
    <div class="pkmn-exp" style="width:73%"></div> 
 
    </div> 
 
    <div class="pkmn-info"> 
 
    <img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" /> 
 
    <div class="pkmn-outer"> 
 
     <img class="heart" src="https://image.ibb.co/kB8vi6/heart.png"> 
 
     <div class="pkmn-inner"></div> 
 
     <img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png"> 
 
    </div> 
 
    <code class="pkmn-lvl">lvl 100</code> 
 
    </div> 
 
</div>

Answer 2

残念ながら、:: after要素はdomの一部ではないため、スクリプト化できません。 あなたは

• は、事前定義されたクラスのセットを使用し、親
• に適用することができどちらかお持ちの場合は

var p = 0; 
 
var bar = document.querySelector(".pkmn-bar"); 
 
window.setInterval(function() { 
 
    bar.style.width=p+"%"; 
 
    p++; 
 
    if(p>100) p=0; 
 
},50);

.pkmn-pc { 
 
     color: white; 
 
     margin: 10px; 
 
     display: inline-block; 
 
    } 
 

 
    .pkmn-summary, .pkmn-info { 
 
     display: table-cell; 
 
     vertical-align: middle; 
 
     height: 60px; 
 
    } 
 

 
    .pkmn-summary { 
 
     width: 193px; 
 
     background: #745fb5; 
 
     background: linear-gradient(15deg, #745fb5, #9a6dbb); 
 
     border-radius: 5px 0 0 5px; 
 
     box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); 
 
     white-space: nowrap; 
 
     border-bottom: solid 5px grey; 
 
     text-align: left; 
 
     padding-left: 5px; 
 
     position: relative; 
 
    } 
 

 
    .pkmn-bar { 
 
     content: ''; 
 
     background: #745fb5; 
 
     white-space: nowrap; 
 
     text-align: left; 
 
     position: absolute; 
 
     left: 0; 
 
     bottom: -5px; 
 
     height: 5px; 
 
     background: green; 
 
     display: block; 
 
     border-radius: 0 0 0 5px; 
 
    } 
 

 
    .pkmn-info { 
 
     background: #333538; 
 
     border-radius: 0 5px 5px 0; 
 
     width: 70px; 
 
     text-align: center; 
 
     box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55); 
 
    } 
 

 
    .pkmn-outer { 
 
     padding-bottom: 2px; 
 
    } 
 

 
    .pkmn-inner { 
 
     display: inline-block; 
 
     width: 3px; 
 
    } 
 

 
    .pkmn-sprite { 
 
     vertical-align: middle; 
 
    } 
 

 
    .pkmn-name { 
 
     font-size: 1.2em; 
 
    } 
 

 
    .pkmn-lvl { 
 
     font-size: 0.8em; 
 
     display: block; 
 
    } 
 

 
    .crown { 
 
     padding-top: 5px; 
 
    } 
 

 
    code { 
 
     padding: 0; 
 
     font-size: 1em; 
 
     color: white; 
 
     background-color: transparent; 
 
     border-radius: 0; 
 
    }

<div class="pkmn-pc"> 
 
    <div class="pkmn-summary"> 
 
     <img class="pkmn-sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" /> 
 
     <code class="pkmn-name">15Characterssss</code> 
 
     <div class="pkmn-bar"></div> 
 
    </div> 
 
    <div class="pkmn-info"> 
 
     <img class="crown" src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" /> 
 
     <div class="pkmn-outer"> 
 
      <img class="heart" src="https://image.ibb.co/kB8vi6/heart.png"> 
 
      <div class="pkmn-inner"></div> 
 
      <img class="star" src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png"> 
 
     </div> 
 
     <code class="pkmn-lvl">lvl 100</code> 
 
    </div> 
 
    
 
</div>