平常接触 Disqus 比较多的朋友不难发现，Disqus 原生评论列表的链接颜色，似乎是直接采用所应用页面的主链接颜色，也就是出现次数最多的链接颜色。

那么，怎样获取到页面的主链接颜色呢？思路是遍历所有的 <a> 标签，并获取到相应的颜色值，存起来再比较，以找出出现次数最多的那个颜色值。

获取 CSS 属性值，采用 window 的 getComputedStyle 方法[1]没跑。因实现起来不麻烦，就不多话，具体代码可如下：

function getColor(){
    var links = document.getElementsByTagName('a');
    var colors = {};
    var max = 0;
    var linkColor;
    for (var i = 0; i < links.length; i++) {
        var color = getComputedStyle(links[i]).color;
        colors[color] = (colors[color] || 0) + 1;
    }
    for (var color in colors) {
        var count = colors[color];
        if (count > max) {
            max = count;
            linkColor = color;
        }
    }
    return linkColor || rgb(46, 159, 255);
}

经 @xcatliu 提醒，Disqus 使用的不是出现次数最多的颜色值，而是 id 为 disqus_thread 中的 a 标签继承的颜色值，也就是说，若想改变 Disqus 评论框的链接颜色，只需用 CSS 指定一下就可以了，如：

#disqus_thread a{
    color: #ff0;
}

关于 Disqus 是怎么获取到颜色值，又是怎么传到 iframe 里的， @xcatliu 解释得很清楚，就不再废话。

参考资料

本文历史

  • 2017 年 10 月 05 日 完成初稿
  • 2017 年 10 月 14 日 完善