Question

我想要做的是我的按钮大小

{％> 我的div width。我将动态元素添加到我的div中，并在JavaScript中添加属性。所以这是我在.js文件中的div：

var div2= document.createElement('div');  
div2.className = "div2" ;
div2.id = "div2";
div2.style.color= ButtonColor;
div2.style.height = ButtonHeight;
div2.style.width = ButtonWidth;
div2.style.backgroundColor = BackgroundColor;

然后我创建元素并以这种方式添加：

 div2.appendChild(h2) + "\n";
 div2.appendChild(linebreak);

 div2.appendChild(pic) + "\n";
 div2.appendChild(linebreak);



 var parentDiv = document.getElementById("surveybot-button");
 var sp2 = document.getElementById("surveybot-link");
 parentDiv.insertBefore(div2,sp2);
 div2.appendChild(linebreak);
 div2.appendChild(sp2);

然后我在index.php

中做下一步

<div id="surveybot-button">
<a id="surveybot-link" class="button-1" href="https://gosurveybot.com/liberty-moving-video-chat-estimate/">SCHEDULE VIRTUAL ESTIMATE USIGN SURVEYBOT</a><br>

</div>

<script id="buttons-script" src="button.js" button-variant="<img src='img/button-icons-2.png'>" button-color="green" button-width="600px" button-height="355px" background-color="#11ff11">

</script>
<script>

var divWidth = document.getElementById("div2").offsetWidth + "px";
var divHeight = document.getElementById("div2").offsetHeight + 'px';
alert(divWidth);
alert(divHeight);
document.getElementsByClassName("button-1").style.width = divWidth / 3.2 + "%";
//document.getElementsByClassName("button-1").style.width = divWidth - 100px;

所以这就是我的尝试：

document.getElementsByClassName("button-1").style.width = divWidth / 3.2 + "%";<br>
document.getElementsByClassName("button-1").style.width = divWidth * 0.3;

最后css：

a.button-1 {
width: 300px;
height: 100px;
background: url(img/button-button-1.png) top center no-repeat;
background-size: 100% auto;
text-indent: -999999px;
color: transparent;
float: left;
cursor: pointer;
position: absolute;
}

有人可以告诉我我做错了什么。所以重复我的目标是如果div是100 px按钮应该是35px（div宽度的35％）和picture90px（div宽度的90％）。

欢迎所有建议和解决方案。提前致谢。

2 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

Answer 1

我已经阅读了你的代码，但我还没有实现它。显然我可以看到你犯的2个错误。 1：var divWidth = document.getElementById（“div2”）。offsetWidth +“px”;返回一个字符串，比方说100px，你不能用数值除以字符串 100px / 3.2返回未定义的结果。

2：document.getElementsByClassName（“button-1”）。style不起作用，因为document.getElementsByClassName会返回一个包含指定类名的所有元素的数组。如果要将样式添加到这些元素上，则必须遍历此函数返回的数组。

您也可以使用document.getElementById（）代替并将样式添加到特定元素。

对于您的第一个问题，您可以使用以下方法

 var divWidth = document.getElementById("div2").offsetWidth;
 var btnWidth = divWidth * 0.35;
 //alert(btnWidth);
 document.getElementById("btn").style.width = btnWidth+"px";

希望它有所帮助。

Answer 2

我找到了其他解决方案，所以现在我正在使用Element.getBoundingClientRect（）;因此，如果有人有同样的问题，可以通过这种方式修复。 Element.getBoundingClientRect（）为您提供某些元素的机器人，高度，左，右，顶部和宽度。所以example = xxx.Element.getBoundingClientRect（）。width;

如何根据div宽度

2 个答案: