2012-01-04 12 views
3

javascriptを使用してHTML要素のデータ型を変更できるかどうか疑問に思っていますか?HTML要素のタイプを動的に変更する

たとえば、imgをdivに変更しますか?私はこれをやっている理由& imgを破壊しない& divを作成する理由は、要素にはたくさんのインラインスタイルが含まれているため、imgからdivにすべてのインラインスタイルをコピーする必要があるからです。 PS:このウェブサイトはiPad専用ですので、ブラウザ間の互換性は問題になりません。

var div = img.cloneNode(true); 
div.type = "div"; 

だから、その後のdivにタイプを変更する必要があり、img.cloneNode(true)を使用してノード/要素のクローンを作成するために容易になるだろう。私はこれが可能であることを望みますか?

1つの要素スタイルを別の要素にコピーする簡単な方法はありませんか?たぶん...

// img is an img HTML element 
var div = document.createElement("div"); 
div.style = img.style; 
document.body.removeChild(img); // does that destroy div.style aswell? 
+2

要素をあるタイプから別のタイプに変更することはできませんが、スタイルプロパティをコピーしてインラインスタイルをコピーすることができます。しかし、その効果は同じではないかもしれません。 – RobG

+0

[jqueryを使用して要素の種類を変更する方法](https://stackoverflow.com/questions/8584098/how-to-change-an-element-type-using-jquery) – C8H10N4O2

答えて

1

要素のタイプを変更することはできません。 div.style + img.styleを連結しない限り、divのスタイルは上書きされます。この場合、imgスタイル属性のようにdivの値が上書きされます。

+1

これは、属性ではなくdivにimg.style **オブジェクト**をコピーする。 – RobG

2

私は2番目の方法を試してみた - 私はそれがべき仕事だと思うだろうし、それを試してみるために、超迅速でなければなりません - ここに求めていたよりもおそらく速く!

編集:私はそれが動作しないことを確認できます(少なくとも、Operaではなく)。 JSFiddle at http://jsfiddle.net/T7r5c/

+1

http:// jsfiddleの可能な複製。 net/T7r5c/1/'elem.style.cssText'はあなたが後にしたものです。しかし、インラインCSSは悪です。 2つの要素に共通のクラスまたは共通セレクタを与えます。 – Zirak

+0

あなたのコメントを見たときにその答えを投稿しました。私は答えで削除しました。 – Sandro

+0

インラインCSSが間違っています。おそらく、あなたの方法は、クラスをコピーするのが最善の策だろう。サイトによって異なります。他のオプションは、.styleオブジェクトをループし、各スタイルを個別に適用することです。厄介だが:S – SpoonNZ

関連する問題