javascript - 使用 Jquery 或 JavaScript 更改最大宽度

Question

HTML 使用 class="line1"

            <div class="line line1 row" onscroll="myFunction()">
                <div class="tag bold flex tagline col-sm-2">
                    HTML / CSS
                </div>
                <div class="tag-percent col-sm-1 ml-auto"><span>95%</span></div>
            </div>

CSS 最大宽度：10%；在伪：后元素

   .line1:after{
    max-width: 10%
     }

将最大宽度设置为 85% 的脚本

<script>
    function myFunction(){
        const element = document.querySelector('.line1:after');
        element.style.maxWidth = "85%";
        console.log(element);
            }

  </script>

我尝试使用 getComputedStyle.getPropertyValue 但它是只读的。任何人都可以使用 jQuery 或 JavaScript 解决它。

标签： javascriptjqueryhtmlcss

Answer 1

你不能选择伪元素。所以你可以再添加一个类调用line1-after

在 CSS 中

.line1-after:after{
 max-width: 85%
}

添加这个类

$('.line1').addClass("line1-after");