2015-05-13 35 views
3

我有以下的HTML複選框通過javascript

<input name="1" title="" id="1" style="position: absolute; top: 333px; left: 760px; tabindex: 11; z-order: 99;" type="checkbox" CHECKED="checked" runat="server" value="on"/> 

我要搶給予tabindexstyle上述屬性裏面的值查找字符串的一部分。注意事項:

  1. 我知道tabindex是在錯誤的地方(它不應該是在style屬性的文本,它應該是對自己的一個屬性)。我無法改變它,它是由我無法修改的(非常古老的)工具完成的。

  2. 我必須支持IE8,並且當我嘗試時遇到了一個問題,IE8沒有正確處理正則表達式中的\s(它doesn't match hard spaces)。

我試圖用.search()這樣做,但我不知道如何返回字符串值時,我在尋找我的複選框與以下行:

var test = document.getElementsByTagName("input"); 

的目標是從style屬性中獲取tabindex的值,然後將其正確分配給

+0

你爲什麼要使用字符串操作(使用搜索,SUBSTR等),而不是在DOM中使用元素? – freefaller

+0

你沒有使用DOM的原因? –

+0

我不知道該怎麼做。選項卡索引設置在另一個位置,由於某種原因將其放置在「樣式」部分中。由於這不是有效的CSS,所以它被忽略。我需要採取這個價值,並將其放置在正確的HTML元素TabIndex – Sean

回答

9

更新答

回覆您的評論:

我知道這是在錯誤的地方,但我沒有手動移動它的方式。

好的,所以這就是爲什麼我們使用正則表達式,陷阱。

所以我們這裏有兩個任務:

  1. 獲取style屬性,它應該很容易,但愚蠢難以對IE8的文本。

  2. 從該文本中獲取tabindex的值。

首先,獲取樣式屬性的文本:不幸的是,默認情況下,IE8會顯示在可笑的,名不副實的「兼容性視圖」,「內網」的網站。 (也就是說:與舊的IE7及更早版本兼容,與標準不兼容)。而IE7和更早的版本有一個可怕的bug:element.getAttribute("style")給了你style對象,而不是style屬性文本;與element.style相同的對象。雖然他們在IE8中修正了這個問題,但在兼容性視圖中它已經被破壞了(「......兼容」)。

所以這個:

var text = element.getAttribute("style"): 

...會給我們任何像樣的瀏覽器串,並在IE8時不兼容視圖,但會給我們一個對象在兼容性視圖時。

所以要得到的文本,我們必須看別處。幸運的是,微軟是誰率先innerHTMLouterHTML的那些,所以我們可以這樣做:

var text = element.getAttribute("style"): 
if (typeof text !== "string") { 
    text = element.outerHTML; 
} 

這給了我們不僅僅是樣式的文本,當然,更多的,但它是足夠接近。我們還沒有嘗試parse HTML with regex(雖然我們與outerHTML推了一點,但它是上input等相當含量),我們正在尋找一個有限的字符串在有限的事情..

現在從文本我們需要的tabIndex值:這個表達式匹配tabIndex(不區分大小寫),其次是任何空白,然後:跟空格其次是一些數量的數字,這是我們捕捉:

/\btabindex\s*:\s*(\d+)/i 

我們就可以使用捕獲組從錯誤的位置獲取值並將其設置在正確的位置:

var element = document.getElementById("1"); 
var text = element.getAttribute("style"); 
if (typeof text !== "string") { 
    // Bad IE! Bad! 
    text = element.outerHTML; 
} 
var match = /\btabindex\s*:\s*(\d+)/i.exec(text); 
var index = match && match[1]; 
if (index) { 
    element.setAttribute("tabindex", index); 
} 
alert("Index: " + (index || "unknown")); 

活生生的例子:

var element = document.getElementById("1"); 
 
var text = element.getAttribute("style"); 
 
if (typeof text !== "string") { 
 
    // Bad IE! Bad! 
 
    text = element.outerHTML; 
 
} 
 
var match = /\btabindex\s*:\s*(\d+)/i.exec(text); 
 
var index = match && match[1]; 
 
if (index) { 
 
    element.setAttribute("tabindex", index); 
 
} 
 
alert("Index: " + (index || "unknown"));
<input name="1" title="" id="1" style="position: absolute; top: 333px; left: 760px; tabindex: 11; z-order: 99;" type="checkbox" CHECKED="checked" runat="server" value="on"/>

回覆您的評論:

不過,如果上面還是工作,如果我改變了第一線,document.getElementsByTagName("input");

當然,你只是做一個循環:

var list, index, element, text, match; 
list = document.getElementsByTagName("input"); 
for (index = 0; index < list.length; ++index) { 
    element = list[index]; 
    text = element.getAttribute("style"); 
    if (typeof text !== "string") { 
     // Bad IE! Bad! 
     text = element.outerHTML; 
    } 
    match = /\btabindex\s*:\s*(\d+)/i.exec(text); 
    tabindex = match && match[1]; 
    if (tabindex) { 
     element.setAttribute("tabindex", tabindex); 
    } 
} 

(我叫tabindex屬性tabindex那裏,因爲循環指標被頻繁調用index。)


原創回答

您的tabIndex是在錯誤的地方:它不是一個風格的屬性,它是一個獨立的屬性:

<input name="1" title="" id="1" tabindex="11" style="position: absolute; top: 333px; left: 760px; z-order: 99;" type="checkbox" CHECKED="checked" runat="server" value="on"/> 
<!-- Here ----------------------^              --> 

然後使用tabIndex反映屬性:

var index = document.getElementById("1").tabIndex; 

活生生的例子:

alert(document.getElementById("1").tabIndex);
<input name="1" title="" id="1" tabindex="11" style="position: absolute; top: 333px; left: 760px; z-order: 99;" type="checkbox" CHECKED="checked" runat="server" value="on"/>


備註:雖然在HTML中有效,但以數字開頭的值很難在CSS中使用;最好避免它們。

+0

@肖恩:你走了。適用於IE8,即使是內聯網站點。我很高興IE現在好多了。 :-) –

+0

謝謝。但是,如果我將第一行更改爲'document.getElementsByTagName(「input」);' – Sean

+0

@Sean:這將會返回給你一個列表。你必須遍歷整個列表(它有一個'length'屬性,並且像索引數組一樣從0開始,得到每個元素)。但是如果你爲每個元素做了這些,當然,它會起作用。 –

0

不要使用正則表達式解析HTML元素。見this question for some fun

如果您有您可以通過.getAttribute或CSS樣式情況下,使用例如.style.toptop屬性屬性訪問它的所有屬性的HTML元素。

您的情況的問題可能是您將tabindex屬性放置在style屬性中。據this page,你應該把它作爲一個單獨的屬性,這樣你就可以通過

document.getElementById("1").getAttribute("tabindex"); 
0

首先得到它之後,你應該使用的getElementById這是在複雜的場景中更合適。 如果你想訪問你的屬性的原始字符串值,你可以使用:

document.getElementById("1").getAttribute("style") 

,然後按照您的意願處理它