Javascript , Javascript

2006年02月20日 はてなブックマーク livedoorクリップ

Style設定ライブラリ(style.js)

javascriptでスタイルの設定・削除をシンプルに行う為のライブラリ。

[メリット]

1.特定のオブジェクト(を含む)以下の指定したタグに対して自由にスタイルを設定できる。
2.オブジェクトだけでなく、”ID”の名称のみでもアクセス可能(利便性)。
3.その他、利便性の高いメソッド。
4.全てstaticにアクセスできる為、わざわざオブジェクトを作成する必要なし。
5.スタイルの削除も可能(HTMLのタグ内で直に指定したスタイルの削除も可)。

[ダウンロード]

・Style.js(ver1.1.0)・・・スタイル設定ライブラリ(※utf-8)[公開中止]


[簡単な使用例]

Style.[メソッド名]でアクセスします。

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" charset="utf-8" src="./style.js"></script>
<script type="text/javascript">
function init(){
Style.initMAP(document); /*1*/
Style.setMAP('id1', 5, 5); /*2*/
Style.setMAP('id2', '0px', '3px 8px 3px 8px'); /*3*/
Style.set('id1', 'border', 'solid #DDDDDD 1px'); /*4*/
Style.setInnerTag('id2', 'p', 'color', 'red'); /*5*/
Style.removeAll('id2'); /*6*/
}
</script>

</HEAD>
<BODY onLoad="init();">
<div id="id1">
<h1>title</h1>
<div id="id2">
<p>test1</p>
<p>test2</p>
</div>
</div>
</BODY>
</HTML>

/*1*/は、全てのタグのmarginとpaddingを'0px'で初期化しています。
/*2*/は、id='id1'のmarginとpaddingを設定しています(数字の場合、"px"に変換されます)。
/*3*/のように通常のmargin、paddingの書式で書くこともできます。
/*4*/では、ID(またはオブジェクト)に対して汎用的に全てのスタイルを記述できます。
/*5*/は、指定したタグのスタイルを設定しています(文字色を赤)。
/*6*/は、指定したIDの全てのスタイルを削除します。


[各メソッド一覧]

initMAP(element, myself) element - ID or オブジェクト
myselef - true or false(自分自身も対象にするか)
element以下の全てのタグのmarginとpaddingを'0px'で初期化する。
setMAP(element, margin, padding) element - 略
margin - marginの値
padding - paddingの値
elementに対するmarginとpaddingの設定(直接数値も可)
setMAPInnerTag(element, tag_name, margin, padding) element - 略
tag_name - 対象のタグ名('*'で全て)
margin - marginの値
padding - paddingの値
element以下指定したタグに対するmarginとpaddingの設定
setWAH(element, width, height) element - 略
width - 幅
margin - 高さ
element以下指定したタグに対するmarginとpaddingの設定(直接数値も可)
set(element, style, value) element - 略
style - スタイル名
value - スタイルに設定する値
汎用のスタイル設定(styleにはjavascriptでのスタイル名を指定する)
setInnerTag(element, tag_name, style, value) element - 略
tag_name - 対象のタグ名
style - スタイル名
value - スタイルに設定する値
element以下指定したタグに対する汎用スタイル設定
get(element, style) element - 略
style - スタイル名
elementに対するstyleの取得。オマケ
remove(element, style) element - 略
style - スタイル名
elementの指定したstyleの削除
removeInnerTag(element, tag_name, style) element - 略
tag_name - 対象のタグ名
style - スタイル名
element以下指定したタグに対するstyleの削除
removeAll(element) element - 略 elementの全てのスタイルの削除
removeAllInnerTag(element, tag_name) element - 略
tag_name - 対象のタグ名
element以下指定したタグに対する全てのスタイルの削除
_getElement(element) element - 略 内部メソッド。Prototype.jsでいうところの”$()”(の簡易版)。


[基本的な使い方]

・スタイルシートのmargin、padding設定の影響をなくす為、最初にinitMAP([id名])の使用を推奨。
・initMAP使用後、各々のID(タグ)に対してmargin、paddingを設定していきます。
・指定したID以下全てのタグに対して設定する場合は、tag_nameに'*'を入れます。
・initMAPを除き、ほとんどのメソッドは「element設定用」、「element以下のタグ設定用(elementを含まない)」の2種類あります。タグ用はメソッドの最後に"InnerTag"を追加した名称になっています。
・WAH、MAPは各々"width and height"、"margin and padding"の略です。initMAPを除き、必ずしもこのメソッドを利用する必要はなく、setメソッドで代用できます(行数を減らす目的のみです)。好みで使い分けてください。

[コラム]

スタイルシートでmarginやpaddingを設定している場合、ツールなど他サイトで使いまわすようなjavascriptはいちいち細かくまでスタイルを設定しなければなりませんでした。特に「特定のID以下の内部タグのスタイルを全て設定する」というのはかなり骨が折れ、さらにソースが美しくなくなります。なので、その部分を解消する為にこのライブラリを作成しました。最初が全てStyle.[メソッド名]で始まるので、結構ソースは綺麗に整いますよ。ま、まぁ処理速度は速くないです、はい。

[資料:styleで設定できる値の一覧]

background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
border
borderBottom
borderBottomColor
borderBottomStyle
borderBottomWidth
borderColor
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderStyle
borderTop
borderTopColor
borderTopStyle
borderTopWidth
borderWidth
bottom
captionSide
clear
clip
color
cursor
direction
display
emptyCells
float
font
fontFamily
fontSize
fontStretch
fontStyle
fontVariant
fontWeight
height
left
letterSpacing
lineHeight
listStyle
listStyleImage
listStylePosition
listStyleType
margin
marginBottom
marginLeft
marginRight
marginTop
maxHeight
maxWidth
minHeight
minWidth
overflow
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
position
right
scrollbar3dLightColor
scrollbarArrowColor
scrollbarBaseColor
scrollbarDarkshadowColor
scrollbarFaceColor
scrollbarHighlightColor
scrollbarShadowColor
scrollbarTrackColor
tableLayout
textAlign
textDecoration
textIndent
textTransform
top
verticalAlign
visibility
width
wordSpacing
zIndex


投稿者 shiz : 2006年02月20日 21:11

トラックバック

このエントリーのトラックバックURL:
http://mt.amonya.com/mt-tb.cgi/32

※トラックバックのリンク確認後に掲載させて頂きます。
(当エントリー又は当サイトへのリンクがない場合は掲載しません)

コメント
コメントしてください




保存しますか?