Document.alinkColor is a deprecated instance property that gets or sets the color of an active link—the brief state between mousedown and mouseup. Learn what it controls, how it relates to legacy linkColor / vlinkColor, the modern :active CSS replacement, and five examples with try-it labs.
Instance property
string color
Deprecated
Active link
CSS :active
link / vlink
Early HTML pages often set global link colors with JavaScript or the obsolete <body alink="..."> attribute. The Document object exposed matching properties: linkColor (unvisited), vlinkColor (visited), and alinkColor (active while pressed).
An active link is not a “currently focused” link—it is the moment the user holds the mouse button down on a hyperlink, between mousedown and mouseup.
Study alinkColor so you can recognize legacy scripts and old tutorials. For new pages, style links with CSS pseudo-classes: :link, :visited, :hover, and :active.
Related Document tutorials: adoptedStyleSheets, activeElement, Document constructor.
Document.alinkColorA getter/setter instance property on Document. Reading it returns the active-link color string; writing it changes the color applied to active links in the document body.
blue, darkorange) or hex (#0066CC).mousedown and mouseup on a link.null — assigning null converts to "" (empty string).#ee0000) in Mozilla Firefox.:active instead.document.alinkColorconsole.log(document.alinkColor);
// e.g. "#ee0000" in Firefox (browser-dependent)document.alinkColor = "#0066CC";
document.alinkColor = "darkorange";
document.alinkColor = null; // becomes ""| Goal | Code / note |
|---|---|
| Read active color | document.alinkColor |
| Set hex | document.alinkColor = "#0066CC" |
| Set name | document.alinkColor = "darkorange" |
| Clear (legacy) | document.alinkColor = null → "" |
| Modern replacement | a:active { color: ... } |
| MDN status | Deprecated |
Four facts about document.alinkColor.
stringColor value
mouse downOn a link
deprecatedLegacy API
:activeModern fix
alinkColor vs a:activedocument.alinkColor | a:active { color: ... } | |
|---|---|---|
| Scope | Document-wide legacy hook | Per-stylesheet CSS rule |
| Recommended? | No | Yes |
| MDN status | Deprecated | Standard CSS |
| Best for | Reading old code | All new styling |
Examples follow MDN Document: alinkColor. Press and hold a link in try-it labs to see the active color where the property still applies.
Read and set the deprecated active-link color.
document.alinkColorLog the current active-link color (browser-dependent).
console.log(document.alinkColor);
// Firefox default (MDN): "#ee0000"
// Other browsers may differ or ignore the property in practiceThe returned string may be a hex code or color name depending on how the browser stores it.
Assign a hex value, then press-and-hold a link to preview the active state.
document.alinkColor = "#0066CC";
console.log(document.alinkColor);
// Hold mouse down on a link to see active color (where supported)Legacy property affects document-level active links, not individual elements via modern APIs.
Other assignment forms and the recommended replacement.
MDN accepts named colors such as darkorange.
document.alinkColor = "darkorange";
console.log(document.alinkColor);Named colors are valid legacy inputs; browsers may normalize them when read back.
null Becomes Empty StringMDN: assigning null is equivalent to assigning "".
document.alinkColor = null;
console.log(document.alinkColor === "");
console.log(JSON.stringify(document.alinkColor));This null coercion is a Document property quirk—not something to rely on in new CSS-based styling.
a:activeMDN’s recommended approach—style active links in CSS.
a:link { color: #2563eb; }
a:visited { color: #7c3aed; }
a:active { color: #dc2626; }CSS gives per-site control, theming, and media queries—without deprecated Document color properties.
:focus styles for keyboard users.mousedown starts the active link state.
document.alinkColor (where supported) tints the link.
mouseup ends active; visited/unvisited styles return.
:activeDefine active (and :focus) styles in stylesheets for new projects.
alinkColor is deprecated in the HTML specification (MDN).:focus styles; active is mouse-down on a link.#ee0000 per MDN; other engines may differ.linkColor, vlinkColor, fgColor, bgColor.Document.alinkColor is deprecated but may still exist for compatibility in some browsers. MDN recommends CSS :active instead. Logos use the shared browser-image-sprite.png sprite from this project.
Legacy active-link color getter/setter — use CSS :active in new code.
Bottom line: Recognize alinkColor in old scripts. For new styling, use a:link, a:visited, a:hover, and a:active in CSS — never document.alinkColor.
Document.alinkColor is a deprecated way to control the color of links while the mouse button is held down. It is useful for understanding legacy pages and migrating them to CSS—not for new features.
Continue with all, ownerDocument, adoptedStyleSheets, Document constructor, or the JavaScript hub.
:link, :visited, :hover, :active:focus styles for keyboard usersalinkColor when updating legacy filesdocument.alinkColor in new production codealinkColor for accessibility contrastalinkColorDeprecated active-link color — prefer CSS :active.
string color
APIdeprecated
Legacymousedown
Statea:active
CSSbecomes ""
QuirkOld HTML used <body link="" vlink="" alink=""> attributes for the same three link colors. JavaScript document.linkColor, vlinkColor, and alinkColor mirrored those attributes—all superseded today by CSS pseudo-classes.
Learn the deprecated HTMLAllCollection behind document.all.
6 people found this page helpful