使用jQuery或Javascript动态设置伪元素的样式

我需要在每次图像单击之前动态更改

p:：的
margintop
值。
这两个问题///对我来说都不起作用，因为我正在更改
页边顶部
值，而不是内容或颜色

我不能使用
attr（）
，因为它不支持根据的非字符串值。
创建样式表或在标题中添加脚本不是一个好主意，因为我无法再次访问和修改它，所以它会创建几十个样式标记和规则，并且会弄乱我的样式

我怎样才能做到这一点

提前谢谢

p::after {
    top: auto;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #f9e8a2;
    border-width: 15px;
    left: 50%;
    margin: 28px 0 0 -15px;
}

我建议您这样做，动态创建
样式
元素（具有唯一的id，以便您可以反复访问），然后重复更新规则

用法

剧本

function loadStyle(css) {
  var style = document.querySelector('style[id="lastinbody"]') || document.createElement('style');
  style.id = 'lastinbody';
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  document.querySelector('body').appendChild(style);
}


 AT是几个版本（可能被认为是一个可能的副本）
请添加一个位HTML，CSSIMAGE不能有一个前元素，如果你使用jQuery，为什么不创建元素，如果你需要动态地修改它，它比尝试一个前的样式要好。element@Pete我的错，伙计。。这是p，不是img。它现在被编辑了。我不是在创建元素，因为它正在屏幕上动画和移动。你确定[4]中的任何解决方法都不适合你吗？@BoltClock是的，我确定，因为边距上限规则的值是计算出来的，然后添加的，我不能添加带有静态值Perfect的规则！我不知道脚本标记可以有一个ID来解决我的问题。非常感谢。
function loadStyle(css) {
  var style = document.querySelector('style[id="lastinbody"]') || document.createElement('style');
  style.id = 'lastinbody';
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  document.querySelector('body').appendChild(style);
}