Question

我正在尝试动态更改元素的宽度：after。但它并没有反映出来。有人可以帮忙！

$(function(){
var a=20;
$(".progress:after").width(a+"%"); 
// This is not showing 20%. Still shows 50% which was coded in CSS
});

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}
.progress:after {
    content:'\A';
    position:absolute;
    background:black;
    top:0; bottom:0;
    left:0; 
    width:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress"></div>

这是JSFidle的Link

Answer 1

您应该使用现在可用的，html5 progress element。

$(function() {
  var a = 20;
  $("progress").prop('value', a);
});

progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
    background:transparent;
}
::-webkit-progress-bar{background:transparent;}

::-moz-progress-bar{background-color:black;}
::-ms-fill{background-color:black;}
::-webkit-progress-value{background-color:black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress value="50" max="100"></progress>

从JQuery修改后面的伪CSS元素的宽度

1 个答案: