Getting HTML attribute value through raw Javascript

Question

I have a collection of input check boxes which look like the following:

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

What I'm trying to do is use Javascript to take the value found in tabindex as assign it to the proper HTML attribute of TabIndex I have the following Javascript trying to get the value within my CSS

var test = document.getElementsByTagName("input");
var style = window.getComputedStyle(test);
var value = style.getPropertyValue('tabindex');
console.log(value);

But when I run this in IE I get the following error:

Object doesn't support property or method 'getComputedStyle'

Can someone tell me what it is I'm doing wrong? Besides having TabIndex in my CSS which I already know is an issue.

`document.getElementsByTagName("input");` will return HTMLCollection..you should try with `var test=document.getElementsByTagName("input")[0];` — Rakesh_Kumar, May 11 '15 at 08:52
[This](http://stackoverflow.com/questions/15733365/cross-browser-ie8-getcomputedstyle-with-javascript) might help you. — Phoexo, May 11 '15 at 08:54
You can get `tabindex` **attribute** value like this for example - `document.body.tabindex`. You don't need to query computed styles and all that jazz. — Blago Eres, May 11 '15 at 08:58

Mathew Thompson · Answer 1 · 2015-05-11T09:08:10.970

4

tabindex isn't a CSS property, it's a HTML attribute. Take it out of the style attribute:

<input name="1" title="" id="3.6.1AudultSupportNoCheckBox" tabindex="11"
  style="..." type="checkbox" CHECKED="checked" runat="server" value="on"/>

Then do:

//Note the added [0] as the following returns an array
var test = document.getElementsByTagName("input")[0];

var tab = test.tabIndex;

DEMO

To elaborate why yours doesn't work:

Your main problem is the fact that you're not treating the results of getElementsByTagName as an array, so adding [0] works.

This will still return null for tabindex and that is purely because it's not valid CSS. That means the browsers won't apply it so the JavaScript won't be able to query it. You can only query valid CSS properties as shown in my demo HERE

edited May 11 '15 at 09:08

answered May 11 '15 at 08:56

Mathew Thompson

55,877
15
127
148

Thank you, but I know that already. And I did say in my question that it was a known issue. However, I'm not able to remove tab index from my CSS and I need to do it via Javascript – N0xus May 11 '15 at 09:04
@N0xus See my demo here: http://jsfiddle.net/hp9joj1c/1/ The reason that doesn't work is because `tabindex` isn't a valid CSS property so the browser doesn't apply it, therefore JavaScript doesn't return anything. The code in my demo (which is pretty much the same as yours) returns the correct display property (because display is valid CSS) – Mathew Thompson May 11 '15 at 09:06
So because TabIndex isn't a valid CSS property, there is no way I can grab the value stored in it and apply it to the proper HTML attribute through Javascript? – N0xus May 11 '15 at 09:08
@N0xus It can be queried, but not using `getComputedStyle`. You'd have to parse the style attribute as a string and perform a regex lookup to grab the value. – Mathew Thompson May 11 '15 at 09:09

score 0 · Answer 2 · answered May 11 '15 at 08:57

0

I guess the IE version you're using is too low?

Try this if you're using an older version of IE browser https://github.com/afarkas/html5shiv

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

answered May 11 '15 at 08:57

Bernie Chiu

263
1
11

And I also guess that he must specify what browser he is testing in. :) – Blago Eres May 11 '15 at 09:02

Joeytje50 · Answer 3 · 2015-05-11T09:08:46.217

The problem in this case is that you retrieve a list of elements by using document.getElementsByTagName, which doesn't support window.getComputedStyle. Instead, you should use something like this:

var test = document.getElementsByTagName("input");
var style = window.getComputedStyle(test[0]); //[0] selects the first match
var value = style.getPropertyValue('tabindex');
console.log(value);

This is the actual source of the current error. This won't work for styles that aren't supported by the browser though. Since tabindex is not a CSS style, but a HTML attribute (or an element property in JS), this won't give you the actual tabindex.

This code isn't going to get your desired result though, since the tabindex is not supposed to be in your CSS styles, but in your HTML attributes. To get this code to actually work completely, you need to define the tabindex as an attribute (tabindex="11") and use one of the following (which don't use .getComputedStyles at all):

var test = document.getElementsByTagName("input")[0];
//and then use either:
var tabindex = test.getAttribute('tabindex'); //this works to get any attribute
// or:
var tabindex = test.tabIndex; //this gets the computed tab index, regardless of its attributes

The .tabIndex method is probably what you want in this case, like @mattytommo explained.

In response to your comment "I'm not able to remove tab index from my CSS": you can use the following:

var test = document.getElementsByTagName("input")[0];

score 0 · Accepted Answer · answered May 11 '15 at 09:07

You would not be able to use getComputedStyle even if it was available in IE8. The reason is because tabindex is unknown CSS property so it's simply ignored. Similarly, in case of inline CSS styles you cannot access tabindex property via checkbox.style.tabindex, this will also fail.

The only working solution I can think of, that will work with your inline style attributes is this using simple regexp extraction:

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

for (var i = 0; i < test.length; i++) {
    
    var cssText = test[i].getAttribute('style'),
        tabindex = cssText.match(/tabindex\s*:\s*(\d+)/);
    
    if (tabindex) {
        test[i].setAttribute('tabindex', tabindex[1]);
    }
}

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

Getting HTML attribute value through raw Javascript

4 Answers4