Question

我有这段代码

<div class="g-popupgrid-item g-zoom" data-size="395x385">

我想用图像大小动态填充395x385。

我有一个获取图像大小的JS函数，我不知道如何打印/ echo / document.write它在HTML标记内。

Answer 1

除非你已经在项目中使用它，否则我会避免使用jQuery这样一个简单的任务。简单的javascript：

var div = document.querySelector('.g-popupgrid-item');
var newSize = '100x100'; // for example
div.setAttribue('data-size', newSize);

Answer 2

使用JavaScript获取Node，然后根据您的需要进行修改：

var container = document.querySelector(".g-popupgrid-item .g-zoom")
container.setAttribute("data-size", value)

请记住，这只会影响这些类的第一个元素，如果你想影响它们，请使用下面的代码：

var containers = document.querySelectorAll(".g-popupgrid-item .g-zoom")
containers.forEach(function(container) {
  container.setAttribute("data-size", value)
})

另请注意，containers不是Array，而是NodeList。阅读更多here

编辑：根据@Eoin，Firefox中不支持.forEach()上的NodeList方法。您也可以使用标准for循环代替它：

var containers = document.querySelectorAll(".g-popupgrid-item .g-zoom")
for (var i = 0; i < containers.length; i++) {
  containers[i].setAttribute("data-size", value)
}

如何动态更新HTML属性

2 个答案: