#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. OtherTips › change css

Change CSS

ページのスタイルを変更

素材配布サイトなどで、文字や画像をイメージし易いように使われるJavaScriptです。
色んな記述の仕方が有りますが、当サイトで使っている変更方法です。
下記の方法は、背景だけではなく 文字やその他のプロパティ(セレクタに付ける効果)も変更することが出来ます。

先ず、変更したいcssをページ内に記述します。記述する箇所は、①外部cssファイルを読み込む②<head>内の<style>要素に書く③インラインに書く,の方法が有りますが、②番の方法で説明致します。

htmlの<head>~</head>までの間に、スタイルシートを記述します。

<style type="text/css">
<!--
.任意のクラス名 {
変更したいプロパティ: 値;
変更したいプロパティ: 値;
}
-->
</style>

幾つも有る場合は、変更したいプロパティ値を増やして下さい。
次に、変更する要素に任意のidを付けておきます。

<div id="任意のid">変更するボックス</div>

上記ではdiv要素に任意のidを付けています。
このid名の付いたボックス内を変更する場合、下記のようにJavaScriptを記述して下さい。


<input type="button" value="ボタンに表示する文字" onclick="document.getElementById('任意のid').className='任意のクラス名';">


<a href="javascript:void(0)" onclick="document.getElementById('任意のid').className='任意のクラス名'; return false;">
<img src="画像のurl" width="横幅" height="高さ" alt="画像の名前"></a>

例:
<head>から</head>内のスタイルシート

<style type="text/css">
<!--
.style-a{
background: url(画像のurl) fixed repeat top center;
color: #9900cc;
font-size: 14px;
}
.style-b{
background-color: #ffffff;
background-image: url(画像のurl);
background-repeat: repeat-y;
background-position: 90%;
color: #009966;
font-size: 12px;
}
-->
</style>

例:
<div id="sample-box">

ボタンの場合
<input type="button" value="ボタンに表示する文字" onclick="document.getElementById('sample-box').className='style-a';">

画像の場合:
<a href="javascript:void(0)" onclick="document.getElementById('sample-box').className='style-b'; return false;">
<img src="画像のurl" width="横幅" height="高さ" alt="画像の名前"></a>

画像 ← style-bに変更

</div>

Background-image *DivReset*

BODYのスタイルを変更

文書の本体であるbody要素のスタイルを変更するJavaScriptです。
divの場合と同様、htmlの<head>~</head>までの間にスタイルを記述した後、以下をhtmlの必要な場所に入れて下さい。

例:
<head>から</head>内のスタイルシート

<style type="text/css">
<!--
.style-c{
background: url(画像のurl) fixed repeat top center;
color: #cc0000;
font-size: 12px;
}
.style-d{
background: url(画像のurl) fixed repeat top center;
color: #0066cc;
font-size: 14px;
}
-->
</style>

ボタンの場合:
<input type="button" value="ボタンに表示する文字" onclick="document.getElementsByTagName('body')[0].className='任意のクラス名';">

画像の場合:
<a href="javascript:void(0)" onclick="document.getElementsByTagName('body')[0].className='任意のクラス名'; return false;">
<img src="画像のurl" width="横幅" height="高さ" alt="画像の名前"></a>

画像 ← style-dに変更

Background-image *BodyReset*