divの幅に応じてボタンのサイズを変更する方法

Question

私がしたいのは、私のボタンサイズがです。私のdiv widthのです。私は動的に要素をdivに追加し、JavaScriptでは属性を追加します。

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; 

が、私は要素を作成し、このように追加します：だからここに.jsファイルの私のdivがある

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が100pxボタンが35px（div幅の35％）とpicture90px（div幅の90％）でなければなりません。

すべてのアドバイスと解決策は大歓迎です。 ありがとうございます。

Answer 1

私はあなたのコードを読んだが、私はit.apparentlyあなたが作っている2つの間違いを見ることができます実装されていません。 1：var divWidth = document.getElementById（ "div2"）。offsetWidth + "px";文字列を返します.100pxとし、数値で文字列を分割することはできません。 100px/3.2は未定義の結果を返します。

2：document.getElementsByClassNameは指定されたクラス名を持つすべての要素の配列を返すため、document.getElementsByClassName（ "button-1"）。styleは機能しません。これらの要素にスタイルを追加する場合は、この関数から返された配列をループする必要があります。

代わりに、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（）は、特定の要素のbot、height、left、right、top、およびwidthを返します。したがって、例= xxx.Element.getBoundingClientRect（）。width;