日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

サンプル:文字以外への拡張(img) - 文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ

サンプル:文字以外への拡張(img)

スタイルシートの適用対象を拡張子、画像(img タグ)に適用しています。

プレビュー



貼り付けコード

<!-- anime css begin -->
<img id="anime-css-container" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOgdVk_dObyqVIoZ76ttyDCler7TZdZbab7QFXFPSjsAJm36HV451P7ECvw7FmXb6VctBTN88QFD4NgjRZLUhrLJkZNrsVgcFkcb17MHtbS3G8vDveAeBI_p2Tx2B8yg6TUwDZdTtlI4/s72-c/post_image.png"><script type="text/javascript">
<!--
(function(){function e(){a.setAttribute("style",c[b]);f&&(d.innerHTML="",d.appendChild(document.createTextNode("style:"+c[b])));b++;b>=c.length&&(b=0);setTimeout(e,1E3)}var a=document.getElementById("anime-css-container");if(a){a.removeAttribute("id");var c="border-style:solid; border-width:1px; border-color:#000000;\r\nborder-style:solid; border-width:2px; border-color:#000000;\r\nborder-style:solid; border-width:3px; border-color:#000000;\r\nborder-style:solid; border-width:5px; border-color:#000000;\r\nborder-style:solid; border-width:10px; border-color:#000000;".split(/\r\n|\r|\n/g);if(!(0>=c.length)){var f=!0,d=null;f&&(d=document.createElement("div"),a.parentNode.insertBefore(d,a));var b=0;e()}}})();
//-->
</script>
<!-- anime css end -->


元の貼り付けコードからの変更点

以下のように、タグの id 属性として "anime-css-container" が適用されている部分に、スタイルが適用されます。

<div id="anime-css-container">こんにちは!
省略
</div>

従って、この div タグを別のタグに変更すれば、文字以外の要素にも、スタイルシートの適用結果をアニメーションで表示することを拡張することができます。


これは何?

これは、「文字へのスタイルシートの適用結果を、アニメーションで表示するJavaScriptコードジェネレータ」によって生成した JavaScript コードのプレビューです。