[過去ﾛｸﾞ] JavaScript の質問用スレッド vol.125 (1002ﾚｽ)
上下前次1-新
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
466(1): (ｵｯﾍﾟｹ Sr11-y+PC [126.194.240.154]) 2022/12/23(金)21:10 ID:2ps+kI7qr(2/3) AAS
>>465
で、>>450で参照したかったのは本当に別サーバ等のcssだったのか
それともhtmlやjsと同じ場所に置いてあるcssだったのかどっち？
467(1): (JP 0H11-JDfe [126.249.157.89]) 2022/12/23(金)21:19 ID:OG24yN7PH(5/5) AAS
>>466
ローカルで、同じフォルダ内です
468(1): (ﾜｯﾁｮｲ 1961-x3o1 [222.144.111.42]) 2022/12/23(金)21:28 ID:G5aj5uG70(1) AAS
@keyframesなんかも後のスタイルで再定義できるんだから
DOMにstyle要素追加してそこに上書きルール突っ込んでそっちを操作すればいいじゃない
469(1): (ｵｯﾍﾟｹ Sr11-y+PC [126.194.240.154]) 2022/12/23(金)21:39 ID:2ps+kI7qr(3/3) AAS
>>467
それは本来別オリジンではないんだけどブラウザがローカルアクセスに対するセキュリティの一環として制限をかけてる模様
詳しくはググって
>>459のスクリプトを実行して
file:///～
の行のあとに例外が出るならそれが原因
対策としてはローカルにwebサーバを立ててhttp経由でアクセスする
そうすればスクリプト実行で例外が発生せずcssの中身が読み取れる
webサーバはそんな大層なものは必要なくてvscodeのLiveServerで十分
470: (ﾜｯﾁｮｲ eecf-DiWi [153.174.224.39]) 2022/12/23(金)21:55 ID:gwhrrj9D0(1) AAS
DevTools を弄れるなら、要素タブでスタイル欄を見れば
適用内容と設定元のファイルが行番号付きで確認できるし
アニメーションを弄りたいなら、「その他のツール」に「アニメーション」がある（chrome）
471(1): (ﾜｯﾁｮｲ 1df0-aH43 [58.98.96.219]) 2022/12/24(土)09:52 ID:Lk0KbRC60(1) AAS
皆様いろいろありがとうございます
時間とれましたら確認させていただきます
472(1): (ｵｯﾍﾟｹ Sr37-r/3v [126.208.236.65]) 2022/12/24(土)10:46 ID:se6E0pPpr(1) AAS
>>471
少し調べたらchromeのオプションでクロスオリジン制約を回避する方法があった
chrome クロスオリジン
で検索
これならwebサーバを立てる必要もなくてお手軽
473: (ﾜｯﾁｮｲ b661-s0Sd [61.199.41.250]) 2022/12/24(土)14:27 ID:0WYu35VL0(1) AAS
firefoxもsecurity.fileuri.strict_origin_policyをfalseにすれば回避できるけど
早いうちにローカルサーバ立てることを覚えた方が後が楽になると思うよ
対象要素が１つなら@keyframes書き換えるよりWebAnimationAPI使った方がいいかもしれないし
やりたいことはぼかさずにはっきり書いた方がいいよ
474(2): (ﾜｯﾁｮｲ ef79-EkqE [220.150.90.192]) 2022/12/24(土)22:49 ID:oMpeQZG30(1) AAS
HTA(hta+ie)にとって替わるみたいな環境っていまだにないのかな
PWAみたいのではなく、javascript(やvbs)でWindowsのフレームワーク(.NETやCOMやら)と連携できるようなやつが欲しい
WebView2は思想的にHTAと比べて退化してるようにしか見えないけどこれぐらいなのか…
475(1): (ﾜｯﾁｮｲ fabd-ejFo [221.171.102.246]) 2022/12/25(日)03:50 ID:Y7ZN657d0(1) AAS
>>474
そういや前はちょっとしたツールを HTA で書いたりしたけど、もう使えない？
476: (JP 0H88-aH43 [126.249.157.89]) 2022/12/25(日)12:52 ID:GFtl9gAsH(1/5) AAS
皆さん、ありがとうございます
別シートのcssで可変にしたい部分を変数にし
読み込むシート側に変数専用のstyleタグを用意し
変数用のスタイルタグを編集することにしました
皆様いろいろとありがとうございました
477: (ｵｯﾍﾟｹ Sr37-r/3v [126.208.229.48]) 2022/12/25(日)13:14 ID:g8CAn8EMr(1) AAS
要するにクロスオリジン問題を解決して>>450を実現したのではなくて
別の方法を取ったということ？
478(2): (JP 0H88-aH43 [126.249.157.89]) 2022/12/25(日)13:37 ID:GFtl9gAsH(2/5) AAS
そうです
>>468様のアドバイスなら
私の学習レベルでもググり時間とられずにできそうだと思いまして
style.css
@keyframes xxx{ *** : var(--prm) }
index.html
＜style id="prm"＞＜/style＞
＜script＞
prm.innerHTML=":root {--prm:50% }"
のように、変数を編集するstyleタグを設けました
省3
479(2): (ﾜｯﾁｮｲ 1e61-3CYd [180.23.194.154]) 2022/12/25(日)14:26 ID:kQ0MTzKr0(1) AAS
>>478
それならわざわざstyle要素作って直に操作する必要はない
変数の最初の定義もcssファイルの方に書いておいて
変更したい時は
document.documentElement.style.setProperty("--prm", "100%");
とかすればいいだけ
480: (JP 0H88-aH43 [126.249.157.89]) 2022/12/25(日)15:40 ID:GFtl9gAsH(3/5) AAS
>>479
ありがとうございます！そうさせていただきます。
今後ともいろいろ教えてください。ありがとうござました！
481(1): (ｵｯﾍﾟｹ Srd9-r/3v [126.194.247.243]) 2022/12/25(日)16:48 ID:sJzx1gQhr(1) AAS
>>478
>私の学習レベルでもググり時間とられずにできそうだと思いまして
webサーバ云々が億劫だってのは分かるからしょうがないけども
せめて>>472ぐらいは実際に試して欲しかったな
ググって最初に出てくる記事にすぐ出来るやり方が具体的に書いてあるんだし
482: (JP 0H88-aH43 [126.249.157.89]) 2022/12/25(日)16:50 ID:GFtl9gAsH(4/5) AAS
>>479様
面白かったです。
<html><head><body><div>
どの要素にでも、setProperty('param','value')を設定しておけば
別ファイルに作ったスタイルシートの変数を参照できるのですね
疑似的なコードですが
＜script＞
body.setProperty('--color','red')
div.setProperty('--color','blue')
html.setProperty('--color','green)
省2
483: (JP 0H88-aH43 [126.249.157.89]) 2022/12/25(日)16:51 ID:GFtl9gAsH(5/5) AAS
>>481
ありがとうございます
次時間ができたときにぜひ調べて実行してみます
484: (ｽﾌﾟｯｯ Sd5e-HEC+ [1.75.242.54]) 2022/12/25(日)17:00 ID:gv3ThvO8d(1) AAS
もう解決したんだしどうでもいいからお礼だけ言って体よく話を打ち切りたいって思いがヒシヒシ伝わってくるな
485(1): (ﾜｯﾁｮｲ 1df0-aH43 [58.98.96.219]) 2022/12/26(月)13:51 ID:fuxINEHv0(1) AAS
>>469様
Live serverを使って、別のスタイルシートで設定した、フォント色の変更はOKでした。
ありがとうございました。
ただ、@keyframesに関しては、CSSKeyframeRule__{keyText..,style,,cssText,,}__までは見れたのですが
内容の変更方法が分からないため断念しました
時間あるときに再チャレンジしてみます
皆様ありがとうございました
上下前次1-新書関写板覧索設栞歴
あと 517 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.013s