如何在CSS中将颜色设置为用户的链接颜色?

时间:2016-02-02 00:54:27

标签: javascript html css hyperlink

我希望有一个元素使用默认情况下浏览器用于未访问链接的相同颜色。我该怎么做?

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

此外,如果可能的话,它也应该在旧版浏览器中使用。 JavaScript是可能的。

3 个答案:

答案 0 :(得分:2)

你可以这样做:

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>

答案 1 :(得分:2)

如果我理解正确,currentColor之类的内容可以做到这一点,但在这种情况下你需要继承,所以我已经包裹了diva

  

currentColor关键字代表的计算值   元素的color属性。它允许制作颜色属性   由属性或子元素属性继承而不是   默认继承它。

     

它也可以用于继承计算值的属性   元素的color属性将等同于继承   这些元素的关键字,如果有的话。

&#13;
&#13;
#parent {
  color: red
}
a:link,.child {
  color: currentColor
}
&#13;
<div id="parent">
  <a href="#">This will be red</a>
  <div class="child">This will have the same color has the link</div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

两种简单的方法:

方法1:使用btn-group标记。在您使用<a>标记进行超链接时,只需使用<a>标记,但不要使用&#34; href&#34;。 <div>标记取决于您的计划。

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

方法2:使用css。

&#13;
&#13;
            .SameColor {
              color: #0000EE;
            }
&#13;
<div class="SameColor">This should have the same</div>
<a href="#">as this!</a>
&#13;
&#13;
&#13;