2014年01月16日

cssTextプロパティ

スポンサード リンク

 要素のスタイルの書き換え、変更 cssTextプロパティ
element.style.cssText

element.style.cssTextは、elementのプロパティ:値;の
スタイル情報を一括して取得、設定することができます。これを利用して
JavaScriptでスタイルの変更を一括して行います。
cssTextプロパティ
選択してください




変更後のプロパティ:値;
***

コロリポプラン 詳細はこちら
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)
イオンのオンラインショッピングサイト 〜 おうちでイオン イオンショップ 〜

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>cssTextプロパティ</title>
<!--動作に不要なコードは省略していることがあります-->
 <style type="text/css">
#wrapper{
   border: 1px solid gray; /* ボーダー : 幅,線種,色 */
   background:linear-gradient(white,#f0ffff); /* 色の線形グラデーション */
   margin: 10px;padding: 1px; /* 内側余白 */
   width: 500px; height: 180px; /* 表示ボックスの幅,高さ */
   position: relative; /* 相対配置 */
    }
 </style>
 <script>
var newVal = [ // 設定するプロパティ値(cssスタイル) 文字列で指定
 ["margin-top: 55px; text-align: center; font-size: 2.5em; color:#ff00ff;"],
 ["background-color:yellow; margin:20px; padding:10px; border:1px solid blue;"],
 ["background-color:violet; color:navy; padding:30px; font-size: 3.5em;"],
 ["position:absolute; bottom:10px; right:10px; border:3px dotted red;"],
 ["background-color:black; color:white; margin-top:100px; text-align:right;"],
  ];
function cngCss(num){
 var cssStr = newVal[num]; // 配列から値 取得
  var elem = document.getElementById("tgtBox");
   elem.style.cssText = cssStr; // プロパティ値 設定
    var cssStr = elem.style.cssText;//プロパティ値 取得
     document.getElementById("sDisp").innerHTML = cssStr; //プロパティ値 書き出し
         }
</script>
</head>
<body>
   <div id="wrapper">
    <div id="tgtBox" style="background-color:#33cccc;padding:3px;
   font-weight: bold; font-size:16px;">cssTextプロパティ
    </div>
   </div>
 <form>
  <fieldset style="border :none;">
 <legend>選択してください</legend>
<label><input type="radio" name="rdo" onclick="cngCss(0);" />
  マージン-上:55px; 文字色:#ff00ff;文字サイズ:2.5em;...</label><br />  
<label><input type="radio" name="rdo" onclick="cngCss(1);" />
  背景色:yellow;マージン:20px;枠線:1px solid blue;...</label><br />
<label><input type="radio" name="rdo" onclick="cngCss(2);" />
  背景色:violet;文字色:navy;文字サイズ:3.5em;...</label><br />
<label><input type="radio" name="rdo" onclick="cngCss(3);" />
  配置:absolute;下から:10px;右から:10px; 枠線:3px dotted red;</label><br />
<label><input type="radio" name="rdo" onclick="cngCss(4);" />
  背景色:black;文字色:white;文字寄せ:right;マージン-上:100px;...</label>
</fieldset>
</form>
<p>変更後のプロパティ:値;<br />
<span id="sDisp">ここに書き出し</span></p>
</body>
</html>
cssTextプロパティ
 スタイルルールの取得及び設定
取得
ここの プロパティ:値; 取得
<!-- html -->
  <div id="tgtBox"
style="color:navy;font-size:16px;width:200px;border:1px solid gray">
ここのプロパティ値 取得</div>
<!-- script -->
 var elem = document.getElementById("tgtBox");
  var cssStr = elem.style.cssText;// プロパティ:値; 取得


***
設定
ここの プロパティ:値; 変更
     // style で個別に指定
  var div = document.getElementById("tgtBox");
div.style.color ="white";
div.style.backgroundColor ="#660";
div.style.width ="200px";
div.style.padding ="10px";

    // style.cssText で纏めて指定
div.style.cssText="color:white;background-color:#660;width:200px;padding:5px";
複数のスタイルを変更する場合はこの方法がより有効です。
 ⇐トグルスイッチ
タグ:cssText
posted by javaScript at 23:59 | 大阪 ☁ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする

2014年01月09日

text-overflowプロパティ 省略記号に転換(…)

スポンサード リンク

 表示領域から、はみ出した文字列を省略記号に転換(…)
text-overflow:ellipsis;

ブロック要素に指定した幅を、超えたテキストを切り取り、代わりに
省略符号(…)を表示します。

@ text-overflow : ellipsis ;

サイトやブログをJavaScriptサンプル を使って動きのあるページに、スタイルシートで 見栄え良く装飾

A text-overflow : ellipsis ; "スタイルシート"の前で改行

サイトやブログをJavaScriptサンプル を使って動きのあるページに
スタイルシートで 見栄え良く装飾

B text-overflow : clip ;

サイトやブログをJavaScriptサンプル を使って動きのあるページに、スタイルシートで 見栄え良く装飾

C text-overflow : ellipsis ;  SPAN要素に適用

サイトやブログをJavaScriptサンプルを使って動きのあるページに、スタイルシートで 見栄え良く装飾

イオンのオンラインショッピングサイト 〜 おうちでイオン イオンショップ 〜
★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>text-overflowプロパティ</title>
 <style type="text/css">
.pClip, .pEllipsis, .wSpace{
    width: 325px; /* ボックス 横幅 */
    border: 1px solid skyblue; /* ボーダー : 幅,線種,色 */
    overflow: hidden; /* はみ出た部分を表示しない */
    white-space: nowrap; /* テキストの自動改行を禁止 */
       }
.pEllipsis{
    text-overflow: ellipsis; /* 省略符号を表示する */
     }
.pClip{
    text-overflow: clip; /* 省略符号を表示しない */
     }
.wSpace{
    white-space: normal; /* 規定値に戻し 自動改行を行う */
    text-overflow: clip; /* 省略符号なし*/
     }
.sPan{ color:red;     /* SPAN要素 */
   text-overflow: ellipsis;white-space: nowrap;
   display: block; overflow: hidden;
      }
</style>
</head>
<body>
  <p class="pEllipsis"><!--@-->
サイトやブログを<a href="#">JavaScriptサンプル</a>
を使って動きのあるページに、スタイルシートで 見栄え良く装飾</p>
  <p class="pEllipsis"><!--A-->
サイトやブログを<a href="#">JavaScriptサンプル</a>
を使って動きのあるページに、<br />スタイルシートで 見栄え良く装飾</p>
  <p class="pClip">    <!--B-->
サイトやブログを<a href="#">JavaScriptサンプル</a>
を使って動きのあるページに、スタイルシートで 見栄え良く装飾</p>
  <p class="wSpace">   <!--C-->
サイトやブログをJavaScript<span class="sPan">サンプル
を使って動きのあるページに、スタイルシートで</span> 見栄え良く装飾</p>
</body>
</html>
text-overflowプロパティ
指定した表示領域から溢れた(overflow)テキストを切り取り
残るテキストの文末に省略記号(…)「三点リーダ」を付け加えます。
 値の指定
text-overflow: ellipsis; /* 省略符号を表示する */
text-overflow: clip;     /* 省略符号を表示しない */
付帯する CSSの指定
white-space: nowrap; で、要素内のテキストの自動折り返しを禁止して
overflow: hidden;により、表示領域からはみ出したテキストを隠し、そして
text-overflow: ellipsis; で、はみ出した部分を省略記号で代替表示します。
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
SPAN要素などのインラインレベル要素には、display: block;を付け加えます。
white-space プロパティ
 連続する複数のスペース、タブを1つの半角スペース(空白)にまとめるか、改行を空白に変換するか
要素の中の文字列を、ボックスの端まできたら自動折り返しするか、 指定する際に使用します。
white-space
overflow プロパティ
  ブロック要素に指定した横幅・高さの 範囲から内容がはみ出した場合の
内容の表示方法を指定します
初期値は「visible」で、はみ出した内容も表示します。
overflow
posted by javaScript at 23:19 | 大阪 ☁ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

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