divタグのコンテンツを取得し、JavaScriptのインラインスタイルに適用する

私はjavascriptの超初心者ですが、これは別の場所で回答されている可能性がありますが、まだ用語を学んでいるので見つけることができません。divタグのコンテンツを取得し、JavaScriptのインラインスタイルに適用する

divタグの内容を使用して、divの中に入れ子になっているdivのCSS値を定義しようとしています。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script type="text/javascript"> 
 
      function data(){ 
 
       alert(); 
 
       var sizeOverride = document.getElementById('newdata').innerHTML 
 
alert(sizeOverride) 
 
      } 
 
     </script> 
 
    </head> 
 

 
    <body> 
 
    \t <div id=sizeChange> 
 
     <div id="newdata"> 
 
      40 <!--The idea is for this to be 40px--> 
 
     </div> 
 
     </div> 
 
     <script type="text/javascript"> 
 
     document.getElementById("sizeChange").style.fontSize = "sizeOverride" + "px"; 
 
    \t </script> 
 
    </body> 
 
</html>

結局計画は、IEの情報を入力するhotfieldsを利用してページ内にあるだろう、グラフ上のバーの位置とラベルを定義し、これを使用することですdiv。そのフレームワークは既に構築されていますが、目標はそのデータを使用してそのdivのCSS値を定義することです。

エラーはありませんが、何も起こっていません。これはおそらく単純なものです。私はあなたが私と一緒にいることに感謝します。

出典

2017-08-31 Adam

'sizeOverride'は変数ですが、下の方に、文字列ではなく変数として' ' "sizeOverride" を連結しています。変数名の前後に引用符を囲まないでください。 –

頭の中のjavascriptを下のスクリプトタグに追加します。ヘッドタグ実行時にDOMはレンダリングされません。 – Reiner

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script type="text/javascript"> 
 
      function data(){ 
 
        return parseFloat(document.getElementById('newdata').innerHTML.trim()); 
 
      } 
 
     </script> 
 
    </head> 
 

 
    <body> 
 
    \t <div id=sizeChange> 
 
     <div id="newdata"> 
 
      40 
 
     </div> 
 
     </div> 
 
     <script type="text/javascript"> 
 

 
     document.getElementById("sizeChange").style.fontSize = data() + "px"; 
 
    \t </script> 
 
    </body> 
 
</html>

出典

2017-08-31 16:59:24

以下に変更があります。 1.要素 "newdata"は値（番号）のみを持つ必要があります。それがなければ、document.getElementById（ 'newdata'）。innerHTMLは、コメントを含む "newdata"にあるすべてを含みます。 2.データ関数のparseFloatに注目してください。これは、文字列であるinnerHTMLを数値に変換するために使用されます。 –

私は '' parseFloat（document.getElementById（ 'newdata'）。innerText.trim（））; 'を使用して、不名誉な文字を処理します。 – Reiner

追加！完全に意味をなさない:-) –

divタグのコンテンツを取得し、JavaScriptのインラインスタイルに適用する

答えて

関連する問題