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

Question

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

我无法使用包含美元符号的 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

只要在处理属性时排除 $。 $ 只是将属性反映到 DOM 元素上的属性。

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

Answer 2

很确定这会奏效

（您需要先将 align-bottom$="" 放入您的 html，这只是为了更新值）：

.attributes['align-bottom$'].value = "{{globals.abovemd}}";

Answer 3

这可能会成功（设置无效的属性名称），但显然并非在所有情况下都有效：

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>

仍然需要检查结束标记等

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

How can I set attribute which ends with dollar sign using Javascript?

html

javascript

polymer