Question

我想使用jquery插件“ datedropper”。 Datedropper

要设置默认日期，插件将在输入字段上使用属性：

<input id="addjobstartdate" data-default-date="CURRENT DATE"/>

我想动态更改默认日期，所以我尝试使用：

document.getElementById("addjobstartdate").setAttribute('data-default-date', getjobdetails[31]);

或

$('#addjobstartdate').attr('data-default-date', getjobdetails[31]);

但是，当我查看页面的源代码时，这两个命令都不会更改DOM。

数据默认日期仍为“当前日期”。有人可以向我解释一下。

Answer 1

通过客户端代码更改HTML元素的属性时，更改不会反映在源代码或开发工具中。尝试在控制台中运行$('#addjobstartdate').attr('data-default-date')以确认该值。

编辑：我站得住了。开发工具确实会更新值。不知道这是否改变。您的代码似乎正确。

Answer 2

如果您想查看DOM中的更改，这对我有用：

document.getElementById("addjobstartdate").dataset.defaultDate = "TODAY"

<input id="addjobstartdate" data-default-date="CURRENT DATE"/>

MDN

Answer 3

“源代码”与当前加载到内存中的“文档对象”不同。在查看源代码时，您所看到的只是传递给客户端计算机进行处理的原始代码。

一旦客户端修改，更改将仅保留在内存中。通过查看开发人员工具（在浏览器中按F12）并单击“元素”选项卡，可以看到这些更改。此选项卡向您显示当前内存中的代码（也称为DOM或文档对象模型）。

现在，在JavaScript中使用DOM对象时，有两种方法可以影响 元素的当前状态 ，了解使用这些对象的效果非常重要两种技术：

使用元素的当前HTML状态（通过 setAttribute()，removeAttribute()和getAttribute()）。在“元素”标签中查看DOM时，这些类型的更改将可见。
使用元素在内存中的元素的 当前DOM对象状态 （通过代表当前状态的JavaScript属性完成）。这些类型的更改不会对“元素”选项卡中显示的标记造成任何更改，但是会通过保留在内存中来影响元素。

最重要的是， property 值可能与 attribute 值不同。这可能会造成混淆，但是HTML状态是元素从外观上看，属性状态实际上是在内部发生的事情，例如您可以戴上笑脸，以便看着您的人认为您很高兴（HTML状态），但实际上您可能会为之感到难过（财产状态）。

当尚未设置属性状态时，属性状态就很重要，并且将完全控制元素的状态。设置属性状态后，它将覆盖属性状态可能存在的任何内容，并控制元素的实际状态。

// Get a reference to the button
var btn = document.querySelector("[type=button]");

// Test what the current HTML state is:
console.log("disabled attribute state: ", btn.getAttribute("disabled"));

// Test what the current mapped property state is:
console.log("disabled property state: ", btn.disabled);

console.log("...changing button's disabled PROPERTY to false...");

// Change the property state, which will override the HTML state and 
// and cause it to become enabled.
btn.disabled = false;

// Test what the current HTML state is:
console.log("disabled attribute state: ", btn.getAttribute("disabled"));  // null because property overrode HTML

// Test what the current mapped property value is:
console.log("disabled property state: ", btn.disabled);

<input type="button" value="I'm disabled" disabled="disabled">

如何在DOM中更改输入字段的属性

3 个答案: