ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方【Javascript】エラーチェックをする方法【Javascript】変数【Javascript】配列(Array)【Javascript】「DOM(Document Object Model)」の使い方【Javascript】関数 / Function【Javascript】条件分岐・繰り返し【Javascript】イベントハンドラー(Event Handler)【Javascript】文字の操作方法【Javascript】文字の検索方法【Javascript】スコープ【Javascript】ファイルの操作方法【Javascript】画像の操作方法【Javascript】情報を出力・チェックする方法【Javascript】ヒアドキュメントの使い方【Javascript】Built-in Object(ビルトインオブジェクト)【Javascript】ライブラリー / Library
Library
「Ajax」の使い方
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法
Reference
数字
【Javascrpt】計算に誤差が出る時の解決方法
ファイル読み込み
【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
イベント
【Javascrpt】ページ読み込み時に「Javascript」を実行する方法【Javascrpt】画像読み込みが完了してから、次の処理を実行する方法【Javascrpt】「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
【Javascrpt】HTMLタグの「class」属性値を取得、変更する方法【Javascrpt】「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法【Javascrpt】「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法【Javascrpt】「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法【Javascrpt】「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法【Javascrpt】「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法【Javascrpt】「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法【Javascript】「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する【Javascript】「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
【Javascript】Webページのタイトルを変更する方法【Javascript】「モニター」情報を取得する方法【Javascript】「ブラウザ」情報を取得する方法【Javascript】「ページ」情報を取得する方法【Javascript】「イベント」情報を取得する方法【Javascript】「マウス」情報を取得する方法
サイズ関連
【Javascript】要素の縦・横サイズを参照・変更する方法【Javascript】「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
【Javascript】スマートフォンからのアクセスを識別する方法





スタイル属性(色・線・大きさなど)を参照・変更する方法


Javascriptでは、CSSのスタイル属性を変更できるので、
「背景色」「画像」「レイアウト」「テキスト」などの変更が簡単にできる。






スタイル属性を変更する書式


「Javascript」で、「Style」を利用してレイアウトを変更するには、
「style」オブジェクトとプロパティを利用して、
スタイル属性の参照と設定を行う。


数値の指定の場合、「px」など単位を指定しないと、
反応してくれない。



スタイル属性を変更するサンプルコード


var 変数名 = window.document.querySelector('#ID名').style.スタイル属性="値";
var 変数名 = window.document.getElementById("ID名").style.スタイル属性="値";


window.document.querySelector('#ID名').style.width="100px";
window.document.querySelector('#ID名').style.backgroundColor="#ffffff";
window.document.getElementById("ID名").style.width="100px";
window.document.getElementById("ID名").style.backgroundColor="#ffffff";




スタイル属性のプロパティ一覧

要素スタイルの参照・設定。
background背景関連
backgroundAttachmentスクロール時の背景動作
backgroundColor背景色
backgroundImage背景画像
backgroundPosition背景画像位置
backgroundPositionX背景画像位置
backgroundPositionY背景画像位置
backgroundRepeat背景画像の繰り返し
borderボーダー関連
borderColorボーダー色
borderStyleボーダースタイル
borderWidthボーダーの太さ
clearテキストの回りこみ解除
clip表示範囲
colorテキストの色
cssTextスタイルシート
cursorカーソル
display表示形式
filterフィルタ
fontフォント関連
fontFamilyフォント
fontSizeフォントサイズ
fontStyleフォントスタイル
fontVariantアルファベットの大文字化
fontWeightフォントの太さ
height高さ
left左からの位置
letterSpacing文字間スペース
lineHeight行の高さ
listStyleリストのスタイル
listStyleImageリストのスタイルイメージ
listStylePositionリストのスタイル位置
listStyleTypeリストのスタイルタイプ
marginマージン関連
marginBottom下マージン
marginLeft左マージン
marginRight右マージン
marginTop上マージン
overflowスクロールバー制御
paddingBottom下パディング
paddingLeft左パディング
paddingRight右パディング
paddingTop上パディング
pageBreakAfter改ページ
pageBreakBefore改ページ
pixelHeight高さ
pixelLeft左からの位置
pixelTop上からの位置
pixelWidth
posHeight高さ
position配置方式
posLeft左からの位置
posTop上からの位置
posWidth
styleFloat回り込み配置
textAlignテキストの表示位置
textDecorationテキスト修飾
textDecorationBlinkテキスト修飾
textDecorationLineThroughテキスト修飾
textDecorationNoneテキスト修飾
textDecorationOverlineテキスト修飾
textDecorationUnderlineテキスト修飾
textIndentテキストのインデント
textTransform単語の先頭の大文字化
top上からの位置
verticalAlign縦方向のテキスト位置
visibility可視・不可視
width
zIndex重なり順序


Back