如何使用javascript或jquery修改psedo-element之前的属性？

Question

我正在尝试修改一个伪元素:before的"left“属性。使用JavaScript或jQuery修改任何其他元素都没有问题，但在尝试修改:before选项卡中的元素时似乎遇到了问题。

举个例子，我似乎不能将下面:before元素的left属性设置为200。

我的css：

#buttonBox {
    position: absolute;
    width:150px;
    z-index:10;
    left:298px;
    top: 130px;
}

#buttonBox:before {
    position: absolute;
    content: "";
    top: -8px;
    left: 80px;
    margin-left: -8px;  
    border-bottom: 8px solid #ddd;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;        
    border-top: 0;
    border-bottom-color: #1e2227; 
}

在javascript中：

document.getElementById("#buttonBox:before")

会产生null，因此无法设置。

jQuery：

$("#buttonBox:before").offset({top: -8, left: 200});

在设置left属性时同样没有响应。

在如何修改伪元素的属性方面，我是否遗漏了什么？我在谷歌上搜索这个没有任何运气。

Answer 1

不能使用JQuery修改伪元素。使用类来操作它们的CSS属性。示例：

#buttonBox.active:before {
   top: -8px;        
   left: 200px;
}

.active类将在必要时通过Javascript应用。

Answer 2

您可以通过JS修改:before和:after，但这已经够烦人的了，您可能不应该这么做。

为此，您需要使用相同的选择器，并在包含新样式的网页的head中手动添加一个新的style元素：

$('<style type="text/css">#buttonBox:before { left: 200px; top: -8px; }</style>').appendTo('head');

伪元素实际上不是DOM元素(因此称为“伪”)。除了添加/删除样式表之外，它们不是以JavaScript可以访问的方式存在的。

Answer 3

也许你可以在jQuery中使用prev()函数？

http://api.jquery.com/prev/