如何使用js更改reCaptcha（v2）的宽度？

Question

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

我已经尝试过使用Jquery，香草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;
}

更新：

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

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

谷歌文档

Answer 2

直接来自文档 。 有一个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 。