javascript - Wordpress - 将正文的数据属性值分配给变量

Question

我正在使用 Wordpress，我正在尝试在我的自定义子主题中使用 functions.php 中的 javascript 获取数据属性的值并将其分配给变量。

该页面呈现以下正文：

<body class="(...)" data-elementor-device-mode="desktop">

我正在尝试使用functions.php中的以下函数将“桌面”分配给变量：

<script type="text/javascript">
    var deviceType = document.body.getAttribute("data-elementor-device-mode");
    console.log(deviceType);
</script>

然而，看着控制台我得到“空”。我究竟做错了什么？谢谢你。

编辑：我已将代码切换为使用 HTML5 中的数据集功能。因此，我现在有以下内容：

  var body = document.body;
  console.log(body);
  var bodyDevice = body.dataset.elementorDeviceMode;
  console.log(bodyDevice);

第一个 console.log 按预期返回正文，但第二个 console.log 仍返回“未定义”。

编辑2：这一定是语法问题，因为以下

var bodyDevice = body.clientWidth;
console.log(bodyDevice);

将返回 body 元素的当前宽度（这解决了我的问题）；无论如何，为什么

var bodyDevice = body.dataset.elementorDeviceMode;
console.log(bodyDevice);

不返回“桌面”值？谢谢你。

score 1 · Accepted Answer

基本上你的代码没有返回任何内容，因为它是在 Elementor 插入数据集之前执行的......所以，data-elementor-device-mode你的代码执行的那一刻没有。

尝试在页面加载后执行代码，如下所示：

window.onload = function() {
  var bodyDevice = document.body.dataset.elementorDeviceMode;
  console.log(bodyDevice);
};

1 回答 1