如何使用 javascript 或 jquery 修改 :before psedo-element 属性？

发布于 2024-12-18 16:03:28 字数 979 浏览 4 评论 0原文

我正在尝试修改伪元素 :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 属性时同样没有响应。

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

原文

I am trying to modify the "left" attribute of a pseudo-element :before. I am having no trouble modifying any other elements using either JavaScript or jQuery, but seem to be stuck when trying to modify an element in the :before tab.

By way of example, I cant seem to set the left attribute of the :before element below to 200.

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

In javascript:

document.getElementById("#buttonBox:before")

yields null, making it impossible to set that.

jQuery:

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

is similarly unresponsive in setting the left attribute.

Is there something I am missing on how to modify attributes of pseudo-elements? I'm not having any luck Googling this one.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绅刃 2024-12-25 16:03:28

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

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

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

You can't modify pseudo-elements with JQuery. Use classes to manipulate their CSS attributes instead. Example:

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

The .active class would be applied via Javascript when necessary.

回复收藏 0 原文

只有一腔孤勇 2024-12-25 16:03:28

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

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

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

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

You can modify :before and :after via JS, but it's annoying enough that you probably shouldn't.

To do it, you'd need to use an identical selector and manually add a new style element to the head of the webpage containing the new styles:

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

Pseudo-elements aren't actually DOM elements (hence the "pseudo"). They don't exist in a way that JavaScript can access beyond adding/removing stylesheets.

回复收藏 0 原文