我想使用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。
数据默认日期仍为“当前日期”。有人可以向我解释一下。
答案 0 :(得分:1)
通过客户端代码更改HTML元素的属性时,更改不会反映在源代码或开发工具中。尝试在控制台中运行$('#addjobstartdate').attr('data-default-date')
以确认该值。
编辑: 我站得住了。开发工具确实会更新值。不知道这是否改变。您的代码似乎正确。
答案 1 :(得分:1)
如果您想查看DOM中的更改,这对我有用:
document.getElementById("addjobstartdate").dataset.defaultDate = "TODAY"
<input id="addjobstartdate" data-default-date="CURRENT DATE"/>
答案 2 :(得分:1)
“源代码”与当前加载到内存中的“文档对象”不同。在查看源代码时,您所看到的只是传递给客户端计算机进行处理的原始代码。
一旦客户端修改,更改将仅保留在内存中。通过查看开发人员工具(在浏览器中按F12)并单击“元素”选项卡,可以看到这些更改。此选项卡向您显示当前内存中的代码(也称为DOM或文档对象模型)。
现在,在JavaScript中使用DOM对象时,有两种方法可以影响 元素的当前状态 ,了解使用这些对象的效果非常重要两种技术:
setAttribute()
,removeAttribute()
和getAttribute()
)。在“元素”标签中查看DOM时,这些类型的更改将可见。最重要的是, 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">