Question

我正在开发一个新项目，我遇到了一个问题

我想要一个用户可以输入用户名的表单，以便生成3d图像。图像生成器的代码是：

<span class="mc-skin" data-minecraft-username="UsernameHere"></span>

我需要的是一个输入字段，它将data-minecraft-username更改为表单的输入。

感谢您的帮助！

Answer 1

你可以试试这个：

var user="Zane";

document.getElementsByClassName("mc-skin")[0].setAttribute('data-minecraft-username',user);

但如果您将id用于特定范围并将其设置为以下情况会更好：添加id="spanId"然后使用

document.getElementById('spanId').setAttribute('data-minecraft-username', user);

Answer 2

您可以使用HTML 5

示例：

variable.setAttribute('data-minecraft-username','randomUserName');

变量你的span元素

此处更多参考：http://html5doctor.com/html5-custom-data-attributes/

Answer 3

处理data-*属性最强大的方法可能是使用 setAttribute 和 getAttribute 。如果span的id为 Skin ，则可以使用：

var span = document.getElementById('Skin');
span.setAttribute('data-minecraft-username', newValue);

您还可以使用element.dataset属性：

span.dataset['minecraft-username'] = newValue;

这将添加 data-minecraft-unsername 属性，其值为 newValue 中的任何值。但是，旧浏览器可能缺少支持（请参阅MDN HTMLElement.dataset，表示需要使用IE 11，Safari 6等最近的浏览器。）

另见MDN Using data attributes。

要在文档中使用上述脚本，您可能会执行以下操作：

<script>
function setDataAttribute(elID, attName, value) {
  var el = document.getElementById(elID);
  if (el) {
    el.setAttribute('data-' + attName, value);
  }
}

function setContent(elID, value) {
  var el = document.getElementById(elID);
  if (el) {
    el.innerHTML = value;
  }
}

</script>


<span id="Skin"></span>
<br>
<input type="text" onblur="
  setDataAttribute('Skin', 'minecraft-username', this.value);
  setContent('Skin', this.value);
">

Javascript从表单输入更改id

3 个答案: