当前位置：首页 -> 网页设计 -> HTML/CSS -> Dhtml 属性编程之原创笔记

Dhtml 属性编程之原创笔记

时间： 2021-07-31 作者：daque

一、属性遏制属性是用来标识一个东西或是一组东西的状况，比方radio的checked表白的是暂时单选按钮能否被选中。即使咱们选中一个单选按钮时想表露一个文本框，即 “中选中单选按钮时表露文本框”,但大普遍情景下咱们并不是如许处置，更多的是经过：事变(onclick, onkeydown,…) ---> 确定暂时状况(checked能否为true) ---> 挪用相映的function(表露或湮没文本框)如许的处置本领特殊被迫，咱们要为每一个事变加上沟通的代码来实行最后的手段，很有大概的是在coding进程中的忽视的某些事变(比方onkeypress, onkeydown等)，而且步调的扩充性不强。对于一个属性，更加是状况属性来说，它该当起到的是一个吩咐的效率，就像是ceo报告你此刻要去做什么，但这件事怎样去做，用什么本领去做，这该当由你本人去确定。所以，对于属性的操纵该当尽管是遏制器：事变或其它function ---> 树立属性处置器：属性变换时 ---> 调用途理器(确定属性的状况，做出相映的处置)经过属性为分界限，咱们把它分为了遏制和处置两个局部，如许在所有属性处置过程中精巧性会减少很多。那咱们该当怎样来实行如许的办法呢？１． onpropertychange<html><head><script language="javascript">function changebox(status){textbox.style.display = status ? "" : "none"}</script><script language="javascript" for="test" event="onpropertychange">var propname = event.propertynamevar propvalue = this[propname]switch(propname){case "checked":changebox(propvalue)break;}</script></head><body><input type="radio" id="test" name="radio" checked="true" /><input type="radio" name="radio" /><input id="textbox" /></body></html> [ctrl+a 十足采用提醒：你可先窜改局部代码，再按运转]２． htc在htc中实行很简单，microsoft仍旧做好了相映的接口，径直运用property元素的get和put本领就行了。３．自设置咱们须要做一个属性遏制器就能做到这一点，如：function controlattribute(东西，属性，树立的值){东西.属性 = 树立的值挪用东西.绑定在属性变革事变的因变量(属性)}一切的属性树立经过属性遏制器去实行，如许就能做到和onpropertychange或是htc一律的功效了。二、限制属性在某些功夫大概几个元素同声只运用一个属性，比方select中的option，在大普遍情景中她们只大概有一个selected为true，其他的都为flase，那么咱们不妨把它看做在这一组的option中惟有一个selected，在html代码中咱们也是如许表白的。以是就须要一个在限制地区运用的属性来标识，它就像是一个令牌一律不妨在各别的元素这间挪动，这就保证了属性的独一性，而且假如想变换属性的状况时，你不需要商量这个属性在哪一个元素上，径直变换属性的状况。底下咱们看一下例子，因为ie6的在dom扶助上的不完备，以是写这个步调进程中有少许附加的代码，如要经过一个全部的tr变量记载属性地方的东西称呼(dom中不妨经过属性.parentnode 获得)等<script>function findparentobj(obj, strtagname, strid){ while ( obj && !(!strtagname obj.tagname == strtagname) && (!strid obj.id == strid) ) obj = obj.parentelement return obj}var otrbgcolorover = document.createattribute("bgcolor")bgcolorover.nodevalue = "red"bgcolorout = document.createattribute("bgcolor")bgcolorout.nodevalue = "transparent"function highlight(obj) { if (otr) { otr.removeattributenode(bgcolorover) otr.setattributenode(bgcolorout) otr.removeattributenode(bgcolorout) } otr = findparentobj(event.srcelement, "tr") if (otr) otr.setattributenode(bgcolorover)}</script><table border="1" bgcolor="#ffffff" onclick="highlight(this)" onmouseover="highlight(this)"><tr> <td>序</td> <td>单元源代码</td> <td>单元称呼</td></tr><tr> <td><input type=text value=01></td> <td><input type=text value=dw001></td> <td><input type=text value=微软公司></td></tr> <tr> <td><input type=text value=02></td> <td><input type=text value=dw002></td> <td><input type=text value=英特公司></td></tr> <tr> <td><input type=text value=03></td> <td><input type=text value=dw003></td> <td><input type=text value=华夏公司></td></tr> </table> [ctrl+a 十足采用提醒：你可先窜改局部代码，再按运转]

Dhtml 属性编程之原创笔记

相关推荐

推荐下载

热门阅览

最新排行