Question

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

我已经尝试使用Jquery，香草JS和两者的混合来实现此目的，但似乎没有任何效果。我主要是尝试给div一个ID（document.getElementsByClassName("rc-anchor-normal")[0].setAttribute("id", "captchadiv");），但是除非我在验证码上使用inspect元素并自己找到div，否则JS无法找到对象

有人对我如何实现这一目标有想法吗？

我的完整代码

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>

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。

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

我的完整代码

3 个答案: