HTML DOM Styleオブジェクト

Styleオブジェクト

Styleオブジェクトは単独のスタイル宣言を表します。

Styleオブジェクト属性

属性 説明
alignContent フレックスコンテナ内の行間のアライメント方法を設定または返します。項目がすべての利用可能なスペースを使用していない場合に適用されます。
alignItems フレックスコンテナ内の項目のアライメント方法を設定または返します。
alignSelf フレックスコンテナ内の選択された項目のアライメント方法を設定または返します。
animation すべてのアニメーション属性の短縮属性、animationPlayState属性を除きます。
animationDelay アニメーションがどのタイミングで開始するかを設定または返します。
animationDirection アニメーションが反復ループの際に逆方向に再生するかどうかを設定または返します。
animationDuration アニメーションが一周期完成するのに必要な秒数またはミリ秒数を設定または返します。
animationFillMode アニメーションが実行時間外に適用される値を設定または返します。
animationIterationCount アニメーションが再生される回数を設定または返します。
animationName @keyframes アニメーションの名前を設定または返します。
animationPlayState アニメーションが実行中であるか、停止しているかを設定または返します。
animationTimingFunction アニメーションの速度曲線を設定または返します。
background 一つの宣言ですべての背景属性を設定または返します。
backgroundAttachment 背景画像が固定であるか、ページのスクロールに合わせるかを設定または返します。
backgroundClip 背景の描画エリアを設定または返します。
backgroundColor 要素の背景色を設定または返します。
backgroundImage 要素の背景画像を設定または返します。
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition 设置或返回背景图像的起始位置。
backgroundRepeat 设置或返回如何重复（平铺）背景图像。
backgroundOrigin 背景画像の定位エリアを設定または返します。
backgroundPosition 背景画像の開始位置を設定または返します。
backgroundRepeat 背景画像をどのように繰り返すか（タイル）を設定または返します。
backgroundSize 背景画像のサイズを設定または返します。
backfaceVisibility 要素がスクリーンに向いていない場合に表示されるかどうかを設定または返します。
borderBottom 一つの宣言ですべてのborderBottom属性を設定または返します。
下端框の色を設定または返します。 左下角端框の形状を設定または返します。
右下角端框の形状を設定または返します。 下端框のスタイルを設定または返します。
borderBottomWidth 下端框の幅を設定または返します。
borderCollapse テーブルの端框が単一の端框に折り込まれるべきかどうかを設定または返します。
borderColor 要素の端框の色（最大で4つの値を設定できます）を設定または返します。
borderImage すべてのborderImage属性を設定または返する簡略属性を用います。
borderImageOutset 端框画像エリアが端框ボックスを超える量を設定または返します。
borderImageRepeat 画像の端框が繰り返し、回転または伸びるかどうかを設定または返します。
borderImageSlice 画像の端框の内側オフセット量を設定または返します。
borderImageSource 端框として使用される画像を設定または返します。
borderImageWidth 画像の端框の幅を設定または返します。
borderLeft 一つの宣言ですべてのborderLeft属性を設定または返します。
borderLeftColor 左端框の色を設定または返します。
borderLeftStyle 左端框のスタイルを設定または返します。
borderLeftWidth 左端框の幅を設定または返します。
borderRadius すべての四个borderRadius属性の簡略属性を設定または返します。
borderRight 一つの宣言ですべてのborderRight属性を設定または返します。
borderRightColor 右端框の色を設定または返します。
borderRightStyle 右境界のスタイルを設定または返します。
borderRightWidth 右境界の幅を設定または返します。
borderSpacing テーブルのセル間のスペースを設定または返します。
borderStyle 要素の境界のスタイルを設定または返します（最大で4つの値を設定できます）。
borderTop borderTop 属性を一つの声明で設定または返します。
borderTopColor 上境界の色を設定または返します。
borderTopLeftRadius 左上角の境界の形状を設定または返します。
borderTopRightRadius 右上角の境界の形状を設定または返します。
borderTopStyle 上境界のスタイルを設定または返します。
borderTopWidth 上境界の幅を設定または返します。
borderWidth 要素の境界の幅を設定または返します（最大で4つの値を設定できます）。
bottom 定位要素の下部位置を設定または返します。
boxDecorationBreak 分ページ時の背景や境界の行動を設定または返します。
boxShadow 影を一つまたは複数附加します。
boxSizing 特定の要素が特定の領域にどのように適合するかを定義できます。
captionSide テーブルのキャプションの位置を設定または返します。
caretColor 挿入符号/カーソルの色を設定または返します。
clear 要素がフロートオブジェクトに対しての位置を設定または返します。
clip 定位要素のどの部分が見えるかを設定または返します。
color テキストの色を設定または返します。
columnCount 要素が割り当てられるべき列数を設定または返します。
columnFill 列にどうやって詰めるかを設定または返します。
columnGap 列間の間隔を設定または返します。
columnRule すべての columnRule 属性を設定または返す短縮属性です。
columnRuleColor 列間のルールの色を設定または返します。
columnRuleStyle 列間のルールのスタイルを設定または返します。
columnRuleWidth 列間のルールの幅を設定または返します。
columns columnWidth と columnCount を設定または返す短縮属性です。
columnSpan 要素が何列を跨ぐべきかを設定または返します。
columnWidth 列の幅を設定または返します。
content ':before'や':after'のパseudo要素と一緒に使用して生成された内容を挿入します。
counterIncrement 1つまたは複数のカウンタを増やします。
counterReset 1つまたは複数のカウンタを新規作成またはリセットします。
cursor マウスカーソルが表示するカーソルタイプを設定または返します。
direction テキストの方向を設定または返します。
display 要素の表示形式を設定または返します。
emptyCells 空のセルの枠線と背景を表示するかどうかを設定または返します。
filter 画像フィルタ（ぼかしや鮮度などの視覚効果）を設定または返します。
flex アイテムの長さを設定または返します。他の部分に対する相対的な長さです。
flexBasis エラストアイテムの初期長さを設定または返します。
flexDirection エラストアイテムの方向を設定または返します。
flexFlow flexDirection と flexWrap 属性のショートカット属性です。
flexGrow アイテムが他のアイテムに対して成長する量を設定または返します。
flexShrink アイテムが他のアイテムに対して収縮する方法を設定または返します。
flexWrap エラストアイテムが改行されるかどうかを設定または返します。
cssFloat 要素の水平アライメント方法を設定または返します。
font フォント属性を1つの宣言で設定または返します。
fontFamily テキストのフォントファミリーを設定または返します。
fontSize テキストのフォントサイズを設定または返します。
fontStyle フォントのスタイルが normal、italic、または oblique であるかどうかを設定または返します。
fontVariant フォントが小文字大文字で表示されるかどうかを設定または返します。
fontWeight フォントの太さを設定または返します。
fontSizeAdjust フォントリセットが発生した場合にテキストの可読性を維持します。
fontStretch フォントシリーズから伸縮変形方法を選択します。
hangingPunctuation 点字符号が行フレームの外に配置できるかどうかを指定します。
height 要素の高さを設定または返します。
hyphens 段落のレイアウトを改善するために単語をどのように分割するかを設定します。
icon 作者が要素のスタイルをアイコンの等価物を使用して設定できるようにします。
imageOrientation ユーザーエージェントが画像に適用する右方向または時計回りの回転を指定します。
isolation 要素が新しいスタックコンテンツを作成する必要があるかどうかを定義します。
justifyContent すべての利用可能なスペースを使用していない場合、エラストコンテナ内の要素間のアライメント方法を設定または返します。
left 定位要素の左側位置を設定または返します。
letterSpacing テキスト中の文字間のスペースを設定または返します。
lineHeight テキスト中の行間の距離を設定または返します。
listStyle リストスタイルを一つの宣言で設定または返します。
listStyleImage リストアイテムのマークとして画像を使用します。
listStylePosition リストアイテムのマークの場所を設定または返します。
listStyleType リストアイテムのマークのタイプを設定または返します。
margin 要素のマージンを設定または返します（最大で4つの値を設定できます）。
marginBottom 要素の下外側マージンを設定または返します。
marginLeft 要素の左外側マージンを設定または返します。
marginRight 要素の右外側マージンを設定または返します。
marginTop 要素の上外側マージンを設定または返します。
maxHeight 要素の最大高さを設定または返します。
maxWidth 要素の最大幅を設定または返します。
minHeight 要素の最小高さを設定または返します。
minWidth 要素の最小幅を設定または返します。
navDown 下矢印ナビゲーションキーを使用したときのナビゲーション位置を設定または返します。
navIndex 要素のジャンプ順序を設定または返します。
navLeft 左矢印ナビゲーションキーを使用したときのナビゲーション位置を設定または返します。
navRight 右矢印ナビゲーションキーを使用したときのナビゲーション位置を設定または返します。
navUp 上矢印ナビゲーションキーを使用したときのナビゲーション位置を設定または返します。
objectFit 被置換要素の内容が使用される高さと幅に基づいてどのようにフレームに適合するかを指定します。
objectPosition 被置換要素がフレーム内でどのように配置されるべきかを指定します。
opacity 要素の不透明度レベルを設定または返します。
order エラストアイテムが残りのアイテムに対する順序を設定または返します。
orphans ページの下部に残る必要がある要素の最小行数を設定または返します。
outline すべての outline 属性を一つの宣言で設定または返します。
outlineColor 要素の周囲の輪郭の色を設定または返します。
outlineOffset 輪郭をオフセットし、フレームの外側に描画します。
outlineStyle 要素の周囲の輪郭のスタイルを設定または返します。
outlineWidth 要素の周囲の輪郭の幅を設定または返します。
overflow 要素のフレーム外に表示される内容の処理方法を設定または返します。
overflowX コンテンツエリアを超えた左/右エッジの処理方法を定義します。
overflowY 内容が要素の内容エリアを溢した場合に、どのように処理するかを指定します。
padding 要素の内余白（最大で4つの値を設定できます）を設定または返します。
paddingBottom 要素の下内余白を設定または返します。
paddingLeft 要素の左内余白を設定または返します。
paddingRight 要素の右内余白を設定または返します。
paddingTop 要素の上内余白を設定または返します。
pageBreakAfter 要素後に発生すべきページング動作を設定または返します。
pageBreakBefore 要素前に発生すべきページング動作を設定または返します。
pageBreakInside 要素内のページング動作を設定または返します。
perspective 3D要素をどのように見るかに関する情報を設定または返します。
perspectiveOrigin 3D要素の底の位置を設定または返します。
position 要素の定位方法のタイプ（静的、相対的、絶対的、固定）を設定または返します。
quotes インラインクォートのクォートタイプを設定または返します。
resize 要素がユーザーによって調整可能かどうかを設定または返します。
right 定位要素の右側の位置を設定または返します。
scrollBehavior ユーザーがスクロール可能なフレーム内のリンクをクリックしたとき、スムーズなスクロールアニメーションが発生するかどうかを設定または返します。
tableLayout テーブルのセル、行、列のレイアウト方法を設定または返します。
tabSize タブの長さを設定または返します。
textAlign テキストの水平アライメント方法を設定または返します。
textAlignLast text-alignが"justify"のとき、最後の行や強制改行前の行がどのようにアライメントされるかを設定または返します。
textDecoration テキストの装飾を設定または返します。
textDecorationColor テキストの装飾中の色を設定または返します。
textDecorationLine テキストの装飾中のラインの種類を設定または返します。
textDecorationStyle テキストの装飾中のラインのスタイルを設定または返します。
textIndent 最初の行のテキストのインデントを設定または返します。
textJustify text-alignが"justify"のときに使用するアライメント方法を設定または返します。
textOverflow テキストが含む要素に溢出した場合に発生すべき動作を設定または返します。
textShadow テキストの影効果を設定または返します。
textTransform テキストの大文字と小文字を設定または返します。
top 定位要素のトップ位置を設定または返します。
transform 要素に2Dまたは3D変換を適用します。
transformOrigin 変換された要素の位置を設定または返します。
transformStyle 3D空間内でのネストされた要素のレンダリング方法を設定または返します。
transition 4つの変換属性を設定または返す短縮属性です。
transitionProperty トランジション効果のCSS属性を設定または返します。
transitionDuration トランジション効果が完了するまでの秒数またはミリ秒を設定または返します。
transitionTimingFunction トランジション効果の速度曲線を設定または返します。
transitionDelay トランジション効果がどのタイミングで始まるかを設定または返します。
unicodeBidi 同一ドキュメント内の複数の言語をサポートするためにテキストを覆うべきかどうかを設定または返します。
userSelect 要素のテキストを選択できるかどうかを設定または返します。
verticalAlign 要素内の内容の垂直アライメントを設定または返します。
visibility 要素が可視であるかどうかを設定または返します。
whiteSpace テキスト内のタブ、改行符、スペースの処理方法を設定または返します。
width 要素の幅を設定または返します。
wordBreak 非CJK文字の改行ルールを設定または返します。
wordSpacing テキスト内の単語間のスペースを設定または返します。
wordWrap 長い、中断できない単語を次の行に折り返すことを許可します。
widows ページのトップに見える要素の最小行数を設定または返します。
zIndex 定位要素のスタック順序を設定または返します。

Styleオブジェクトのアクセス

ドキュメントのヘッダー部分または具体的なHTML要素からStyleオブジェクトにアクセスできます。

例1

ドキュメントのヘッダー部分からスタイルオブジェクトにアクセスします：

var x = document.getElementsByTagName("STYLE");

実際に試してみる

例2

指定された要素のスタイルオブジェクトにアクセスします：

var x = document.getElementById("myH1").style;

実際に試してみる

Style オブジェクトの作成

例1

document.createElement() メソッドを使用して <style> 要素を作成できます：

var x = document.createElement("STYLE");

実際に試してみる

例2

既存の要素のスタイル属性を設定することもできます：

document.getElementById("myH1").style.color = "red";

実際に試してみる

関連ページ

HTML 教程：HTML CSS

CSS 教程：CSS 教程

HTML リファレンスマニュアル：HTML <style> タグ

CSS リファレンスマニュアル：CSS 属性