Question

我有以下HTML复选框

<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"/>

我想获取上面tabindex属性中style给出的值。注意事项：

我知道tabindex位于错误的位置（它不应该在style属性文本中，它应该是一个属性本身）。我不能改变它，它是由一个我无法修改的（非常古老的）工具完成的。
我必须支持IE8，当我尝试时，我遇到了一个问题，IE8没有正确处理正则表达式中的\s（doesn't match hard spaces）。

我尝试使用.search()执行此操作但我不知道在使用以下行搜索我的复选框时如何返回字符串值：

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

目标是从tabindex属性中获取style的值，然后将其分配给元素正确。

Answer 1

更新了答案：

重新评论：

我知道它在错误的地方，但我无法手动移动它。

好的，这就是为什么我们使用正则表达式，陷入困境。

所以我们在这里有两个任务：

获取style属性的文本，这应该很简单但在IE8上很难实现。
从该文字中获取tabindex的值。

首先，获取样式属性文本：不幸的是，默认情况下IE8将显示＆＃34; intranet＆＃34;网站处于荒谬错误的＆＃34;兼容性视图＆＃34;。（即：与旧的IE7及更早版本兼容，与标准不兼容。）IE7及更早版本有一个可怕的错误：element.getAttribute("style")为您提供了style对象，而不是样式属性文本;与element.style相同的对象。尽管他们在IE8中解决了这个问题，但在兼容性视图中，它已被破坏（要......＆＃34;兼容＆＃34;）。

所以这个：

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

...会在任何不错的浏览器上给我们一个字符串，而在IE8上不在兼容性视图中，但在兼容性视图中会给我们一个对象。

因此，要获得文本，我们必须在其他地方寻找。幸运的是，微软是开创innerHTML和outerHTML的人，所以我们可以这样做：

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"));

直播示例：

＆＃13;

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"));

＆＃13;

<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"/>

＆＃13;

重新评论：

但如果我将第一行更改为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;

直播示例：

＆＃13;

alert(document.getElementById("1").tabIndex);

＆＃13;

<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"/>

＆＃13;

旁注：在HTML中有效时，以数字开头的id值很难在CSS中使用;最好避免它们。

Answer 2

永远不要通过正则表达式解析HTML元素。请参阅this question for some fun。

如果您有HTML元素，则可以通过.getAttribute访问所有属性，如果使用CSS样式属性，则使用.style.top top属性

您的案例中的问题可能是您将tabindex属性放在style属性中。根据{{3}}，您应该将其设置为单独的属性，以便之后可以通过

获取它

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

Answer 3

首先，您应该使用更适合复杂场景的getElementById。如果要访问属性的原始字符串值，可以使用：

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

然后根据需要处理它（使用search，substr等）

通过javascript查找字符串的一部分

3 个答案: