使用JavaScript或jQuery更改Chrome标签颜色

2018-06-09 12:58:49

在Chrome中，您可以使用元标签设置选项卡的颜色

<meta name="theme-color" content="#FFA000">

在我的网站上，我有几个部分用颜色编码。为了使它看起来更好，我想根据当前打开的部分动态更改标签的颜色。我试着用jQuery来做这件事：

$("meta[name='theme-color']").attr('content', '#455A64');

但它不起作用。如果有人能够告诉我是否/如何在运行时改变这个元值，我会非常高兴。

编辑：在我注意到一些检查后，代码确实会更改元标记内容，但Chrome不更新标签颜色。

你的jQuery代码是正确的。如果您想闪烁标题栏并关闭用户，请尝试以下操作：

<!DOCTYPE html>
<html>
<head>
    <title>Unicorns!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
    <meta name="theme-color" content="#FF0000">    
</head>
<body>
    <h1>Unicorns are <b id="x">#FF0000</b></h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function() {
            var i = 0;
            var colors = ["#FF0000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF"];
            setInterval(function() {
                var color = colors[i = i++ > 4 ? 0 : i];
                $("meta[name='theme-color']").attr('content', color);
                $("#x").text(color);
            }, 500);
        });
    </script>
</body>
</html>

我已经在我的Nexus 5上使用Chrome 40.0.2214.89和Android版本5.1.1测试了这个功能，并发现它可以正常工作。不知道该怎么考虑这种类型的功能，尽管...：P

不是所有的小提琴工具都可以让你显示效果，因为我认为使用iframe可能会阻止你正确地再现它。我发现Plnkr确实工作。参观这个演示Plnkr显示了对上述设备的影响。

事实证明，它不适用于Android Chrome 43.x和44.x版本。在其他版本中，上述所有代码均可用。在45.x版本中，它甚至从一种颜色变为另一种颜色，使它看起来非常酷！

对于这位来自谷歌寻找香草JS解决方案的人：

document.querySelector('meta[name="theme-color"]').setAttribute('content',  '#123456');

链接地址: http://www.djcxy.com/p/28587.html

上一篇: Change Chrome tab color with JavaScript or jQuery

下一篇: clojure + clojurescript project structure best practices