外部CSSをJavascriptで取得する・実際に表示されている情報をJavascriptで取得する

3879 回閲覧 このエントリーをはてなブックマークする この記事のブックマークユーザー 永続的リンク2007/11/01 01:24:04 カテゴリ: CSS, JavaScript
スポンサード リンク
frasco

 外部CSSを作成し、ID=’test’で定義したタグのcssのプロパティを取得しようと、通常の通り
 

document.getElementById(’test’).style.プロパティ名

でいけると思ったら、取得できない・・・・。

style.elementはHTMLタグでスタイル属性が定義されていないと取得出来ないとだそうで・・・。
ググッて取得方法、発見しました。
それをもとに色々すこし作ってみました。


方法は二つ。
一つ目は、スタイルシートにアクセスして取得する方法。
二つ目は、実際に表示されているものを取得する方法。
 

1の方法は、

document.styleSheets.item()

を使用します。item()のパラメータには読み出すスタイルシートの順番を指定する。※0から始まる。
 そして、指定したスタイルシートから取得したいスタイルを

cssRules.item()

をつかって取得する位置を指定する。IEの場合は、

rules.item()

を使う。

上記で取得できるのは、実際にファイルで定義されているものです。
それとは異なり、実際に表示されている値を取得する方法が二つ目の方法です。

 

document.defaultView.getComputedStyle()

により実際に表示されている値を取得できます。取得するプロパティ名は

getPropertyValue()

で指定する。
IEはHTMLタグオブジェクトの

currentStyle.getAttribute()

をつかって取得する。
※DOMが使用できないブラウザ、古いブラウザでは利用不可。
※とも、IE6、IE7,Firefox2.0.08,Opera9.2.1では動作確認済み。それ以外はとりあえず、不明。

今回これを使いたいとおもったのは、
下記のURLの灰色の背景の中写真が大きくなったり、文章が長くなっても、文章のところにスクロールバーを出して一定のサイズのなかで収まるようにしたかったので。
javascriptを触らず、スタイルシートを変更するだけで・・って思ったら、上記みたいなことがやりたいとおもい、それを使ってつくってみた。

サンプル

CSSファイル→cssファイル

JSファイル→jsファイル

参考URL
スタイルシートにアクセスする 外部スタイルシートで定義した情報を参照したい

 →ツイッターのフォローはこちら
スポンサード リンク
         

関連記事

↑ページ上部へ

アクセスカウンター

今日 : 3 昨日 : 2

ブログ内容

主にウェブ関係のことを書いてます。たまにブレイクダンスとか他のことも書いています。

プロフィール

MICK

MICKです。

1983年1月24日生まれ。ウェブの世界にいるのは、偶然のようで必然なのかも。

好きなこと :
 挑戦すること。物事に没頭すること。勉強すること。
嫌いなこと :
 自慢話を聞くこと。人の悪口を言うこと。

運営サイト

      

カテゴリ一覧

サイト広告

オススメの書籍とか

感想

紹介

色々

最近のコメント

最新記事

注目記事

人気記事

最近の人気記事

人気の記事

関連サイト

運営サイト

色々

最近のトラックバック