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
– Rakesh_Kumar, Commented May 11, 2015 at 8:52
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
– Blago Eres, Commented May 11, 2015 at 8:58

Mathew Thompson · Accepted Answer · 2015-05-11 09:08:10Z

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, 2015 at 9:08

answered May 11, 2015 at 8:56

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

N0xus Over a year ago

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

Mathew Thompson Over a year ago

@N0xus See my demo here: 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)

N0xus Over a year ago

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?

Mathew Thompson Over a year ago

@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.

dfsq · Accepted Answer · 2015-05-11 09:07:06Z

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

Bernie Chiu · Accepted Answer · 2015-05-11 08:57:43Z

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, 2015 at 8:57

Bernie Chiu

2632 silver badges12 bronze badges

1 Comment

Blago Eres Over a year ago

And I also guess that he must specify what browser he is testing in. :)

Joeytje50 · Accepted Answer · 2015-05-11 09:08:46Z

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];

Collectives™ on Stack Overflow

Getting HTML attribute value through raw Javascript

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related