使用 javascript 從跨度（不是文本）中獲取值

Question

我正在嘗試獲取 span 屬性的值，但到目前為止只成功獲取了文本（在這種情況下我不需要）。

 // I want the value to return "10" myValue = document.querySelector(".count-total").getElementByID("data-multiply") console.log(myValue)

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 1

使用querySelector定位span ，然后從數據集中獲取multiply值。

 const span = document.querySelector('.count-total span'); console.log(span.dataset); const val = span.dataset.multiply; console.log(val);

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 2

使用dataset屬性： https : //developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

 const node = document.querySelector(".count-total span[data-multiply]") console.info(node.dataset.multiply)

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 3

.getElementByID("data-multiply")在語法上既不正確，也不會獲得數據屬性

它拼寫為getElementById但在元素具有 ID 時使用

您需要使用帶有完整路徑的 querySelector 並使用dataset 屬性

 // I want the value to return "10" const myValue = document.querySelector(".count-total span").dataset.multiply; console.log(myValue)

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 4

getElementById （注意末尾的小寫d ）查找具有匹配id="xyz"值的元素。 你的元素都沒有id 。

假設帶有data-multiply的span是具有該data-*屬性的唯一（或至少是第一個）元素，您可以使用屬性選擇器（ [data-multiply] ）通過querySelector找到它，並通過getAttribute或dataset讀取其屬性值：

 const element = document.querySelector("[data-multiply]"); const myValue = element.getAttribute("data-multiply"); console.log(myValue); const myValue2 = element.dataset.multiply; console.log(myValue2);

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>