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

：之前和之后元素并不是dom的一部分，所以你不能这样做，可能需要采用不同的方法。请参阅Access the css ":after" selector with jQuery和Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

如何用javascript编程修改css :: before和:: after

1 个答案: