style.quotesは、要素のスタイル属性のquotesプロパティの値を取得、もしくは、設定するプロパティ。
quotesプロパティは、引用符を指定することができる。
構文
取得
var $quotes = $elementReference.style.quotes;
戻り値
要素のスタイル属性のquotesプロパティの値。
設定
初期設定値は「none」。
入れ子指定なし
$elementReference.style.quotes = "'開始引用符' '終了引用符'";
入れ子指定あり
$elementReference.style.quotes = "'開始引用符Ａ' '終了引用符Ａ' '開始引用符Ｂ' '終了引用符Ｂ' '開始引用符Ｃ' '終了引用符Ｃ'";
引用符なし
引用符を表示しない。
$elementReference.style.quotes = "none";
継承
親要素の設定を継承。
$elementReference.style.quotes = "inherit";
サンプル
サンプルのquotesプロパティの値：
これは
引用符
のサンプル
です。
開始引用符Ａ
開始引用符Ｂ
終了引用符Ａ開始引用符Ｃ 終了引用符Ｃ
終了引用符Ｂ
サンプルの動作について
各ボタンをクリックすると、ボタン名のテキストを「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>
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>開始引用符Ａ <q>開始引用符Ｂ <q>開始引用符Ｃ 終了引用符Ｃ</q> 終了引用符Ｂ</q> 終了引用符Ａ</q>
</p>
<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>開始引用符Ａ <q>開始引用符Ｂ <q>開始引用符Ｃ 終了引用符Ｃ</q> 終了引用符Ｂ</q> 終了引用符Ａ</q>
</p>