时间戳

首页 > 解决方案 > 自定义“g-signin2”样式按钮

javascript - 自定义“g-signin2”样式按钮

问题描述

我正在寻找更改我的谷歌登录按钮的背景。这是我用来为用户签名的客户端代码。

<div class="g-signin2" id="googleSignIn" data-onsuccess="onSignIn"></div>

function onSignIn(googleUser) {
  let profile = googleUser.getBasicProfile();
  let email = profile.getEmail();
  let name = profile.getName();
  let imgurl = profile.getImageUrl();
  console.log(imgurl);

  document.querySelector(".g-signin2").addEventListener("click", () => {
    console.log(profile);
  });

  document.getElementById("googleSignIn").addEventListener("click", () => {
    let fd = new FormData();
    fd.append("email", email);
    fd.append("name", name);
    fd.append("image", imgurl);

    fetch("index.php?action=security&fc=googleValidation", {
      method: "POST",
      body: fd,
    })
      .then((response) => response.json())
      .then((data) => {
        if (data == "connectUser" || data == "userCreated") {
          location.href = "index.php?action=profil";
        }
      })
      .catch((err) => {});
  });
}

我试图在我的 js 代码中修改样式，但问题是我得到了我想要的（样式）但是如果我使用它，验证器就不再起作用了

setTimeout(function () {
  document.querySelector(".g-signin2").style.background = "url('public/img/Google.svg') no-repeat";
  document.querySelector(".abcRioButtonContentWrapper").style.display = "none";
  document.querySelector(".abcRioButton").style.height = "";
  document.querySelector(".abcRioButtonLightBlue").style.height = "";
  document.querySelector(".abcRioButton").style.width = "45px";
}, 600);

谷歌提供了一个如何构建自定义按钮的示例，我已经尝试过了，但似乎对我不起作用。是否可以自定义“g-sinin2”？

标签： javascriptgoogle-signin

解决方案

推荐阅读