Last active
March 1, 2016 01:58
-
-
Save think49/816688 to your computer and use it in GitHub Desktop.
print.js : 指定した要素ノードにテキストを挿入する
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| /** | |
| * print.css | |
| * | |
| * @version 1.0.1 | |
| * @author think49 | |
| */ | |
| #print { margin: 1em 0; padding: 0.5em; border: 1px solid #999; color: black; background-color: #EFEFEF; font-family: monospace; } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>print.js</title> | |
| <style> | |
| html { margin: 0; padding: 0; } | |
| body { margin: 0; padding: 1em; } | |
| h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #202020; } | |
| h1 { margin: 1em 0; padding: 0; font-size: 150%; } | |
| h2 { margin: 2.5em 0 1em; padding: 0; font-size: 120%; } | |
| h3 { margin: 1em 0; padding: 0; font-size: 100%; color: #373; } | |
| dl { margin: 1em 0; padding: 0; } | |
| dt { margin: 1.5em 1em 1em; padding: 0; color: #337; font-weight: bold; } | |
| dd { margin: 1em; padding: 0; } | |
| pre { margin: 1.5em 2em; padding: 0.5em; font-family: monospace; font-size: 100%; font-weight: normal; } | |
| code { font-family: monospace; font-size: 90%; font-weight: normal; } | |
| </style> | |
| <style> | |
| /* print.css | |
| * | |
| * @version 1.0 | |
| * @author think49 | |
| */ | |
| #Print { margin: 1em 0; padding: 0.5em; border: 1px solid #999; color: black; background-color: #EFEFEF; font-family: monospace; } | |
| </style> | |
| <script src="./print.js"></script> | |
| <script> | |
| (function () { | |
| function handleLoad (event) { | |
| var doc; | |
| doc = event.target || document; | |
| print('sample text1'); | |
| print('sample text2\r\nsample text3\rsample text4\nsample text5', doc.getElementById('Print')); | |
| } | |
| if (document.addEventListener) { | |
| document.addEventListener('DOMContentLoaded', handleLoad, false); | |
| } else if (typeof attachEvent === 'function' || typeof attachEvent === 'object') { | |
| attachEvent('onload', handleLoad); | |
| } | |
| })(); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>print.js</h1> | |
| <h2 id="Summary">概略</h2> | |
| <ul> | |
| <li><code>print("Hello", element);</code> で指定した要素ノードにテキストノードを挿入します。</li> | |
| <li>第二引数 (element) を省略すると、<code>id="Print"</code> の要素ノードにテキストノードを挿入します。</li> | |
| <li>改行 (<code>\r\n|\r|\n</code>) はbr要素ノードに変換して出力します。</li> | |
| </ul> | |
| <h2 id="Sample">サンプル</h2> | |
| <div id="Print"></div> | |
| <h2 id="Download">ダウンロード</h2> | |
| <ul> | |
| <li><a href="./print.js">print.js</a></li> | |
| <li><a href="https://gist.github.com/816688">gist: 816688 (print.js) - GitHub</a></li> | |
| </ul> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * print.js | |
| * | |
| * @version 1.0.5 | |
| * @author think49 | |
| * @url https://gist.github.com/816688 | |
| * @license http://www.opensource.org/licenses/mit-license.php (The MIT License) | |
| */ | |
| /** | |
| * Output text in an element node of a target. | |
| * @function | |
| * @param {String} string Output text. | |
| * @param {Object} element Parent node in output TEXT_NODE. | |
| */ | |
| function print (string/*, element*/) { | |
| var doc, element, br, df, i, l; | |
| element = arguments.length > 1 ? arguments[1] : document.getElementById('print'); | |
| if (!element || typeof element !== 'object') { | |
| throw new TypeError(element + ' is not a object'); | |
| } | |
| doc = element.ownerDocument; | |
| df = doc.createDocumentFragment(); | |
| br = doc.createElement('br'); | |
| if (element.childNodes.length > 0) { | |
| df.appendChild(br.cloneNode(false)); | |
| } | |
| string = String(string).split(/\r\n|[\r\n]/); | |
| df.appendChild(doc.createTextNode(string.shift())); | |
| for (i = 0, l = string.length; i < l; i++) { | |
| df.appendChild(br.cloneNode(false)); | |
| df.appendChild(doc.createTextNode(string.shift())); | |
| } | |
| element.appendChild(df); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
下記ページでも解説しています。