javascript_javascriptスキルでCSSを使う際の注意点まとめ

1. 単一要素のスタイルを変更する場合、スタイル オブジェクトの構文は CSS で使用される構文とほぼ 1 対 1 で対応することに注意してください。ただし、ハイフンを含む属性は「キャメル キャスト」の形式に置き換えられます。たとえば、font-size は fontSize になり、margin-top は
2 になります。 JavaScript では予約語である style.float を使用して style.cssFloat に変更することはできません (IE では style.styleFloat を使用します)。
3. 要素の計算されたスタイルを取得します。
W3C DOM では、次のことができます。 >

コードをコピー コードは次のとおりです:

varHeading = document.getElementById ("Heading") ;
var computedStyle = document.defaultView.getComputedStyle(Heading,null);
var computedFontFamily = computedStyle.fontFamily;//sans-serif

IE は DOM 標準の使用をサポートしていません

コードをコピーします コードは次のとおりです:

varHeading = document.getElementById("Heading");
var computedFontFamily =Heading.currentStyle.fontFamily;//sans-serif

上記のメソッドに基づいて、クロスブラウザ関数を作成できます。

コードをコピー コードは次のとおりです。

function rememberComputedStyle(element,styleProperty){
var computedStyle = null ;
if(typeof element.currentStyle != "未定義"){
computedStyle = element.currentStyle;
}else{
computedStyle = document.defaultView.getComputedStyle(要素,null);
}
return computedStyle[styleProperty]


对照表

CSS Properties To JavaScript Reference Conversion

CSS Property	JavaScript Reference
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
clip	clip
color	color
cursor	cursor
display	display
filter	filter
font	font
font-family	fontFamily
font-size	fontSize
font-variant	fontVariant
font-weight	fontWeight
height	height
left	left
letter-spacing	letterSpacing
line-height	lineHeight
list-style	listStyle
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style-type	listStyleType
マージン	マージン
マージン-ボトム	marginBottom
マージン左	マージン左
マージン右	マージン右
マージントップ	マージントップ
オーバーフロー	オーバーフロー
パディング	パディング
パディングボトム	paddingBottom
左詰め	paddingLeft
右パディング	右パディング
パディングトップ	パディングトップ
改ページ後	pageBreakAfter
改ページ前	pageBreakBefore
位置	位置
フロート	スタイルフロート
テキスト整列	textAlign
テキスト装飾	テキスト装飾
テキスト装飾: 点滅	textDecorationBlink
テキスト装飾: ラインスルー	textDecorationLineThrough
テキスト装飾: なし	テキスト装飾なし
テキスト装飾: 上線	textDecorationOverline
テキスト装飾: 下線	textDecorationUnderline
テキストインデント	textIndent
テキスト変換	textTransform
トップ	トップ
垂直整列	verticalAlign
可視性	可視性
幅	幅
z-インデックス	zIndex

使用法

Internet Explorer

document.all.div_id.style.JS_property_reference = "new_CSS_property_value";

古い Netscape (4.7 以前)

document.div_id.JS_property_reference = "new_CSS_property_value";

Netscape 6.0 および Opera (およびその他の Mozilla)

document.getElementById(div_id).style.JS_property_reference = "new_CSS_property_value";

新しい Mozilla の「getElementById()」リファレンスでは、角括弧の代わりに括弧が使用されていることに注意してください。