2

I need some JavaScript to find the default link color of a page. How do I do it? I looked around but not sure how to do it. I believe jQuery has a .css function I can use but how about regular JavaScript?

Please note I don't have any specific element to target to grab css from, i.e. I can't look for the a color value for #myID -- I need to find the default a color value for the links on the page.

Thanks!

user4951834
  • 681
  • 2
  • 11
  • 26
  • 1
    http://stackoverflow.com/q/20377835/438992 – Dave Newton Jun 07 '15 at 00:58
  • 1
    @DaveNewton Added an update. I don't have any specific element to target to grab css from, i.e. I can't look for the a color value for #myID -- I need to find the default a color value for the links on the page. – user4951834 Jun 07 '15 at 01:00
  • @user4951834 do you want to get the color from all links? – Downgoat Jun 07 '15 at 01:00
  • What if each link has a different color? How do you define the default one? – Oriol Jun 07 '15 at 01:02
  • @vihan1086 and Oriol Looking for the default color, if that is possible. If not, is it possible to determine the most used color, which presumably would mean it is the default one. – user4951834 Jun 07 '15 at 01:03

2 Answers2

1

Try: Just place an <a> at the top of your page. This will get the values from the first <a> element.

Without any pseudo elements

window.getComputedStyle(document.body.getElementsByTagName('a')[0], null).getPropertyValue("color");

active

window.getComputedStyle(document.body.getElementsByTagName('a')[0], ':active').getPropertyValue("color");

hover

window.getComputedStyle(document.body.getElementsByTagName('a')[0], ':hover').getPropertyValue("color");

If you have any fears, just go with:

var el = document.createElement('a'); // Creates <a>
document.body.appendChild(el);

var COLOR = window.getComputedStyle(el).getPropertyValue("color");

document.body.removeChild(el);
Downgoat
  • 13,771
  • 5
  • 46
  • 69
  • This will get the color of the first `a`. What if there is no `a`? What if the first `a` has a different color than all the others? – Oriol Jun 07 '15 at 01:05
  • So if I understand this correctly, this will get the color for the first a tag in the document, correct? Is there any way to determine if that is the "default" one? My only fear is this grabs an a tag from the header, which typically have different colors. Is it possible to grab the first a tag from the body? – user4951834 Jun 07 '15 at 01:05
  • @Oriol That's why I said to place an `` so it can extract values from that – Downgoat Jun 07 '15 at 01:05
  • @Oriol If there is no a, I can easily set a default color myself. However, your second concern is same as mine -- I think if we were to grab the first a from the body, that would work better. – user4951834 Jun 07 '15 at 01:06
  • The second argument of `getComputedStyle` should be a pseudo-element. It seems to ignore pseudo-classes. – Oriol Jun 07 '15 at 01:10
  • @user4951834 I've added an answer that should work 100% of the time – Downgoat Jun 07 '15 at 01:12
  • 1
    @user4951834 - vihan1086 The latest edition you did is my answer (*If you have any fears, just go with*) and it is incorrect. I can ensure that your edit does not work in reality. If you try running the latter solution, the result would be blank, since the element created must be added the document to have the default properties. Should use where appropriate `appendChild` after `createElement` on documentElement or document.body to work. My answer it should marked :( – Walter Chapilliquen - wZVanG Jun 07 '15 at 02:56
  • @wZVanG My original answer had that but after testing it didn't seem like that was needed. I might just roll back – Downgoat Jun 07 '15 at 02:57
1

You can create an element and add it to html, then get the CSS properties of the element that is assigned by default. Example:

var element = document.createElement('a');
document.documentElement.appendChild(element);
var color = getComputedStyle(element).color;
console.log(color) //rgb(0, 119, 204) stackoverflow default link color

Try this on StackOverflow page, opening the console.

Demo

Walter Chapilliquen - wZVanG
  • 12,010
  • 8
  • 40
  • 64