2

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

例如，我似乎无法将下面元素的left属性设置为.:before200

我的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")

yield null，因此无法设置。

jQuery：

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

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

关于如何修改伪元素的属性，我有什么遗漏吗？我没有任何运气谷歌搜索这个。

4

3 回答 3

1

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

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

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

于 2011-11-28T17:45:45.207 回答
0

您可以通过 JS 进行修改:before，:after但这很烦人，您可能不应该这样做。

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

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

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

于 2011-11-28T18:15:15.470 回答
-1

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

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

于 2011-11-28T17:50:26.887 回答