JavaScript或jQuery的

更改Chrome標籤顏色在Chrome中，你可以設置標籤的顏色與元標籤JavaScript或jQuery的

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

在我的網站我有幾個部分顏色編碼。爲了使它看起來更好，我想根據當前打開的部分動態更改標籤的顏色。我曾試着用jQuery來做：

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

但它不起作用。如果有人能夠告訴我是否/如何在運行時改變這個元值，我會非常高興。

編輯：一些檢查，我發現後，該代碼確實改變了meta標籤的內容，但瀏覽器不更新的標籤顏色。

來源

2015-08-28 Sir_baaron

哇，以前沒有聽說過'主題color'（和我花了一秒鐘，實現你在說關於* Android * Chrome）。 – Jeroen

我已經在本地進行了測試，但是您發佈的代碼正如您期望的那樣工作。您需要添加更多詳細信息，以便我們可以重現您的問題。 – Jeroen

正如我試着用我的答案突出顯示的，發佈的代碼應該可以工作。鑑於你的編輯，你仍然無法得到效果。你能否檢查你的設備，如果我的答案中的plnkr鏈接適合你？如果確實如此，那麼可能會導致問題的某些特定於您的代碼/應用程序的內容。如果沒有，你可能需要包括你的設備的詳細信息和Chrome/Android的版本，我會再懷疑是罪魁禍首。 – Jeroen

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確實工作。訪問this demo Plnkr顯示對上述設備的影響。

來源

2015-08-28 11:37:29 Jeroen

好吧，事實證明，它並沒有在Chrome版本44.x我降級到39版本工作，現在的作品完美！ –

事實證明，它不與Android的Chrome版本43.x & 44.x.工作在其他版本中，上述所有代碼均可用。在45.x版本中，它甚至從一種顏色變爲另一種顏色，使它看起來非常酷！

來源

2015-09-05 20:10:28

對於這個誰從谷歌這個頁面上降落尋找香草JS的解決方案：

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

來源

2018-02-13 20:15:45 WyriHaximus

JavaScript或jQuery的

回答

相關問題