Javascript/style

解説 css要素を追加
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 - 重なり順序
sample1

s1p

sample1code
function s1Func(){
  var s1p = document.getElementById("s1p");
  s1p.style.color = "red";
}
sample2

s2p

sample2code
window.onload = function(){
  var s2p = document.getElementById("s2p");
  s2p.addEventListener("click", function(){
  	if(s2p.style.color == "navy"){
  	  s2p.style.color = "orange";
  	} else if(s2p.style.color == "orange"){
  	  s2p.style.color = "navy";
  	} else {
  	  s2p.style.color = "navy";
  	}
  });
}
	
sample3
s3Div
sample3code
var s3Div = document.getElementById("s3Div");
var s3Btn = document.getElementById("s3Btn");
s3Div.style.position = "relative";
s3Div.style.left = "0px";
s3Btn.onclick = function s3Func(){
  s3Div.style.left = parseInt(s3Div.style.left) + 10 + "px";
}
	
sample4
sample4code
document.getElementById("s4Btn01").style.backgroundColor = "#711177";
document.getElementById("s4Btn02").style.backgroundColor = "#dd222d";
document.getElementById("s4Btn03").style.backgroundColor = "#fff333";
var s4Btn = document.getElementsByClassName("s4Btn");
for(var i=0; i
sample5

aaa

bbb

ccc

ddd

eee

sample5code
var s5Flg = 0;
function s5Func(){
  var s5Div = document.getElementById("s5Div");
  if(s5Flg == 0){
  	s5Div.style.height = "auto";
  	s5Flg = 1;
  } else {
  	s5Div.style.height = "100px";
  	s5Flg = 0;
  }
}
s5Div.addEventListener("click", s5Func);