CODEWITHSUNDEEP
javascript
itagomo
itagomo

Reputation: 161

get the style property of document.activeElement.id

I would like to know the style property of the focused element. my code doesn't work:

alert(document.activeElement.id.style.border);

but it shows the id using this code:

alert(document.activeElement.id);

Any help? I prefer not to use jquery . I'm doing a project on IE 7 . and I know a lot of you thinks IE 7 is not a browser .

Upvotes: 0

Views: 1721

Answers (2)

David Thomas
David Thomas

Reputation: 253328

The id is a property of the relevant node, the style is also a property of the node, so replace id with style.border (the id has no properties of its own, except those properties inherent to strings, as it is, merely, a string) to give:

document.activeElement.style.border;

As it was written, you were trying to access the style property of the string, which is non-existent and therefore undefined.

To access the individual properties of the border:

document.activeElement.style.borderStyle;
document.activeElement.style.borderWidth;

And so on, to access the individual properties of individual borders (border-left, border-right etc):

document.activeElement.style.borderLeftWidth;
document.activeElement.style.borderLeftStyle;

And, again, so on...

To respond to the comment left by the OP (in another answer):

but why this code: alert(document.activeElement.style.borderColor); shows a blank alert?

The problem may be that the styles are defined in a stylesheet, whereas the style property only accesses those styles in the style attribute of an element. In contemporary browsers, you need to look at the window.getComputedStyle() to see the computed rendered output of the styling, for example:

window.getComputedStyle(document.activeElement, null).border;

Internet Explorer has the alternative (in some versions) of the currentStyle object, but without IE, or Windows, I'm unable to offer insight. There is a link in the references, below, that will take you to Microsoft's documentation.

References:

Upvotes: 2

joews
joews

Reputation: 30330

You need to look at element.style, not element.id.style. The element's ID does not have a style.

alert(document.activeElement.style.border);

Upvotes: 2

Related Questions