HTML中不支持靜態(tài)Expando的元素的問(wèn)題
更新時(shí)間:2007年03月08日 00:00:00 作者:
在使用腳本統(tǒng)一處理一批頁(yè)面的時(shí)候,我希望通過(guò)被處理頁(yè)面的TITLE元素取到文檔的標(biāo)題和我自定義的一些屬性。這些附加的屬性是我在服務(wù)器端通過(guò)Attributes集合添加的,可是運(yùn)行的結(jié)果和我的期望老是相去甚遠(yuǎn),怎么我在TITLE元素里寫(xiě)入的自定義屬性老是空值呢?
客服端和服務(wù)器端代碼分別是:
ASPX:
<title id="title" runat="server">Query Info</title>
C#: protected HtmlGenericControl title;
private void Page_Load(object sender, System.EventArgs e)
{
// ...
title.InnerHtml = "查詢(xún)信息";
title.Attributes["icon"] = "QueryInfo.gif;
}
HTML:
<title id="title" icon="QueryInfo.gif">查詢(xún)信息</title>
JavaScript:
var iconPath = docucment.all.tags('TITLE')[0].icon;
if ( iconPath )
{
var img = document.createElement('IMG');
img.src = iconPath;
// ...
}
結(jié)果就是總出不來(lái)我希望的那個(gè)icon,跟蹤JavaScript代碼,發(fā)現(xiàn)iconPath總是undefined。在看看HTML代碼,里面明明有icon="QueryInfo.gif"這個(gè)屬性值對(duì)。于是從title對(duì)象中去查看outerHTML,outerHTML居然是:<title id="title">查詢(xún)信息</title>。根本沒(méi)有icon那個(gè)屬性,難怪JavaScript取到的iconPath總是undefined的說(shuō)。
仔細(xì)查下去,發(fā)現(xiàn)原來(lái)是html元素在處理expando屬性上有區(qū)別。我們給html元素添加expando屬性有兩種方式,一是我們常用的動(dòng)態(tài)方式;就是使用腳本來(lái)給html元素添加expando屬性。二是使用靜態(tài)方式;即在html代碼中以literal方式添加expando屬性。分別舉例如下:
動(dòng)態(tài)添加expando屬性: <span id=mySpan>this is a span element.</span>
<script language=javascript>
mySpan.myAttri = 'attribute';
</script>
靜態(tài)添加expando屬性: <span id=mySpan myAttri=attribute>this is a span element.</span>
本來(lái)這兩種寫(xiě)法基本是沒(méi)有什么區(qū)別的,可是元素title卻只支持動(dòng)態(tài)添加expando屬性,而不支持靜態(tài)添加expando屬性,這也就是為什么我開(kāi)始會(huì)出錯(cuò)誤的原因。那么還有那些html elements和title一樣不支持靜態(tài)添加expando屬性呢?在108個(gè)html elements中,以下10個(gè)元素都不支持靜態(tài)添加expando屬性:
HTML, HEAD, TITLE, BODY, BASEFONT, FORM, HR, HR, TBODY, SCRIPT
不過(guò)動(dòng)態(tài)添加expando屬性,是所有的html elements和dhtml objects都支持的。
客服端和服務(wù)器端代碼分別是:
ASPX:
<title id="title" runat="server">Query Info</title>
C#: protected HtmlGenericControl title;
private void Page_Load(object sender, System.EventArgs e)
{
// ...
title.InnerHtml = "查詢(xún)信息";
title.Attributes["icon"] = "QueryInfo.gif;
}
HTML:
<title id="title" icon="QueryInfo.gif">查詢(xún)信息</title>
JavaScript:
var iconPath = docucment.all.tags('TITLE')[0].icon;
if ( iconPath )
{
var img = document.createElement('IMG');
img.src = iconPath;
// ...
}
結(jié)果就是總出不來(lái)我希望的那個(gè)icon,跟蹤JavaScript代碼,發(fā)現(xiàn)iconPath總是undefined。在看看HTML代碼,里面明明有icon="QueryInfo.gif"這個(gè)屬性值對(duì)。于是從title對(duì)象中去查看outerHTML,outerHTML居然是:<title id="title">查詢(xún)信息</title>。根本沒(méi)有icon那個(gè)屬性,難怪JavaScript取到的iconPath總是undefined的說(shuō)。
仔細(xì)查下去,發(fā)現(xiàn)原來(lái)是html元素在處理expando屬性上有區(qū)別。我們給html元素添加expando屬性有兩種方式,一是我們常用的動(dòng)態(tài)方式;就是使用腳本來(lái)給html元素添加expando屬性。二是使用靜態(tài)方式;即在html代碼中以literal方式添加expando屬性。分別舉例如下:
動(dòng)態(tài)添加expando屬性: <span id=mySpan>this is a span element.</span>
<script language=javascript>
mySpan.myAttri = 'attribute';
</script>
靜態(tài)添加expando屬性: <span id=mySpan myAttri=attribute>this is a span element.</span>
本來(lái)這兩種寫(xiě)法基本是沒(méi)有什么區(qū)別的,可是元素title卻只支持動(dòng)態(tài)添加expando屬性,而不支持靜態(tài)添加expando屬性,這也就是為什么我開(kāi)始會(huì)出錯(cuò)誤的原因。那么還有那些html elements和title一樣不支持靜態(tài)添加expando屬性呢?在108個(gè)html elements中,以下10個(gè)元素都不支持靜態(tài)添加expando屬性:
HTML, HEAD, TITLE, BODY, BASEFONT, FORM, HR, HR, TBODY, SCRIPT
不過(guò)動(dòng)態(tài)添加expando屬性,是所有的html elements和dhtml objects都支持的。
相關(guān)文章
JavaScript算法系列之快速排序(Quicksort)算法實(shí)例詳解
這篇文章主要介紹了JavaScript算法系列之快速排序(Quicksort)算法實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
淺談javascript中字符串String與數(shù)組Array
這篇文章主要介紹了淺談javascript中字符串String與數(shù)組Array,需要的朋友可以參考下2014-12-12
JS中JSON對(duì)象和String之間的互轉(zhuǎn)及處理技巧
JSON:JavaScript 對(duì)象表示法(JavaScript Object Notation),其實(shí)JSON就是一個(gè)JavaScript的對(duì)象(Object)而已。接下來(lái)通過(guò)本文給大家介紹JS中JSON對(duì)象和String之間的互轉(zhuǎn)及處理技巧,需要的朋友一起學(xué)習(xí)吧2016-04-04
js時(shí)間轉(zhuǎn)換毫秒的實(shí)例代碼
在本篇文章里小編給大家整理的是關(guān)于js時(shí)間轉(zhuǎn)換毫秒的實(shí)例代碼以及相關(guān)知識(shí)點(diǎn),需要的朋友們可以學(xué)習(xí)下。2019-08-08
JavaScript調(diào)試技巧之console.log()詳解
對(duì)于JavaScript程序的調(diào)試,相比于alert(),使用console.log()是一種更好的方式,原因在于:alert()函數(shù)會(huì)阻斷JavaScript程序的執(zhí)行,從而造成副作用;而console.log()僅在控制臺(tái)中打印相關(guān)信息,因此不會(huì)造成類(lèi)似的顧慮2014-03-03

