Grabbing CSS Value and Placing it as an HTML attribute

Question

What I'm trying to do grab the tabIndex from this line:

<input name="110" title="" id="test" style="position: absolute; top: 155px; left: 687px; tabindex: 3; z-order: 99;" type="checkbox" CHECKED="checked" runat="server" value="on"/>

And have it set as an HTML attribute via javascript.

How can I achieve this?

Ideally what I'm looking to see is this:

 <input name="110" title="" id="test" tabindex= "3" style="position: absolute; top: 155px; left: 687px; ; z-order: 99;" type="checkbox" CHECKED="checked" runat="server" value="on"/>

With access to jquery, you can use $("SELECTOR").attr("tabindex") = "desired index" — Callum.
– Callum., Commented May 5, 2015 at 14:35
You have some errors in your inline CSS: tabindex = 3 and z-order — Fabrizio Calderan
– Fabrizio Calderan, Commented May 5, 2015 at 14:37
The above was taking from a page with a tonne of check boxes in it. But I'll look into the z-order thing. — Sean
– Sean, Commented May 5, 2015 at 14:39

ozil · Accepted Answer · 2015-05-05 14:43:58Z

0

tabIndex is not a style property it should be out side style attribute.

To get tabIndex

var x = document.getElementById("test").tabIndex;

To Set tabIndex

document.getElementById("link3").tabIndex = 6;

answered May 5, 2015 at 14:43

ozil

7,1639 gold badges38 silver badges62 bronze badges

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

Comments

Domino · Accepted Answer · 2015-05-05 14:54:10Z

0

While I have no idea why you would have a tabindex set in the style, which isn't legal syntax, you can get it through a regex.

var elem = document.getElementById("myInput");
var match = elem.getAttribute("style").match(/tabsize\s*:\s*(\d+)/);
if(match) {
    elem.setAttribute("tabindex", match[1]);
}

Working demo: http://jsfiddle.net/0syvw3Lo/1/ Note that this only works if that was set inline, not with a CSS sheet.

edited May 5, 2015 at 14:54

answered May 5, 2015 at 14:48

Domino

6,8781 gold badge37 silver badges61 bronze badges

2 Comments

Sean Over a year ago

The above code is generated in a really convoluted way and this is the issue I'm trying to fix. I'd thought moving the css out of the style part and into a new attribute would easy.

Domino Over a year ago

@Sean Well what we're saying is that tabindex isn't CSS at all. It's an error to have it in the style attribute in the first place. That's why it's hard to retrieve it.

Collectives™ on Stack Overflow

Grabbing CSS Value and Placing it as an HTML attribute

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related