修改伪元素的css样式：使用Jquery的内容后 [英] Modify css style for pseudo element :after content with Jquery

问题描述

我的气泡形状是使用CSS3设计的。

JS Fiddle Example
三角形

 ：{
 content：; 
} 
  

我需要用左右移动三角形修改<强> css param和Jquery。
我知道我不能从DOM中选择伪元素，但是有另一种方法改变：在js之后的样式吗？

是的，我们可以将另一个div放入

 < div class =pop>< div class =arr> < / div>< / div> 
  

但很难看。

解决方案有一个更简单的方法：只需将伪元素的 content 属性值设置为 attr（some-attribute-name） ，它将使用父元素上的HTML属性的值作为伪元素的内容。然后，您可以对父元素使用 setAttribute（）方法动态更改值。下面是这个方法在动作中的模拟片段。我还做了一个更多详细信息的博文，其中包含一个直播

  #SomeElement：after {
 content：attr（some-attribute-name）; 
} 
  

HTML / p>

 < div id =SomeElementsome-attribute-name =Pseudo content here！>< / div> 
  

JavaScript 伪内容）

  var someElement = document.getElementById（'SomeElement'）; 
 someElement.setAttribute（'some-attribute-name'，'New pseudo content here！'）; 
  

I have baloon shape designed with CSS3.
JS Fiddle Example It's have triangle made with

:after {
    content: "";
}

I need to moving triangle left-right with modify left css param with Jquery. I know that i can't select pseudo element which out of DOM, but is there another way to change :after style with js?

Yes, we can put another div inside like

<div class="pop"><div class="arr"></div></div>

but it's ugly

解决方案

There is a much easier way: just set the pseudo element's content property value to attr(some-attribute-name), it will use the value of the HTML attribute on the parent as the content for the pseudo element. You can then use the setAttribute() method on the parent element to change the value dynamically. Below are mock snippets of how this method would look in action. I also did a blog post with further details that contains a live example fiddle.

CSS

#SomeElement:after {
    content: attr(some-attribute-name);
}

HTML

<div id="SomeElement" some-attribute-name="Pseudo content here!"></div>

JavaScript (to change pseudo content)

var someElement = document.getElementById('SomeElement');
someElement.setAttribute('some-attribute-name', 'New pseudo content here!');

这篇关于修改伪元素的css样式：使用Jquery的内容后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！