如何使用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

这可能可以解决问题（设置无效的属性名称），尽管显然在所有情况下均无效：

 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> 

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

Answer 2

只要在与该物业打交道时就排除$ 。 $只是将属性反映到该DOM元素上的属性。

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

Answer 3

可以肯定的

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

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