All Products
Search
Document Center

Set title bar color

Last Updated: Feb 10, 2021

This interface is used to set the color of TitleBar.

Use setTitleColor interface

 
  1. AlipayJSBridge.call("setTitleColor", {
  2. color: 16775138,
  3. reset: false // (Optional, false by default) Whether or not to reset the title color to the default one.
  4. });

Code sample

 
  1. <div style="padding-top:80px;">
  2. <a href="javascript:void(0)" class="btn title">Set the title bar color</a>
  3. <a href="javascript:void(0)" class="btn reset">Reset the title bar color</a>
  4. <a href="javascript:void(0)" class="btn pushWindow">Open a new window with the transparent title bar</a>
  5. <a href="javascript:void(0)" class="btn resetTransparent">Reset to the transparent title bar</a>
  6. </div>
  7. <script>
  8. function ready(callback) {
  9. // Call directly if JSBridge has been injected
  10. if (window.AlipayJSBridge) {
  11. callback && callback();
  12. } else {
  13. // Monitor the injected events if JSBridge hasn't been injected
  14. document.addEventListener('AlipayJSBridgeReady', callback, false);
  15. }
  16. }
  17. ready(function(){
  18. document.querySelector('.title').addEventListener('click', function() {
  19. AlipayJSBridge.call("setTitleColor", {
  20. color: parseInt('108ee9', 16),
  21. reset: false // (Optional, false by default) Whether or not to reset the title color to the default one.
  22. });
  23. });
  24. document.querySelector('.reset').addEventListener('click', function() {
  25. AlipayJSBridge.call("setTitleColor",{
  26. color: 16775138,
  27. reset: true
  28. });
  29. });
  30. document.querySelector('.pushWindow').addEventListener('click', function() {
  31. AlipayJSBridge.call("pushWindow", {
  32. url: location.pathname + '?__webview_options__=transparentTitle%3Dalways'
  33. });
  34. });
  35. document.querySelector('.resetTransparent').addEventListener('click', function() {
  36. AlipayJSBridge.call("setTitleColor", {
  37. color: 16775138,
  38. resetTransparent: true
  39. });
  40. });
  41. });
  42. </script>

API

 
  1. AlipayJSBridge.call('setTitleColor', {
  2. color: 16775138,
  3. reset: false,
  4. resetTransparent: false
  5. }, fn)

Input parameters

Name Type Description Required Default value Version
color int Color value, decimal Y - -