Question

我需要在每次点击图片时动态更改margin-top的{{1}}值。这两个问题1 / 2 / 3 / 4或tutorial都不适用于我，因为我更改了p::before值而不是内容或者颜色。

我无法使用margin-top，因为根据this，非字符串值不支持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;
}

Answer 1

我建议您这样做，动态创建style元素（具有唯一ID，以便您可以反复访问）并重复更新规则

用法

loadStyle('p.clicker::after { margin-top: ' + calculated-value + 'px; }');

脚本

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

在this post of mine还有一些版本（可能会被认为是可能重复的版本）

使用jQuery或Javascript动态设计伪元素

1 个答案: