如何用js改变reCaptcha (v2)的宽度？

Question

我正在尝试为 reCaptcha (v2) 设置宽度，但 JavaScript 找不到我需要将样式应用到的 div (<div class="rc-anchor rc-anchor-normal rc-anchor-light">)。

我已经尝试 Jquery、vanilla JS 和两者的组合来实现这一点，但似乎没有任何效果。我主要试图给那个 div 一个 ID (document.getElementsByClassName("rc-anchor-normal")[0].setAttribute("id", "captchadiv");) 但是不知何故 JS 找不到对象，除非我在验证码上使用检查元素并自己找到 div .

有人知道我该如何实现吗？

我的完整代码

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var form = width - (width * 0.10);
var input = $("#name").outerWidth();

setTimeout(() => { document.getElementsByClassName("rc-anchor-normal")[0].style.width = input; }, 5000);

Answer 1

试试这个解决方法：

.g-recaptcha {
transform:scale(0.77);
transform-origin:0 0;
}

更新：

可以在url中使用onload参数： src="https://www.google.com/recaptcha/api.js?onload=onloadCallback

<script type="text/javascript">
  var onloadCallback = function() {
    //set CSS
  };
</script>

Google Docs

Answer 2

直接来自 docs。有一个 api 可让您将大小配置为紧凑或正常。该属性称为 data-size。这是如何使用它的代码块：

<script type="text/javascript">
  var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'size' : 'compact'
    });
  };
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

Answer 3

我发现唯一对我有用的是缩放内容而不是 captcha。