如何使用 javascript 以编程方式修改 css ::before 和 ::after

Question

我为来自 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 中的 "width" 和 "height" 以及 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

Answer 1

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

如何使用 javascript 以编程方式修改 css ::before 和 ::after

How to modify programmatically with javascript the css ::before and ::after

html

javascript

css

pseudo-element