[過去ﾛｸﾞ] JavaScript の質問用スレッド vol.125 (1002ﾚｽ)
上下前次1-新
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
453: (ｽｯｯﾌﾟ Sda2-5Liq [49.98.152.128]) 2022/12/22(木)13:29 ID:kUDazAkOd(1) AAS
ワードプレスとかいうアレをイジってると特定idの親にスタイル変更したいとかはでてくる
454(1): (ﾜｯﾁｮｲ 1961-x3o1 [222.144.111.42]) 2022/12/22(木)17:03 ID:J4HXq2Du0(1) AAS
よほどのことがなければ元ルールを直に書き変えるなんてしないよなぁ
cssRulesはクロスオリジンだとアクセスできないし
455: (JP 0H11-JDfe [126.249.157.89]) 2022/12/22(木)19:14 ID:slpViawnH(3/3) AAS
みなさん、ありがとうございます。
関連した質問なのですが
cssが要素に適用される仕組みは
１：
<style>タグを読み込んだり<link ref>を読み込んだ時点で
ブラウザ実行環境にcssプロパティを記録して、セレクタを読み込んだ時に適用するのでしょうか？
それとも
２：
HTMLの要素を読み込んだ時に<style>タグや<link>先に走査して
cssの適用があるかを確認して適用する
省3
456: (ｵｯﾍﾟｹ Sr11-y+PC [126.208.237.5]) 2022/12/22(木)20:32 ID:NthFDCjcr(1) AAS
次の話に移る前にまず>>451や>>452に答えるべきだろう
言葉遣いだけ丁寧にしてもそういうのが疎かだと相手にされなくなる
457(2): (JP 0H11-JDfe [126.249.157.89]) 2022/12/23(金)07:08 ID:OG24yN7PH(1/5) AAS
>>452様
424,437,440,442の記載の通り、cssRuleを直接編集したいと考えています
>>451様
437,441,442で記載の通り、配列で受けとって編集することはできています
しかし別のスタイルシートでは同様の方法では参照できませんでした
>>445様のご指摘があって、再度検索してみたのですが
別スタイルシートのcssをオブジェクト化して参照する方法が見当たらず
今の質問に至っています
JQueryでできるようなレスがありましたので
JSでもできるのだろうなと思って次の質問をしました
省2
458(2): (ﾜｯﾁｮｲ 2101-eq55 [60.103.75.178]) 2022/12/23(金)08:30 ID:d3IbDeU70(1) AAS
>>454 でクロスオリジンの場合にnullになるって指摘されてるけど、これに引っかかってるだけじゃないかな
この場合はどうにもならんと思う
459(3): (ｵｯﾍﾟｹ Sr11-y+PC [126.194.246.38]) 2022/12/23(金)10:44 ID:Lv24OjDar(1) AAS
>>457
ブラウザのコンソールで↓を実行したらどうなる？
for(const ss of document.styleSheets){console.log(ss.href); console.log(ss.cssRules);}
460(1): (ﾜｯﾁｮｲ 427c-e5AJ [43.235.241.201]) 2022/12/23(金)17:28 ID:o+ONuUnd0(1/2) AAS
>>458で指摘している通り、他の所から読み込んだスタイルはそもそも変更出来ないって書いてあるんじゃね？
外部ﾘﾝｸ:w3c.github.io
> Cross-origin stylesheets are not allowed to be read or changed.
>>459のように実際にcssRulesにアクセスすると自分の所のcssじゃない場合をアクセスしようとすると
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at <anonymous>:1:76
みたいなエラーになる
cssをいじりたいのだろうけど、そういう低層の話じゃなくて本当にやりたい事を書いた方が答えが得られると思うよ
結局何がやりたいのか全く分からんｗ
461: (ﾜｯﾁｮｲ 427c-e5AJ [43.235.241.201]) 2022/12/23(金)17:30 ID:o+ONuUnd0(2/2) AAS
変な日本語になってるなｗ
>>459のように実際に自分の所のでは無いcssRulesをアクセスしようとすると
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at <anonymous>:1:76
みたいなエラーになる
462(1): (JP 0H11-JDfe [126.249.157.89]) 2022/12/23(金)19:30 ID:OG24yN7PH(2/5) AAS
>>458
459,460,461
皆様ありがとうございます
具体的にこれをしたいというのはなかったんですけど
js勉強していまして、そういうことできるのかな？という質問でした
jsのエンジンは<link rel>を実行すると
jsの実行コンテキストを記録するメモリ部分に
<rel>の情報をロードして
HTML要素を読み込んだ時に参照するという挙動なら
クロスオリジンの適用を受けずに編集できるかなと
省2
463(1): (ｵｯﾍﾟｹ Sr11-y+PC [126.194.240.154]) 2022/12/23(金)20:54 ID:2ps+kI7qr(1/3) AAS
>>462
>クロスオリジンの適用を受けずに編集できるかなと
君の>>450や>>457の発言ではCSS参照が別ファイルでも同一オリジンでは問題なく出来て
別オリジンのみ問題が発生していると認識しているとは読み取れないけども
別ファイル即ち別オリジンと勘違いしてない？
同一オリジンなら別ファイルでも参照出来ることは理解してる？
464: (JP 0H11-JDfe [126.249.157.89]) 2022/12/23(金)20:55 ID:OG24yN7PH(3/5) AAS
>>460
今勉強再開して思い出しました。
@keyframesのプロパティや値を
動的に変更したいと考えたのです
同じファイルなら
<style id="st">
として、stから@keyframesを設定編集できますが
外部ファイルでの設定編集ができないので
できたらいいな、って質問してみました
465(1): (JP 0H11-JDfe [126.249.157.89]) 2022/12/23(金)20:57 ID:OG24yN7PH(4/5) AAS
>>463
勘違い、混乱してました。ありがとうございます！
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サーバを立てる必要もなくてお手軽
上下前次1-新書関写板覧索設栞歴
あと 530 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.015s