TOP / Javascript 構文 関数 ステートメント
- 1 2 3 4 5.. >>

2014年03月20日

outerHTML プロパティ

スポンサード　リンク

 outerHTML プロパティ
指定した要素に HTMLを設定、または要素のHTMLを返します。

表示サンプル
  • ジャバスクリプト
  • スタイルシート
  • サンプル集
HTMLタグ
<ul id="ulList">
 <li>ジャバスクリプト</li>
 <li>スタイルシート</li>
 <li>サンプル集</li>
</ul>
 
要素のHTMLコード取得
上記ボタン "outerHTML","innerHTML" を押すと 表示サンプルのHTMLコードが
表示されますが、内容が違います。
outerHTML は指定した要素のタグと、そのタグに含まれる HTML を返していますが
innerHTML は現在の要素を囲むタグは除外しています。

★☆★☆★☆　ナウでヤングなレンタルサーバー！ロリポップ！　☆★☆★☆★
月額１０５円〜容量最大１２０ＧＢ！大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>outerHTML プロパティ</title>
<script>
    function chgCode(flg){
if(flg==0){
 outTxt.value= document.getElementById("ulList").outerHTML;}
else {
 innTxt.value=document.getElementById("ulList").innerHTML;}
            }
</script>
</head>
<body>
 <ul id="ulList"><!-- 番号なしリスト (列挙型リスト） -->
  <li>ジャバスクリプト</li>
  <li>スタイルシート</li>
  <li>サンプル集</li>
 </ul>
  <div>
<input type="button" value="outerHTML" onClick="chgCode(0)" />
<input type="button" value="innerHTML" onclick="chgCode(1)" />
   <br />  <!-- textarea要素 -->
<textarea id="outTxt" rows="7" cols="30"></textarea>
<textarea id="innTxt" rows="7" cols="30"></textarea>
  </div>
</body>
</html>
outerHTML プロパティ
指定した要素に HTMLを設定、または要素のHTMLコードを返します。
要素のHTMLコードを取得
 var content=Element.outerHTML;
　　　現在の要素とその子孫の HTML コードを取得します。// 上記サンプル
指定した要素に HTMLを設定
Element.outerHTML=content;
指定文字列  content
"<p>テキストのHTMLタグを<strong>ストロング</strong>や
 <em>論理強調イタリック体</em>のように、実行する。</p>"  を
<div id="hoge0" style="color : red;">
<div id="hoge1" style="color : red;"> に設定します。
id="hoge0" 指定文字列を outerHTMLプロパティ で設定

id="hoge1" 指定文字列を innerHTMLプロパティ で設定
　上記 "outerHTML","innerHTML" ボタンを押すと 指定文字列を解析して要素を書き換えます。が
outerHTMLプロパティは <div id="hoge0"> のスタイルを反映していません。
出力したコードを視ると <div id="hoge0"> は、存在せず新しいP要素と入れ替わっています。
即ち、このouterHTMLプロパティを設定すると、指定した文字列で、開始タグ、終了タグを含めて
エレメントの現在の内容を完全に書き換えてしまうので、現在の要素への参照は無効になります。
"outerHTML"ボタンを押してください。二度目からはエラーが発生します。
タグ：outerHTML
posted by javaScript at 19:22 | 大阪 ☔ | Javascript 構文 関数 ステートメント | このブログの読者になる | 更新情報をチェックする

2013年12月27日

parseFloat()関数

スポンサード　リンク

 parseFloat(string)関数は、文字列を解析し数値に変換します。

  この関数は引数　string に格納されている文字列を先頭から調べ、数値でない文字に
出会うまでの文字列を数値に転換します。
 例を挙げればstring 引数が「2020年 東京オリンピック 平成32年」で、あれば
parseFloat(string);で 2020 が返ります。2020以降の文字列は数値があっても無視されます。
パラメータ
string ： 解析される文字列  // 必須
戻り値
 変換された数値（浮動小数点数）。
先頭の文字が数値でない文字の場合は NaN
詳細
　この関数は引数　string の文字列を最初の文字から走査して、
数値でない文字が出現するまでの文字列を数値に変換します。
 ここでの数値と、される文字は文字列先頭の正負記号（＋,−）、と数字、小数点
数値を指数表現 (指数関数) で表示する時に使う "e"などです。
 文字列の前後に空白があってもOKですが
文字列の中に空白があるとそこで中断されてしまいます。
 parseInt関数と違って少数点以下の切り捨てはありません。が
3.00 など小数点以下が 0の場合は 3に変換されます。
表示例
parseFloat(" 2020年  ")--> 2020
parseFloat("東京2020") --> NaN
parseFloat("12 34 56") --> 12
parseFloat("314e-2")   --> 3.14
parseFloat("-0077")    --> -77
parseFloat("--20px")   --> NaN
parseFloat(" ")        --> NaN
お試し入力  parseFloat(string) parseFloat（ ） 　//　ここに結果を表示


ロリポップ！のドメインは選べる全８５種類！！
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』

サンプルソース


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>parseFloat()関数</title>
<script type="text/javascript">
<!--
  function txtCng(){
   Tstr01=document.getElementById("tBox01").value;
    document.getElementById("kekka").innerHTML=parseFloat(Tstr01);
     }
 // -->
 </script>
 </head>
 <body>
  <form>
   <fieldset> <!--フォームの要素の周りに枠線-->
    <legend>お試し入力</legend> <!--fieldset要素へ表題を定義-->
  parseFloat <input type="text" size="10" id="tBox01" />
 &nbsp;//&nbsp;&nbsp;<span id="kekka">ここに結果を表示</span>
  <br />
 <input type="button" value="変換" onclick="txtCng()" />
 <br />
</fieldset>
</form>
</body>
</html>
<input type="text" /> の値に parseFloat()関数
テキストボックスを使って計算
+
フォームのテキスト入力ボックスは数値を入力しても文字列として扱われるので
parseFloat()関数で数値に変換します。
因みに変換しないで結果をだすと文字列連結になります。// 12+23=1234
JavaScript：
function keisan(){
numA=document.getElementById("inA").value;
 numA=parseFloat(numA);
  numB=document.getElementById("inB").value;
   numB=parseFloat(numB);
 document.getElementById("inC").value=numA+numB;
   }
HTML：
<form name="fm">
<input size="15" type="text" id="inA" />+
<input size="15" type="text" id="inB" />
<input type="button" value="=" onclick="keisan()" />
<input size="15" type="text" id="inC" />
  </form>
javascriptで電卓も参考に どうぞ......
posted by javaScript at 23:26 | 大阪 ☁ | Javascript 構文 関数 ステートメント | このブログの読者になる | 更新情報をチェックする
- 1 2 3 4 5.. >>
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。