HTMLDOMスタイルtextDecorationStyleプロパティ
DOMスタイルのtextDecorationStyleプロパティは、HTMLドキュメントの要素のテキストでの行の表示方法を返し、変更します。
構文
以下は構文です-
-
textDecorationStyleを返す
object.style.textDecorationStyle
-
textDecorationStyleの変更
object.style.textDecorationStyle = “value”
値
ここで、値は-
になります。| 値 | 説明 |
|---|---|
| 継承 | このプロパティ値は親要素から継承されます。 |
| 初期 | このプロパティ値をデフォルト値に設定します。 |
| ソリッド | 線を実線で表示するだけです。 |
| double | 行を二重線として表示します。 |
| 点線 | 線を点線で表示するだけです。 |
| 破線 | 線を破線で表示します。 |
| 波状 | 線を波線として表示します。 |
例
スタイルtextDecorationStyleプロパティの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
text-decoration-line: underline;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style textDecorationStyle Property Example</h1>
<p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</p>
<button onclick="add()" class="btn">Change textDecorationStyle</button>
<script>
function add() {
document.querySelector('p').style.textDecorationStyle = "wavy";
}
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
「textDecorationStyleの変更」をクリックします 」ボタンをクリックして、段落テキストの装飾に使用する線のスタイルを変更します。
-
HTMLDOMスタイルtransformOriginプロパティ
HTML DOMスタイルのtransformOriginプロパティは、2Dまたは3D変換を返し、HTMLドキュメントの要素に適用します。 構文 以下は構文です- transformOriginを返す object.style.transformOrigin transformOriginの変更 object.style.transformOrigin = “value” 値 ここで、値は-になります。 値 説明 継承 このプロパティ値は親要素から継承されます。 初期 このプロパティ値をデフォルト値に設定します。 x軸y軸z軸 ビュー
-
HTMLDOMスタイルのcolumnGapプロパティ
HTML DOMスタイルのcolumnGapプロパティは、要素の列間のスペースを指定するために使用されます。 以下は、-の構文です。 columnGapプロパティの設定- object.style.columnGap = "length|normal|initial|inherit" 上記の特性は次のように説明されます- 値 説明 長さ 列間のギャップを設定するために使用される長さを指定する 通常 これは、列間のギャップを1emに指定するデフォルト値です。 初期 このプロパティを初期値に設定します。 継承 親プロパティ値を継承するには