- ベストアンサー
要素のコピー
お世話になります。 質問なのですが、あるボタンを押下すると 指定した要素と同じ大きさの要素を作成したいのですが 可能でしょうか？ あと可能であれば表示位置も同位置に表示したい。 同じ位置に重なるように表示(直下。z-index=1)が出来ればと思っております。 例えば、testがtopから100px、leftから100pxのところで表示されていたとした場合、 コピーされる要素もtopから100px、leftから100pxに表示したい。 ※位置、大きさは動的に変わります。 <script type="text/javascript"> function copy(id){ //copyの処理 } </script> <div id="test" style="z-index=10;">test<div> <input type="button" value=copy onClick="copy('test')">
- bakenshibakenshi
- お礼率81% (115/141)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
DOMを使える環境なら、 function copy(id){ var obj=document.getElementById(id); var newObj=obj.cloneNode(true); newObj.style.zIndex=1; document.appendChild(newObj); } > 例えば、testがtopから100px、leftから100pxのところで表示されていたとした場合、 あらかじめtestのスタイルがposition:absolute;top:100px;left:100px;となっているのなら、 クローンを作ってdocumentに挿入するだけで同じ位置に表示されますが、 position:staticや未指定の場合はtestの位置を取得して、クローンに指定する必要があります。 testの位置取得方法は、過去ログにあったと思います。 ＊動作未検証
その他の回答 (1)
ボタンを押しても何事も起こらないように見えますが元のtestに下に同じものが追加されていると思います。 <HTML> <HEAD> <TITLE>copy</TITLE> <script type="text/javascript"> function a(){ document.getElementById('test').style.position='absolute'; document.getElementById('test').style.left='100px'; document.getElementById('test').style.top='100px'; document.getElementById('test').style.width='100px'; document.getElementById('test').style.height='100px'; document.getElementById('test').style.border='solid 1px'; } function copy(id){ var Tag = document.createElement ( document.getElementById('test').tagName ); document.body.appendChild ( Tag ); Tag.innerHTML=document.getElementById('test').innerHTML; //この部分を消すとコピーが作成されるのが確認出来ます。 Tag.style.position=document.getElementById('test').style.position; Tag.style.left=document.getElementById('test').style.left; Tag.style.top=document.getElementById('test').style.top; Tag.style.width=document.getElementById('test').style.width; Tag.style.height=document.getElementById('test').style.height; Tag.style.border=document.getElementById('test').style.border; Tag.style.zIndex="1"; } </script> </HEAD> <BODY onload="a()"> <div id="test" style="z-index:10;">test<div> <input type="button" value=copy onClick="copy('test')"> </BODY> </HTML>
お礼
dshguskdigさん、返信有難うございます。 お教えいただいた通りのもので出来ました。 中身は表示せずに、大きさと相対位置だけ分かればよかったので以下のようにしました。 どうも有難うございました。 <HTML> <HEAD> <TITLE>copy</TITLE> <script type="text/javascript"> function copy(id){ var Tag = document.createElement ( document.getElementById(id).tagName ); document.body.appendChild ( Tag ); //Tag.innerHTML=document.getElementById(id).innerHTML; //この部分を消すとコピーが作成されるのが確認出来ます。 Tag.style.position = document.getElementById(id).style.position; //相対位置を取得 Tag.style.left = document.getElementById(id).offsetLeft; Tag.style.top = document.getElementById(id).offsetTop; Tag.style.width = document.getElementById(id).style.width; Tag.style.height = document.getElementById(id).style.height; //Tag.style.border = document.getElementById(id).style.border; Tag.style.border = "solid red 2px"; Tag.style.zIndex = "1"; } </script> </HEAD> <BODY> <br> <div style"position:relative;top:50px;left:40px;"> <div style"position:absolute;top:30px;left:20px;"> <div id="test" style="position:absolute;top:10px;left:5px;height:20px;width:40px;border:solid 1px;z-index:10;">test</div> </div> </div> <br><br> <input type="button" value=copy onClick="copy('test')"> </BODY> </HTML>
補足
ちなみにdiv id="test"にheightとwidthを指定しないで 高さ・幅を取得することは可能でしょうか？ 質問ばかりですみません。 <HTML> <HEAD> <TITLE>copy</TITLE> <script type="text/javascript"> function copy(id){ var Tag = document.createElement ( document.getElementById(id).tagName ); document.body.appendChild ( Tag ); //Tag.innerHTML=document.getElementById(id).innerHTML; //この部分を消すとコピーが作成されるのが確認出来ます。 Tag.style.position = document.getElementById(id).style.position; //相対位置を取得 Tag.style.left = document.getElementById(id).offsetLeft; Tag.style.top = document.getElementById(id).offsetTop; Tag.style.width = document.getElementById(id).style.width; Tag.style.height = document.getElementById(id).style.height; //Tag.style.border = document.getElementById(id).style.border; Tag.style.border = "solid red 2px"; Tag.style.zIndex = "1"; } </script> </HEAD> <BODY> <br> <div style"position:relative;top:50px;left:40px;"> <div style"position:absolute;top:30px;left:20px;"> <div id="test" style="position:absolute;top:10px;left:5px;border:solid 1px;z-index:10;">test<br><br>test</div> </div> </div> <br><br> <input type="button" value=copy onClick="copy('test')"> </BODY> </HTML>
お礼
talooさん、ご教授有難うございます。 お教えいただいた通りのもので出来ました。 見やすくするために以下のように修正してみました。 それと該当ノードだけコピーしたかったのでcloneNode(false)にしました。 どうも有難うございました。 <HTML> <HEAD> <TITLE>copy</TITLE> <script type="text/javascript"> function copy(id){ var obj=document.getElementById(id); var newObj=obj.cloneNode(false); newObj.style.zIndex=1; newObj.style.border = "solid red 2px"; newObj.style.zIndex = "1"; document.body.appendChild(newObj); } </script> </HEAD> <BODY> <br> <div style"position:relative;top:50px;left:40px;"> <div style"position:absolute;top:30px;left:20px;"> <div id="test" style="position:absolute;top:10px;left:5px;height:20px;width:40px;border:solid 1px;z-index:10;">test2</div> </div> </div> <br><br> <input type="button" value=copy onClick="copy('test')"> </BODY> </HTML>