2

I would like to have a an element use the same color the browser uses for unvisited links by default. How would I do that?

<div style="color:???">This should have the same color</div>
<a href=".">as this!</a>

Furthermore, it should work in older browsers, too, if possible. JavaScript is possible.

dippas
  • 58,591
  • 15
  • 114
  • 126
mafu
  • 31,798
  • 42
  • 154
  • 247

3 Answers3

2

You may do it like this: 

var colored = document.getElementsByClassName('colored')[0];
style = window.getComputedStyle( document.querySelector( '.links' ), ':link'),
color = style.getPropertyValue('color');
colored.style.color = color;
a:link{
  color: #FF5656;
}
<div class="colored" style="color:???">This should have the same color</div>
<a class="links" href="">as this!</a>
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
2

If I understood correctly, something like currentColor can do this, but in this case you need inheritance, so I've wrapped the div and a

The currentColor keyword represents the calculated value of the element's color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.

It can also be used on properties that inherit the calculated value of the element's color property and will be equivalent to the inherit keyword on these elements, if any.

Snippet

#parent {
  color: red
}
a:link,.child {
  color: currentColor
}
<div id="parent">
  <a href="#">This will be red</a>
  <div class="child">This will have the same color has the link</div>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • That's inheriting the explicitly specified colour of the *body* (which you've happened to make the same as the link), it isn't using the *default* colour of the link. – Quentin Feb 02 '16 at 01:09
  • yup I am aware that `currentColor` doesn't work with siblings only with parents/childs, but using `body` here was just a demo, I could've wrap this and give the red color to that parent. this is just a CSS solution only if OP wants. – dippas Feb 02 '16 at 01:15
  • I've updated my answer, I guess now makes a little more sense. – dippas Feb 02 '16 at 01:20
  • Pardon my ignorance, would this also work if you did not set the color of the parent node? – mafu Feb 02 '16 at 01:26
  • @mafu `currentColor` needs to be inherited therefore a parent in my snippet above. you can see some examples [here](https://css-tricks.com/currentcolor/) – dippas Feb 02 '16 at 01:29
0

Two simple methods:

Method 1: using <a> tag. Just use the <a> tag as you use it for hyperlinks but without "href". <div> tag depends upon your program.

<div><a>This should have the same color</a><div>
<a href="#">as this!</a>

Method 2: using css. 

            .SameColor {
              color: #0000EE;
            }
<div class="SameColor">This should have the same</div>
<a href="#">as this!</a>
Ching Chong
  • 165
  • 10
Harsha
  • 1
  • 2
  • 2
    Method 1 won't work. Browsers do not give the same default styling to an anchor which isn't any kind of link as they do to one which is is an unvisited link. – Quentin Feb 02 '16 at 08:44
  • 2
    Method 2 won't work. You are hard coding the colour instead of using whatever the browser is set to use by default for unvisited links. – Quentin Feb 02 '16 at 08:45