HTMLに動的にdivや文字列、input form、textareaなどを追加する方法 – ゆっくり備忘録

動的に追加したいときってありますよね。ボタンをぽちっと押すと、新しいフォームが出てきたりとか。そんなん作りました。 具体例←開いてみてください ソース↓ ↑の簡単な解説: function add() 1行目↓: ↑createElement で、div要素を作成して、div_element に格納しました。 function add() 2行目↓: ↑先ほど作成した、div_element のなかに HTML を書き込んでいます。input や textarea、文字列でもなんでも詰め込み放題です。 function add() 3行目↓: ↑id=piyoの要素を捕まえています。具体例のHTMLのソースを見ると分かると思いますが、 ↑と、なっている箇所があります。ここのdivのidがpiyoなので、この要素を取得しています。parent_objectという変数に格納していますが、先ほど頑張って新しく作ったdiv要素を入れる箱になります。 function add() 4行目↓: ↑先ほど作ったdiv_elementを、parent_object、つまりid=piyoのdivに詰め込んでいます。

情報源: HTMLに動的にdivや文字列、input form、textareaなどを追加する方法 – ゆっくり備忘録

CSS3 アニメーション(使い方やサンプル)/Web Design Leaves

CSS3 アニメーションの使い方やサンプル、解説等。transition の設定方法, 簡単なロールオーバー, transition のプロパティ, transition-timing-function, クリックで transition /CSS, クリックで transition /jQuery, transform, animation の設定方法, キーフレーム @keyframes, animation のプロパティ, アニメーション開始のきっかけ, :hover で開始, クリックで開始(jQuery), スクロールで開始(jQuery), ホバーで開始(jQuery), 複数のキーフレームの適用, Animate.css, クリックでアニメーション, ホバーでアニメーション, スクロールでアニメーション, マウスオーバー時のエフェクト。

情報源: CSS3 アニメーション(使い方やサンプル)/Web Design Leaves