Javascriptとcssを組み合わせて、鉄板のwebシステムを創るのが得意な、ユゲタです。
初期設定データは、ブラウザ内部にWebSQLDatabaseが使えるようになったらしいですが、現時点でまだまだ未対応ブラウザがあるので、現実的ではありません。
そもそも、safariが使えない時点で、iPhone壊滅ですからね。
なので、jsonデータをajaxで読み込む方式が、まだまだ鉄板設計ですね。
fetchもいいですが、callbackさえ気をつければ安定利用できるajaxは、捨てがたいです。
そして、cssも内部プロパティ変数を使えてプログラミング構造体として表示初期設定として使えるため、この値を取得したいと考えて、linkタグで設置されているcssファイル（styleタグで設置されているcssも対象）の値を取得するclassを作ったので、公開します。
ソースコード
export class Style{
search_value(selector , property , sheets){
sheets = sheets || document.styleSheets
let val = ''
for(const sheet of sheets){
const res = this.get_rules(selector , property , sheet.cssRules)
val = res || val
}
return val
}
get_rules(selector , property , rules){
let val = ''
for(const rule of rules){
if(rule.href){
const res = this.get_rules(selector , property , rule.styleSheet.cssRules)
val = res || val
}
else{
const res = this.get_value(selector , property , rule)
val = res || val
}
}
return val
}
get_value(selector , property , rule){
if(rule.selectorText === selector){
const reg = new RegExp(property+'(.*?):(.+?);')
const res = rule.cssText.match(reg)
return res && res.length && res[2] ? res[2] : ''
}
}
}
使い方
上記を実行するjavascriptでimportして、次のように書くことで、cssファイル内の任意の値を取得することができます。
:root{
--size : 100px;
--color : red;
}
import { Style } from './style.js'
const style = new Style()
const color = style.search_value(':root' , '--color')
const size = style.search_value(':root' , '--size')
console.log(size , color)
> '100px' , 'red'
Styleクラスをインスタンス化して、search_valueの引数に、selector , propertyを入れることで、該当する値を返してくれます。
注意点
基本的に、同一ドメインのcssファイル読み込みのみ対象です。
外部ドメインだおｔ、ブラウザのセキュリティに引っかかって値が取得できません。
あと、selectorは完全マッチするように記述してください。:rootなどで管理するとややこしくならないと思いますよ。
あとがき
またもや、今後便利に使えるスニペットを作ってしまった・・・
自分でよく使うライブラリが溜まっていくのは、なんだかコレクションが増えていく感覚で楽しいですね。
ちなみに、このライブラリ、機能が全然足りていなくて、javascriptから、cssの値を変更（登録）したり、削除したりできるようになると、システム利用時にデータベース代わりに使えるようになるので、今後そういう機能追加をしていく予定です。
MVCのVライブラリとしてかなり使える手応えを掴んだソースコードでした。
0 件のコメント:
コメントを投稿