HTML屬性設置成JavaScript變量是一種常見的編程技巧，它可以幫助我們在JavaScript代碼中方便地訪問和修改HTML元素的屬性值。下面我們來看看實現的方法。

// 獲取HTML元素
var myElement = document.getElementById("my-element");
// 獲取屬性值并存入JavaScript變量
var myAttributeValue = myElement.getAttribute("data-my-attribute");
// 修改屬性值
myElement.setAttribute("data-my-attribute", "new-value");
// 在HTML中使用JavaScript變量
myElement.innerHTML = "My attribute value is: " + myAttributeValue;

在這個例子中，我們首先使用document.getElementById方法獲取HTML元素。接著使用getElementById獲取元素屬性的值，并將其存入一個JavaScript變量中。然后我們可以對這個變量進行任何必要的操作，修改它的值或者使用它在JavaScript中做一些邏輯操作。最后，我們可以使用變量的值執行HTML中的操作，例如在元素的innerHTML屬性中添加文本。

這種方法可以幫助我們更好地組織和管理JavaScript代碼，使其更易讀、可維護和可擴展。它還可以使我們更輕松地在代碼中使用和操作HTML元素屬性，而不用擔心屬性值是否正確。