その他：

Javascriptで変更したCSS属性をリセット

ページを読み込んだあとにJavascriptで操作して変更したCSSプロパティ値を、CSSファイルで指定されている元の状態に戻す。

Node
Nodeを指定 id値を文字列で指定してもよい
String
リセットするCSSプロパティを渡す 複数指定する場合は、第3引数、第4引数…と続けることも可
【省略した場合は以下の全てをリセット】
  • position
  • display
  • visibility
  • top
  • right
  • bottom
  • left
  • width
  • height
  • margin
  • padding
  • max-width
  • min-width
  • max-height
  • min-height
  • color
  • font
  • text-align
  • vertical-align
  • text-decoration
  • text-indent
  • text-transform
  • line-height
  • letter-spacing
  • word-spacing
  • white-space
  • list-style
  • opacity
  • filter
  • border
  • border-radius
  • background
  • overflow
  • float
  • clear
  • cursor
  • clip
  • scroll-snap-type
  • scroll-snap-align
  • scroll-padding
  • scroll-margin
  • z-index
  • direction
  • transform
  • transition
  • animation
  • align-content
  • align-items
  • align-self
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • justify-content
  • order
●必須引数 ●オプション引数(省略可能)

記述例

$resetCSS($id('nodeId'))
$resetCSS('nodeId', 'left')
$resetCSS('nodeId', 'left', 'top', 'opacity')

注意点

font-sizeやborder-topなど、上記のリストにはない細かい設定に関しても、個別に指定すればリセットすることが可能。

動作サンプル

対象Nodeの各プロパティを変更したあと、リセットする。

対象Node
Node
Javascript : $id('target1').style.color='#000'; $id('target1').style.width='500px'; $id('target1').style.left='50px'; $id('target1').style.background='url(../images/bg_blue.svg) #8eb8bd'; $id('target1').style.fontSize='40px'; $id('target1').style.padding='40px 0 0'; $id('target1').style.height='80px'; $id('target1').style.zIndex='600'; $id('target1').style.display='none'; $resetCSS($id('target1'));

対象Node(画像)の各プロパティを変更したあと、リセットする。

Javascript : $id('target2').style.filter='contrast(140%) drop-shadow(#aaa 4px 5px 3px)'; $id('target2').style.width='500px'; $id('target2').style.borderRadius='60px'; $id('target2').style.border='15px solid #bdb88e'; $resetCSS('target2');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。