JS innerHTMLでdivの幅や色を印刷するにはどうすればいいですか？

getElementById（）。innerHTMLでpなどのようにCSSパラメータ（適切な用語？）や値を表示する方法を理解できません。私はお詫びしますが、これは2つの質問の一種です.CSS値が数値の場合、toStringなどを使用する必要がありますか？JS innerHTMLでdivの幅や色を印刷するにはどうすればいいですか？

私は純粋なJSの回答に感謝しますが、jQueryも最高だと思うのであれば問題ありません。私はHTML + CSS + Javascriptと呼ばれる携帯電話のアプリでこれをやっています - jQueryライブラリへのアクセス方法はわかりません。

HTML：

<body> 
    <h1>Practice Page</h1> 
    <div id="box"> 
     <div id="runner"></div> 
    </div> 
    <p id="color"></p> 

    <p id="width"></p> 

    <script src="practiceA.js" type="text/javascript"></script> 

</body> 
</html>

JS：

document.getElementById('color').innerHTML= 
document.getElementById('runner').style.backgroundColor; 

document.getElementById('width').innerHTML= 
document.getElementById('box').style.width;

とCSS：

#runner{ 
    height:10px; 
    width:10px; 
    background-color: red; 
} 

#box{ 
    height:100px; 
    width:100px; 
    border:1px solid black; 
}

出典

2016-05-27 Sam Hodak

-1

You can't access CSS properties that were set from a CSS file using element.style。代わりにgetComputedStyleを使用する必要がありますが、これはブラウザの互換性に迷惑をかける可能性があります。何もないので、以下のようにjQueryを使用することをおすすめします。（あなたはjQueryのを使用しないことを選択した場合、私はリンクの答えはあなたが使用できる素敵なヘルパー関数を持っている）

jQueryの例：

$('#color').html($('#runner').css('backgroundColor'));

#runner{ 
 
    height:10px; 
 
    width:10px; 
 
    background-color: red; 
 
} 
 

 
#box{ 
 
    height:100px; 
 
    width:100px; 
 
    border:1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
<h1>Practice Page</h1> 
 
<div id="box"> 
 
    <div id="runner"></div> 
 
</div> 
 
<p id="color">x</p> 
 

 
<script src="practiceA.js" type="text/javascript"></script> 
 

 
</body>

出典

2016-05-27 06:18:13 libcthorne

は、私はこれは私の質問に答え考えられており、その複製物へのリンクは行ったが、それは画面にその番号を表示する方法を私に示している限りではなかった。私は、私が望む値として定義された変数を持っているかもしれませんが、私はそれらを見ることはできません。そして、それらをinnerHTMLとして見たい場合は、toStringを使用する必要がありますか？ document.writeとして、私はないと思いますか？ –

心配しないで！今、私はjQueryについて理解しています。まだそれが動作するかどうかを確認しようとしているが、... –

JS innerHTMLでdivの幅や色を印刷するにはどうすればいいですか？

答えて

関連する問題