HOME

javascript で文字列の背景にノートのような罫線を引く-B

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome


ああああ
いいいい
うううう



一般的に、JavaScriptはプロトタイプベースのオブジェクト指向プログラミング言語で、それに分類される言語同様、静的にクラスを定義すること無くオブジェクトを利用する。




JavaScript で罫線を引く

行間をまたぐ高さの子要素を持たない要素の文字列の背景にノートのような罫線を引く javascript 書きました。
罫線を引く要素の属性に data-dasharray を設定すると、破線を引くことも出来ます。
属性を設定しないと、直線を引きます。
属性の値は、 '隙間の幅', '線の幅' になります。
例 : <p data-dasharray="6,2">
上の例だと、線 6px, 空白 2px の繰り返しになります。

css で罫線を引いたほうが、必要としないスクロールバーの出現に悩まされることもなく、
動作も軽いんじゃないかと。
行間、罫線の色を変更する場合は、
javascript のほうが、 css より、面倒くさくないかもしれません。

行間をまたぐ高さの子要素を持つ要素の文字列の背景にノートのような罫線を引くプログラムは、
こちら → 文字の背景に canvas を配置して罫線を引く-A
全ての要素には、対応できてません。ヽ(´ー`)ノ

数学の勉強をやり直ししてたりします。_´ω`)_