Sir*_*ron 9 javascript jquery android google-chrome meta-tags
在Chrome中,您可以使用元标签设置标签的颜色
<meta name="theme-color" content="#FFA000">
在我的网站上,我有几个颜色编码的部分.为了让它看起来更好,我想根据当前打开的部分动态更改选项卡的颜色.我试过用jQuery做的:
$("meta[name='theme-color']").attr('content', '#455A64');
但它不起作用.如果有人能告诉我是否/如何在运行时更改此元值,我将非常高兴.
编辑:经过一些检查后,我注意到代码确实更改了元标记内容,但Chrome不会更新标签颜色.
小智 9
对于从 Google 登陆此页面的人，他们正在寻找普通的 JS 解决方案：
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');
您的 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>
我已在装有 Chrome 40.0.2214.89 和 Android 版本 5.1.1 的 Nexus 5 上对此进行了测试，并发现它有效。不过，还不知道如何看待这种类型的功能......：P
但并非所有的小提琴工具都允许您显示效果，因为我认为使用 iframe 可能会阻止您正确再现它。我发现 Plnkr 确实有效。访问这个演示 Plnkr显示了在上述设备上的效果。