如何操作自定义属性 javascript

Question

我正在努力处理这个脚本，我需要“select”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);

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

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

Answer 1

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

对于常规 JS 对象，您可以使用括号语法绕过此限制，但这不适用于 HTML 元素（它将设置属性，但属性不会成为元素的属性）。

但是，有一种方法可以使用 dataset property:

来操纵元素的 data-* 属性

div1.dataset.date = time;

Answer 2

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

要访问具有这样名称的字段，请尝试使用此表示法：

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

如果您使用的是 jQuery，您可以像这样访问这些数据-* 属性：

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


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

Here is more info

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

如何操作自定义属性 javascript

How to manipulate an custom attribute javascript

javascript

attributes

countdown

attr