javascript - 如何使用 Javascript 设置以美元符号结尾的属性？

Question

我正在尝试创建一个预处理器，将文件中的一些自定义标记转换为与 Polymer 的数据绑定(bind) $= 注释一起使用的属性名称，但是我遇到了一个绊脚石.

我无法使用包含美元符号的 Javascript 设置属性。

我正在尝试转换

<p stuff="align bottom@md top@lg; offset 2gu@md; "></p>

至

<p align-bottom$="{{globals.abovemd}}" align-top$="{{globals.abovelg}}" offset-2gu$="{{globals.abovemd}}">

我已经尝试过:

.setAttribute("align-bottom$", "{{globals.abovemd}}");

但是它不起作用，因为属性名称不能包含美元符号。

有人能想出一种方法来解决这个问题吗？

Answer 1

这可能会起作用(设置无效的属性名称)，尽管显然并非在所有情况下都有效:

function setDollar(el,name,val){
  var attrs = [];
  var tagName = el.tagName;
  for (var i = 0; i < el.attributes.length; i++) {
      var attrib = el.attributes[i];
      if (attrib.specified) attrs.push(attrib.name+'="'+attrib.value+'"')
  }
  el.outerHTML = '<'+tagName+ ' '+name+'$="'+val+'"'+attrs.join(' ')+'>'+ el.innerHTML+'</'+el.tagName+'>';
  attrs.forEach((attr)=>el.setAttribute(attr.name, attr.value))
}

setDollar(document.querySelector('#wow'),'foo','bar')

<div id="wow"><p>something</p></div>

仍然需要检查结束标记等。