javascript - 使用 Javascript 以编程方式访问 HTML 属性

Question

我正在使用自定义 TimeSelector，我将其放置在 HTML 页面上，如下所示:

   <MKB:TimeSelector DisplaySeconds="false" ID="endTimeSelector" runat="server" Visible="True" Date="5:30 PM" />

在 Javascript 函数中，我想更新 Date 属性。我已经尝试过这些(它们不起作用):

   var sel = document.getElementById("endTimeSelector");
   sel.Date="6:30 PM";
   sel.setAttribute("Date","6:30 PM");

由于这是一个自定义选择器，我不希望得到特定于此组件的答案。我想我只是问是否有从 Javascript 更新 HTML 属性的通用解决方案(无需先访问服务器)。

编辑:好的，所以它不起作用的原因是由于 ASP 而不是真实 ID。事实上，这是真正的 HTML:

<span id="endTimeSelector"><table CellSpacing="0" CellPadding="0" style="border-collapse:collapse;border-style:None;border-width:0px;">
                <tr>
                    <td style="vertical-align:Bottom;"><input id="endTimeSelector_txtHour" name="endTimeSelector" onclick="this.select();lastFocusCtrl=this;" onchange="intOnly(this,12);" onFocus="this.select();lastFocusCtrl=this;" onKeyDown="return updownArrow(event, this,12,15,1);" cols="2" maxlength="2" value="05" style="height:15px;border-bottom:solid 1px Silver;border-left:solid 1px Silver;border-top:solid 1px Silver;background-color:;border-right:none;width:17px;font-size:9pt;" /><input readonly="readonly" cols="1" maxlength="1" value=":" onclick="this.nextSibling.focus();//this.blur();return false;" onfocus="this.nextSibling.focus();//blur();return false;" style="height:15px;border-bottom:solid 1px Silver;border-left:none;border-right:none;border-top:solid 1px Silver;background-color:;font-size:9pt;width:4px;" /><input id="endTimeSelector_txtMinute" name="endTimeSelector_txtMinute" onclick="this.select();lastFocusCtrl=this;" onchange="intOnly(this,12);" onFocus="this.select();lastFocusCtrl=this;" onKeyDown="return updownArrow(event, this,12,15,1);" cols="2" maxlength="2" value="30" style="height:15px;border-bottom:solid 1px Silver;border-left:none;border-top:solid 1px Silver;background-color:;border-right:none;width:17px;font-size:9pt;" /><input id="endTimeSelector_txtAmPm" name="endTimeSelector_txtAmPm" readonly="readonly" onclick="this.select();lastFocusCtrl=this;" onchange="keepAmPm();" onFocus="this.select();lastFocusCtrl=this;" onKeyDown="return updownArrow(event, this,12,15,1);" cols="2" maxlength="2" value="PM" style="height:15px;border-bottom:solid 1px Silver;border-left:none;border-right:solid 1px Silver;border-top:solid 1px Silver;background-color:;width:22px;font-size:9pt;" /></td><td><img id="endTimeSelector_imgUp" onclick="addTime(this,12,15,1);" src="/WebResource.axd?d=tiVFNiu7HJgIVjO35sllj-s8Z6xcGnuxvWjcv0djLK_ZmlnEvSWKeuPozcoAJ1jdWjt3Em28mdAuVmJ3sjSDr9LkBqj6QzQZ5DI3R2uqFhoN8cDn0&amp;t=634103086365158927" onMouseOver="this.src='/WebResource.axd?d=Qwp1CEy_uAYBRj85nDAQgbZhe_gPeEn6uH400SE9Ka9Ba6-0jO725XcMqD-0COZumHZlpEmorXnDALAg08OiLidM1LQwMWqOZjS8k7tAw7ECNag4Bf2m7vLYgXi_qGcGiYyX_A2&amp;t=634103086365158927';" onMouseOut="this.src='/WebResource.axd?d=tiVFNiu7HJgIVjO35sllj-s8Z6xcGnuxvWjcv0djLK_ZmlnEvSWKeuPozcoAJ1jdWjt3Em28mdAuVmJ3sjSDr9LkBqj6QzQZ5DI3R2uqFhoN8cDn0&amp;t=634103086365158927';" style="cursor:pointer;" /><br /><img id="endTimeSelector_imgDown" onclick="subtractTime(this,12,15,1);" src="/WebResource.axd?d=RVSDbruLRZ0XghTuQh3hchhyT2e1a6SFSCXTFMsJE6ux0Q-eu595sEnqVZjLRVJIk8d1eraE2M2gVUNfg53pgpfVC5Zpok9BfW7SZbqS5Cw5--R20&amp;t=634103086365158927" onMouseOver="this.src='/WebResource.axd?d=AKuxDQkfX9IrXbNQV4GNdTNCDKooNjlZXtJpRgDvjUm7-6FL0ZGTizlx50cTntULqw3ZuEaV7CYV4hWPZa9ZdVWCsPfPrSyKMGJNDRWsBYHpdYUH1HrLPbbaesYkf-cDXlZ_-w2&amp;t=634103086365158927';" onMouseOut="this.src='/WebResource.axd?d=RVSDbruLRZ0XghTuQh3hchhyT2e1a6SFSCXTFMsJE6ux0Q-eu595sEnqVZjLRVJIk8d1eraE2M2gVUNfg53pgpfVC5Zpok9BfW7SZbqS5Cw5--R20&amp;t=634103086365158927';" style="cursor:pointer;" /></td>

                </tr>
            </table></span>

哎呀，太丑了。不再有任何名为“日期”的属性。

编辑 2:这是否意味着无法直接更新日期属性？

如果我将 Date 设置为某个变量的值并更新该变量会怎样？

Answer 1

检查 Control.ClientID属性(property)。

这一行:

var sel = document.getElementById("endTimeSelector");

需要:

var sel = document.getElementById("<%= endTimeSelector.ClientID %>");

这是一个典型的错误，因为您所拥有的不是 HTML，它只是 ASP.NET 转换为 HTML 所依据的一种语法，并且在执行此操作时更改了控件 ID。通过在浏览器中查看源代码来检查 HTML - 我想您会发现它与您编写的有很大不同!