如何使用JavaScript以编程方式修改css :: before和:: after [英] How to modify programmatically with javascript the css ::before and ::after

问题描述

我从 http://www.ilikepixels.co创建了一个泡泡的CSS .uk / drop / bubbler /

    .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;
    }

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

What I'd like to do, is to use this bubble for several different texts with different lengths and images (different ways of showing the bubble).

据我所知，我想修改.bubble的宽度和高度和leftfrom bubble :: before和bubble :: after。

From what I understand, I want to modify the "width" and "height" from .bubble and the "left" from bubble::before and bubble::after.

但是，当我得到元素时

But when I got the element

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

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

I don't know how to access the pseudo-element ::before and ::after

我也试过这个：

I have tried this too:

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

能够轻松修改气泡的尺寸和位置，这将是一件很棒的事情。

It'd be great to be able to easily modify the bubble's dimensions and position of the little triangle.

谢谢！

更新：

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

I forgot to tell that I didn't want a solution with JQuery. But, I've found the solution for my problem.

    .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元素，因为它不再是伪 - 元素，现在是一个真正的元素。

Now I can modify the .before element and the .after element, since it's no more a pseudo-element and is now a real element.

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

推荐答案

：before和：after元素之后真的不是这个dom的一部分，所以你不能这样做，并可能需要一种不同的方法。请参阅访问css：after选择器与jQuery 和在使用jQuery之后选择和操作CSS伪元素，例如:: before和::

The :before and :after elements aren't really part of the dom, so you can't do this and will likely need a different approach. See 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！