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

【问题标题】：Wordpress - assigning a body's data attribute value to a variableWordpress - 将正文的数据属性值分配给变量
【发布时间】：2020-05-18 17:24:57
【问题描述】：

我正在使用 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>

但是，查看控制台我得到“null”。我究竟做错了什么？谢谢。

编辑：我已将代码切换为使用 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);

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

【问题讨论】：

你为什么把你的Javascript放在functions.php中？
我将所有自定义代码保存在两个单独的文件中：styles.css 和 functions.php，都在我的子主题中，以避免分散并便于维护。此外，通过将 javascript 放入 functions.php 中，我可以将它们链接到 wordpress 中的特定操作和挂钩。我可以将外部 js 文件排入队列，但由于我只有几个函数，我更喜欢将它们全部保存在一个文件中。

【解决方案1】：

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

在页面加载后尝试执行代码：

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

【讨论】：