Question

我正在进行一些mvc测试，当我通过我的模型显示一些元素时，我遇到了障碍。每个元素都必须具有“EXP”金额，该金额在css的::after元素中动态显示。

有没有办法动态更改::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的一部分。你可以

使用一组预定义的类并将其应用于父级
添加一个bar元素并将其编写为

＆＃13;

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

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

带有:: after pseudoelement的css类的动态宽度

2 个答案: