高さと幅のスタイルを調整します。ピクセル値が文字列として出力される

こんにちは、私はdivの "ボックス"のサイズ（幅と高さ）を編集しようとしているときに何か重要なことを見逃しているように感じます。高さと幅のスタイルを調整します。ピクセル値が文字列として出力される

"box" divの高さまたは幅の値を確認したい場合は、getElementByIdを使用して幅または高さを探し、ピクセル値を返します。

document.getElementById("box").style.height ">> 200px"

ニース。

しかし、そのDIVのピクセル数を編集したい場合、200pxが文字列で数値ではないので、ピクセルを加算または減算することはできません。

`document.getElementById("box").style.height += 200 
>>"200px200" 

document.getElementById("box").style.height += 200px 
>>VM1143:1 Uncaught SyntaxError: Invalid or unexpected token 

document.getElementById("box").style.height += "200px" 
">>200px200px"`

このdivの幅と高さを編集できない点は何ですか？ピクセルを加算したり減算したりするときに "px"を削除する必要がありますか？

ありがとうございます。以下は私が使用しているコードです。

<!DOCTYPE html> 
<html> 
    <head> 
     <title> 
      Day 12 - Functions 2 Computation 
     </title> 

     <style> 
      #box { 
       width: 200px; 
       height: 200px; 
       background-color: black; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="group"> 
      <button id="bigger">Bigger</button> 
      <button id="smaller">Smaller</button> 
      <hr /> 
      <button id="blue">Blue</button> 
      <button id="red">Red</button> 
      <button id="green">Green</button> 
      <div id="status"></div> 
     </div> 

     <div id="box" style="height: 200px; width: 200px"></div> <-- This one is giving me issues 

     <script type="text/javascript">  </script> 
    </body> 
</html>

出典

2017-07-03 Chef1075

基本的には、style.heightは整数ではない文字列を返します。そのため、数値を追加するとエラーが発生します。

あなたは要素の高さをつかむために代わりoffsetHeightを使用（マイナスマージンをしかし、パディングを含む）することができます

https://www.w3schools.com/jsref/prop_element_offsetheight.asp

（それはしかし、幅のために同じロジックoffsetWidthです）

https://www.w3schools.com/jsref/prop_element_offsetwidth.asp

コードは

var el = document.getElementById("box"); 
var height = el.offsetHeight; 
var newHeight = height + 200; 
el.style.height = newHeight + 'px';

です。

出典

2017-07-03 01:47:16

これは私の問題を解決していただきありがとうございます。私は別の行に "px"を追加する必要がない方法を見つけようとしていましたが、ここでは避けることはできません。 – Chef1075

あなたは本当に何かが欠けています。 document.getElementById("box").style.heightは、の整数ではなく、の文字列を返します。したがって、+=は使用できません。

ただし、文字列をdocument.getElementById("box").style.height = "300px";のように上書きすることで、高さを手動で設定できます。

var the_box = document.getElementById("box"); 
 
var offset_height = the_box.offsetHeight; 
 
var new_height = offset_height + 100; 
 
the_box.style.height = new_height + 'px'; 
 

 
// OR 
 

 
document.getElementById("box").style.height = document.getElementById("box").offsetHeight + 100 + 'px';

#box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: black; 
 
}

<div id="group"> 
 
    <button id="bigger">Bigger</button> 
 
    <button id="smaller">Smaller</button> 
 
    <hr /> 
 
    <button id="blue">Blue</button> 
 
    <button id="red">Red</button> 
 
    <button id="green">Green</button> 
 
    <div id="status"></div> 
 
</div> 
 

 
<div id="box" style="height: 200px; width: 200px"></div>

注

あなたが調整を行った後、あなたがpx高さの終わりを追加する必要があります。

また、条件付きベースの調整を行うためにelement.offsetHeight使用することができますそれをピクセルベースのstringに戻すことができます。

希望すると便利です。 :)

出典

2017-07-03 01:48:40

document.getElementById().style.widthは、インラインスタイル宣言とまったく同じ有効な長さの式を返します。宣言が構文が無効な場合は、何も返しません。要素の幅または高さは、パーセンテージまたは長さの単位がある場合にのみ有効です。あなたの場合は、返された値を解析する必要があります。さあ、関数parseInt(document.getElementById("box").style.width,10)で簡単に解析できるかもしれません。これがあなたを助けることを願っています。

出典

2017-07-03 03:25:25 pizza

高さと幅のスタイルを調整します。ピクセル値が文字列として出力される

答えて

関連する問題