如何通过初始化脚本将Osano Cookie Consent的「Got it!」按钮左移？

Absolutely! You can shift the "Got it!" button from the right to the left using Osano Cookie Consent's initialization script—no external CSS files required (we’ll cover both script-native and script-injected CSS approaches, since some versions might have different supported options).

Option 1: Use Built-in Button Alignment Configuration (If Supported) #

Some newer versions of Osano Cookie Consent include a dedicated option to control button alignment directly in the initialization config. Add the button object with an align property to your setup:

window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    }
  },
  "content": {
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    "dismiss": "Got it!",
    "link": "Learn more",
    "href": "/cookie-policy"
  },
  "layout": "informational", // Matches Example 3's layout
  "button": {
    "align": "left" // Forces the button to align left
  }
});

Option 2: Inject Custom CSS via Initialization Callback #

If the built-in alignment option doesn’t work for your version, you can inject CSS directly through the script’s onInitialise callback. This is still fully controlled by the initialization script and avoids editing external stylesheets:

window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    }
  },
  "content": {
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    "dismiss": "Got it!",
    "link": "Learn more",
    "href": "/cookie-policy"
  },
  "layout": "informational",
  "onInitialise": function() {
    // Create and inject a style tag to adjust button positioning
    const style = document.createElement('style');
    style.textContent = `
      .cc-btn {
        float: left !important;
        margin-left: 1rem;
      }
      .cc-message {
        margin-right: 1rem; /* Adjusts spacing to compensate for button shift */
      }
    `;
    document.head.appendChild(style);
  }
});

Quick Notes: #

• The !important flag ensures the custom style overrides Osano’s default CSS.
• Tweak the margin values to match your site’s design and spacing preferences.
• Test with your specific Osano version to see which method works best—both are valid ways to achieve the button shift via the initialization script.

内容的提问来源于stack exchange，提问作者user2790605