是否使用javascript将数据值分配给a href？

我在为锚定标记的数据属性赋值时遇到问题。这是我的密码：

<script>
window.onload = function(){
document.getElementById("setcolor").click();
}

var color = "red";
document.getElementById("mycolor").value = color;
</script>

<a id="setcolor" class="colors" href="#" role="button" data-value="mycolor">Choose color</a>

window.onload=函数（）{
document.getElementById（“setcolor”）。单击（）；
}
var color=“红色”；
document.getElementById（“mycolor”）.value=color；

我想将以下字符串值设置为上面的href（将“mycolor”替换为“red”）：

数据值=“红色”

但上述措施并不奏效。欢迎提供任何提示。

您可以尝试：

document.getElementById("setcolor").setAttribute("data-value", color);

---

尝试重写您的代码：

<script>
window.onload = function(){
document.getElementById("setcolor").click();
}

var color = "red";
var setcolor = document.getElementById("setcolor");
setcolor.dataset.value = color; //sets data-value="red"
</script>

window.onload=函数（）{
document.getElementById（“setcolor”）。单击（）；
}
var color=“红色”；
var setcolor=document.getElementById（“setcolor”）；
setcolor.dataset.value=颜色//设置数据值=“红色”

---

此处示例

只需将代码更新为

<script>
  window.onload = function(){
    var color = "red",
        setcolorLink = document.getElementById("setcolor");

    setcolorLink.setAttribute("data-value", color);
    setcolorLink.click();
  }
</script>

<a id="setcolor" class="colors" href="javascript:void(0)" role="button" data-value="mycolor">Choose color</a>

• 使用DOM的

  getAttribute（）

  属性

   var getColor = colorLink.getAttribute("data-value") //returns "mycolor"
  
   colorLink.setAttribute("data-value", "red") //changes "data-value" to "red"
   colorLink.removeAttribute("data-value") //removes "data-value" attribute entirely
  

  var getColor = colorLink.dataset.value //returns "mycolor"
  
  colorLink.dataset.value = 'red' //changes "data-value" to "red"
  colorLink.dataset.value = null  //removes "data-value" attribute
  

• 使用JavaScript的

  dataset

  属性

   var getColor = colorLink.getAttribute("data-value") //returns "mycolor"
  
   colorLink.setAttribute("data-value", "red") //changes "data-value" to "red"
   colorLink.removeAttribute("data-value") //removes "data-value" attribute entirely
  

  var getColor = colorLink.dataset.value //returns "mycolor"
  
  colorLink.dataset.value = 'red' //changes "data-value" to "red"
  colorLink.dataset.value = null  //removes "data-value" attribute
  

---

我不确定您通过问题中的

click（）

尝试实现什么。因此，如果要更改onclick的值，请参见下面的示例

window.onload=函数（）{
var color=“红色”，
setcolorLink=document.getElementById（“setcolor”）；
setcolorLink.onclick=函数（）{
此.setAttribute（“数据值”，颜色）；
};
}

---

示例：

您的js用法不正确。试试下面的方法 ```

window.onload=函数（）{
document.getElementById（“setcolor”）。单击（）；
}
var color=“红色”；
document.getElementById（“setcolor”）.setAttribute（“mycolor”，color）；

---

```

如果您只需要在单击时更改颜色，请为您

#设置颜色：活动{
颜色：红色；
}
选择颜色（单击我！）
由于您的
var color=“red”在onload事件之外，它会立即执行，而HTML不会准备就绪。您需要在setColor a ID中添加一个onclick侦听器，然后添加颜色更改代码，将颜色更改部分也移到onload函数中。ID
mycolor
不存在。感谢提示。感谢帮助。非常欢迎@davidle，我用更多示例更新了答案。因此，您可以了解更多信息。：）感谢DavidLee的帮助。“如果有帮助，你可以考虑投票或接受这个答案=”欣赏小费。
<script>
window.onload = function(){
document.getElementById("setcolor").click();
}

var color = "red";
document.getElementById("setcolor").setAttribute("mycolor", color);
</script>

<a id="setcolor" class="colors" href="#" role="button" data-value="mycolor">Choose color</a>