如何使用 javascript 以编程方式修改 css ::before 和 ::after [重复]答案

【问题标题】：How to modify programmatically with javascript the css ::before and ::after [duplicate]如何使用 javascript 以编程方式修改 css ::before 和 ::after [重复]
【发布时间】：2015-03-11 21:29:53
【问题描述】：

我已经为 http://www.ilikepixels.co.uk/drop/bubbler/ 的气泡生成了这个 CSS

    .bubble
    {
        position: relative;
        width: 250px;
        height: 120px;
        padding: 0px;
        background: #FFFFFF;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        border: #70CAF3 solid 2px;
    }

    .bubble:after
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 15px 15px 0;
        border-color: #FFFFFF transparent;
        display: block;
        width: 0;
        z-index: 1;
        bottom: -15px;
        left: 110px;
    }

    .bubble:before
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 16px 16px 0;
        border-color: #70CAF3 transparent;
        display: block;
        width: 0;
        z-index: 0;
        bottom: -18px;
        left: 109px;
    }

我想做的是，将这个气泡用于具有不同长度和图像的几种不同文本（显示气泡的不同方式）。

据我了解，我想修改 .bubble 中的“宽度”和“高度”，以及 bubble::before 和 bubble::after 中的“left”。

但是当我得到元素时

var bubbleElem = document.getElementById('bubble-element-id');
bubbleElem.style.??

我不知道如何访问伪元素 ::before 和 ::after

我也试过这个：

bubbleElem.shadowRoot
null
bubbleElem.childNodes
[]
bubbleElem.children
[]
bubbleElem.innerHTML
""
bubbleElem.hasAttribute('::before')
false
bubbleElem.prefix
null

如果能够轻松修改气泡的尺寸和小三角形的位置，那就太好了。

谢谢！

更新：

我忘了告诉我我不想要 JQuery 的解决方案。但是，我找到了解决问题的方法。

    .bubble
    {
        position: relative;
        width: 250px;
        height: 120px;
        padding: 0px;
        background: #FFFFFF;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        border: #70CAF3 solid 2px;
    }

    .bubble .after
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 15px 15px 0;
        border-color: #FFFFFF transparent;
        display: block;
        width: 0;
        z-index: 1;
        bottom: -15px;
        left: 110px;
    }

    .bubble .before
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 16px 16px 0;
        border-color: #70CAF3 transparent;
        display: block;
        width: 0;
        z-index: 0;
        bottom: -18px;
        left: 109px;
    }

使用这样的 HTML：

                <div id="info-bubble" class="bubble">
                    <div class="before"></div>
                    <div class="after"></div>
                </div>

现在我可以修改 .before 元素和 .after 元素，因为它不再是伪元素，现在是真实元素了。

var bubbleElem = document.getElementById('info-bubble');
var bubbleBefore = bubbleElem.children[0];
var bubbleAfter = bubbleElem.children[1];

bubbleElem.style.width = '10px'; // works
bubbleElem.style.height = '10px'; // works
bubbleBefore.style.left = '10px'; // works
bubbleAfter.style.left = '10px'; // works

【问题讨论】：

所谓的 vanilla JavaScript 解决方案在底部：stackoverflow.com/questions/3743513/…

标签： javascript html css pseudo-element

【解决方案1】：

:before 和 :after 元素实际上并不是 dom 的一部分，因此您不能这样做，并且可能需要不同的方法。见Access the css ":after" selector with jQuery和Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

【讨论】：