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

Question

我遇到了为锚标记的数据属性赋值的问题。这是我的代码：

<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>

我想将以下字符串值设置为上面的href（替换＆＃39; mycolor＆＃39;用＆＃39; red＆＃39;）：

数据值=＆＃34;红色＆＃34;

但上述情况无效。任何提示都表示赞赏。

Answer 1

你试试：

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

Answer 2

尝试重写代码：

<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>

此处示例https://jsfiddle.net/fjchy6av/1/

Answer 3

只需将您的代码更新为

即可

<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>

示例：https://jsfiddle.net/1usopvda/2/

进一步解释

有两种方法可以做到这一点。请参阅以下示例，了解如何在JavaScript中使用data-attribute。

var colorLink = document.getElementById("setcolor");

• 使用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
  

• 使用JavaScript的dataset属性

  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()问题中想要实现的目标。因此，如果您想要更改值，请参阅下面的示例

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

    setcolorLink.onclick = function(){
        this.setAttribute("data-value", color);
    };
  }
</script>

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

示例：https://jsfiddle.net/1usopvda/4/

Answer 4

您的js使用不正确。尝试下面的 ```

<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>

```

Answer 5

如果您只需更改<a>标记的点击颜色，您可以考虑使用仅使用CSS的更直接的解决方案，在这种情况下为CSS :active Selector。

#setcolor:active{
    color: red;
}

<a id="setcolor" class="colors">Choose color (Click me!)</a>