style.quotesプロパティ

style.quotesは、要素のスタイル属性のquotesプロパティの値を取得、もしくは、設定するプロパティ。

quotesプロパティは、引用符を指定することができる。

構文

取得

var $quotes = $elementReference.style.quotes;

戻り値

要素のスタイル属性のquotesプロパティの値。

設定

初期設定値は「none」。

入れ子指定なし

$elementReference.style.quotes = "'開始引用符' '終了引用符'";

入れ子指定あり

$elementReference.style.quotes = "'開始引用符A' '終了引用符A' '開始引用符B' '終了引用符B' '開始引用符C' '終了引用符C'";

引用符なし

引用符を表示しない。

$elementReference.style.quotes = "none";

継承

親要素の設定を継承。

$elementReference.style.quotes = "inherit";

サンプル



サンプルのquotesプロパティの値:

これは引用符サンプルです。
開始引用符A 開始引用符B 開始引用符C 終了引用符C 終了引用符B 終了引用符A

サンプルの動作について

各ボタンをクリックすると、ボタン名のテキストを「quotesプロパティ」の値に設定する。設定値を「サンプルのquotesプロパティの値:」の右横に表示する。サンプル要素内の引用符<q></q>を、指定した引用符に置き換える。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setQuotes( $quotes ) {
 var $element = document.getElementById( "sample" );
 $element.style.quotes = $quotes;
 var $quotes = $element.style.quotes;
 document.getElementById( "sampleOutput" ).innerHTML = $quotes;
}
</script>

HTML

<button onclick="setQuotes('none');">none</button>
<button onclick="setQuotes('inherit');">inherit</button>
<br />
<button onclick="setQuotes(''「' '」'');">'「' '」'</button>
<button onclick="setQuotes(''「' '」' '『' '』'');">'「' '」' '『' '』'</button>
<button onclick="setQuotes(''{' '}' '[' ']' '(' ')'');">'{' '}' '[' ']' '(' ')'</button>
<br />
<p>サンプルのquotesプロパティの値:<span id="sampleOutput"></span></p>
<p id="sample" style="font-size: 16px; border: 1px solid red; background-color: yellow;">
 <q>これは<q>引用符</q><q>サンプル</q>です。</q>
 <br />
 <q>開始引用符A <q>開始引用符B <q>開始引用符C 終了引用符C</q> 終了引用符B</q> 終了引用符A</q>
</p>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, テキスト, プロパティ, リファレンス パーマリンク