数学、電気の勉強始めました!プログラムにも挑戦しています!|ω・)ノ

ねごとめも背景

# ねごとめも

# カウンター

# プロフィール

negotoy

Author:negotoy
電気の勉強始めました!
テキストエディタを使ってプログラミングに挑戦中。
fc2 ブログに公開しているテンプレート等は、自由にカスタマイズして、ご活用ください。
プログラム実行の前に必ずコードの確認をお願いします。

# 最新記事

# カレンダー

05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

# スポンサードリンク

テキスト内指定文字列 CSS クラス名一括指定ツール作成しました。

2017 03 08:05:54

{ javascript innerText の値はブラウザによって違う? }

ホームページ更新しました → 
{ 要素からプレーンテキストを取り出す関数の作成 }

javaScript と contenteditable 属性を利用して、
テキストエディタを作成していく過程で、
取得した innerText の値が
ブラウザによって、違うのに気付いた。
確認した範囲では、 IE と firefox は、同じ。
chrome は上の2つとは違う値を返してきた。
chrome は、 div, p, br をきちんと成形した
値を返してくる。
ほかの2つは、 ブロック要素も
改行として返してくる感じ。
例えば、一行分の文字列を p タグで囲い、
2つだけ配置すると、改行は一箇所。
IE と firefox は、2つの改行として、
値を返してくる?
詳しいことは分からないので、
どちらが正しいのか判断できない。_(:3」∠)_

innerText の値を成形して、出力していたので、
chrome とほかの2つでは、
違う処理が必要になってしまった。

成形する前のタグと innerText を比較して、
改行を足したり引いたを試してはみたけど、
挿入される タグをうまく見分ける方法が
分からなかった。

アレコレ、試しながら、
div, p, span, br, #text の要素を使用して、
構成された内容であれば、
innerText の値を取得出来る関数を、書いてみた。

{ innerText の値はブラウザによって違う? }

aaaaa

00000
bbbbb
11111

ccccc

y
x
z

22222ddddd
ブラウザの
innerText プロパティ
innerText 取得
div タグ

取得クリックで div タグの innerText を
pre タグ内へ出力します。
chrome では、高さが変わること無く出力されますが、
他のはでは、高くなってしまうと思います。

div タグの中の要素には、
padding, margin を 0 に指定しています。

{ 作成した innerText メソッド }

aaaaa

00000
bbbbb
11111

ccccc

y
x
z

22222ddddd
自作した
innerText 関数
innerText 取得
div タグ

入れ子が繰り返されてような複雑なものでは、
エラーが出るかもしれません。

同じ高さで出力されると思いますが、
正しいかどうかは、分かりません。_´ω`)_

{ div タグの innerHTML }


# QRコード

QR

I use Vivaldi.

Download Vivaldi Web Browser Today!

# スポンサードリンク