如何操作自定义属性 javascript答案

【问题标题】：How to manipulate an custom attribute javascript如何操作自定义属性 javascript
【发布时间】：2021-06-05 00:18:31
【问题描述】：

我正在为这个脚本而苦苦挣扎，我需要“选择”一个 HTML 标记的属性。

它是一个应用程序，当我点击按钮时会开始倒计时，但是

我正在使用我找到的自定义倒计时。它有一个名为“data-date”的属性

<div data-date="<?php echo date('Y/m/d H:i:s', $today); ?>" id="count-down"></div>

我知道<?php echo date('Y/m/d H:i:s', $today); ?> 会有问题

但是没关系，我想我已经解决了它以更改为 javascript。

这就是我的脚本得到的方式

                var oldDateObj = new Date();
                var time = new Date();
                time.setTime(oldDateObj.getTime() + (<?=$time?> * 1000)); //adding time to the current time

                //How it should get

                //<h2>Countdown</h2>
                //<div data-date="<?php //echo date('Y/m/d H:i:s', $today); ?>" id="count-down"></div>

                document.getElementById("coluna1").innerHTML = "";

                let temp = document.createElement('h2');
                temp.innerHTML = 'Temporizador';


                let div1 = document.createElement('div');
                div1.data-date = time;                         //where the error occurs 
                div1.id = "count-down";


                document.getElementById("coluna1").appendChild(temp);
                document.getElementById("coluna1").appendChild(div1);

错误是未捕获的语法错误：分配时左侧无效

所以有人有任何想法可以帮助我，请分享:)

【问题讨论】：

标签： javascript attributes countdown attr

【解决方案1】：

在 JS 中，不能使用点语法访问不是有效标识符的属性名称。

对于普通的 JS 对象，你可以通过使用方括号语法绕过这个限制，但这对 HTML 元素不起作用（它会设置属性，但属性不会成为元素的属性）。

但是，有一种方法可以使用 dataset property 来操作元素的 data-* 属性：

div1.dataset.date = time;

【讨论】：

@IndexError 我很高兴它有帮助。对于您提出的问题，您可以使用旁边的灰色勾号接受您认为最有帮助的答案。

【解决方案2】：

数据日期无效 - 解析器可能会将其解释为减法运算符

要访问具有这样名称的字段，请尝试使用以下符号：

                let div1 = document.createElement('div');
                div1['data-date'] = time;                         //where the error occurs 
                div1.id = "count-down";

如果你使用 jQuery，你可以像这样访问这些 data-* 属性：

<div id="count-down" data-date="xxx"/>


$("#count-down").data("date");

Here is more info

如果你更喜欢使用纯 JS - here's a documentation on dataset property

【讨论】：