如何更改已完成腳本的背景顏色和按鈕大小？-有解無憂

我從支付處理公司收到了一個現成的腳本，我想增加按鈕的大小和背景顏色，我用html嘗試過，但它不起作用

<script data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf">
  const s = document.createElement("script");
  s.src = "https://static.dlocalgo.com/dlocalgo.min.js", s.async = !0, document.body.appendChild(s), s.addEventListener("load", () => {
    const e = document.querySelector('script[data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf"]'),
      t = e.parentNode,
      n = "dp-btn-2f334db3-3df2-46c2-93cd-fd2c05079acf",
      c = document.createElement("div");
    c.id = n, t.insertBefore(c, e);
    new DlocalGo("wPvxvAjzGSlDGrYLQDamRXkTDKvsEDyc").createCheckout(n, {
      country: "UY",
      currency: "UYU",
      amount: "17000",
      lang: "",
      text: "quiero inscribirme"
    })
  });
</script>

uj5u.com熱心網友回復：

改變背景顏色和大小與我們可以用 CSS 做的樣式有關。
您只需要添加您的自定義類并使用該類選擇器應用樣式。

c.classList.add("my-btn-container"); // we are adding our own class to apply CSS

:root {
  --your-color: #44cc44;
}

.my-btn-container .DlocalGoButton {
  background-color: var(--your-color);
  padding: 15px;
}

<script data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf">
  const s = document.createElement("script");
  s.src = "https://static.dlocalgo.com/dlocalgo.min.js", s.async = !0, document.body.appendChild(s), s.addEventListener("load", () => {
    const e = document.querySelector('script[data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf"]'),
      t = e.parentNode,
      n = "dp-btn-2f334db3-3df2-46c2-93cd-fd2c05079acf",
      c = document.createElement("div");
    c.classList.add("my-btn-container"); // we are adding our own class to apply css
    c.id = n, t.insertBefore(c, e);
    new DlocalGo("wPvxvAjzGSlDGrYLQDamRXkTDKvsEDyc").createCheckout(n, {
      country: "UY",
      currency: "UYU",
      amount: "17000",
      lang: "",
      text: "quiero inscribirme"
    })
  });
</script>

uj5u.com熱心網友回復：

一種方法是使用它的資料屬性來定位外部容器，這不太可能改變（我認為）。您可以進一步細化 CSS 以定位第一個按鈕（如果您愿意）。

[data-new-gr-c-s-check-loaded] button:first-child {
    ... css stuff

[data-new-gr-c-s-check-loaded] button:first-child {
  padding: 50px;
  background: rgb(131, 58, 180);
  background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
  color: #fff;
  font-size: 4em;
}

<script data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf">
  const s = document.createElement("script");
  s.src = "https://static.dlocalgo.com/dlocalgo.min.js", s.async = !0, document.body.appendChild(s), s.addEventListener("load", () => {
    const e = document.querySelector('script[data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf"]'),
      t = e.parentNode,
      n = "dp-btn-2f334db3-3df2-46c2-93cd-fd2c05079acf",
      c = document.createElement("div");
    c.id = n, t.insertBefore(c, e);
    new DlocalGo("wPvxvAjzGSlDGrYLQDamRXkTDKvsEDyc").createCheckout(n, {
      country: "UY",
      currency: "UYU",
      amount: "17000",
      lang: "",
      text: "quiero inscribirme"
    })
  });
</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/511239.html

標籤：javascripthtmlcss按钮颜色

上一篇：函式中變數的比較

下一篇：一直出現使用JavaScript的回滾按鈕