javascript - 固定の高さと幅の設定

Question

function scrollfun()
{
    var ob = document.getElementById('rowScroll');
    ob.style.height ="300px";
    ob.style.width = "200px";               
}

IDrowScrollはこちら。<div>上記のコードは正常に動作しています。しかし、次のコードは機能しません。

function scrollfun()
{
    var ob = document.getElementById('rowScroll');
    ob.style.height ="30%";
    ob.style.width = "20%";             
}

これをパーセンテージでどのように機能させることができますか?

score 0 · Accepted Answer

参考までに、パーセンテージベースの幅の高さは、要素「rowScroll」の親コンテナーによって異なります。親自体に高さ、幅の情報を与えてみてください...

アップデート：

画面の高さ幅を 50% にするには、次のようにします。

function windowHW() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myHeight,myWidth];
}
function scrollfun()
    {
        var ob = document.getElementById('rowScroll');
        document_dimension = windowHW();
        ob.style.height =document_dimension[0]/2;
        ob.style.width =document_dimension[1]/2;
    }

関数 windowHW は、次のソリューションをわずかに変更したものであることに注意してください。

stackoverflow question: JavaScript - ブラウザの高さを取得する by meder

score 0 · Accepted Answer

classNameJavaScriptのプロパティを使用するだけです

function scrollfun()
{
   document.getElementById("rowScroll").className = "MyClass";      
}

そしてあなたのCSSで

.MyClass{height:30%;width:20%;}

score 0 · Accepted Answer

これを実現するには、div タグを使用する必要があります。以下の作業コードを参照してください。

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
document.getElementById("b1").style.height="200%";
}
</script>
</head>
<body>

<div style="height:25px;">
<input type="button" id="b1" onclick="displayResult()" value="Change height of button" >

</body>
</html>

score 0 · Accepted Answer

これらのパーセンテージが何であるかを「伝える」としたらどうでしょうか。お気に入り

function scrollfun()
{
    var ob = document.getElementById('rowScroll');
    ob.style.height = (container-width * 30)/100 + "px"
    ob.style.width = (container-width * 20)/100 + "px"             
}

javascript - 固定の高さと幅の設定

4 に答える 4

Related

Reference