JavaScript の質問用スレッド vol.125

■ このスレッドは過去ログ倉庫に格納されています
2022/08/07(日) 15:57:40.26ID:TS5TGpUB0
!extend:checked:vvvvvv:1000:512
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-5のテンプレを読んだ上で質問してください。次スレは>>950が>>2の「次スレの立て方」を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

■前スレ
JavaScript の質問用スレッド vol.124
https://mevius.5ch.net/test/read.cgi/tech/1636525464/
VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured
2022/12/12(月) 02:45:20.07ID:BD7ZISK00
>>373
その認識で合ってる。
MOV は配列で、その各要素も配列(2要素の配列)。
なんでそんな構造にしてるのかは知らん。
2022/12/12(月) 07:38:12.53ID:u3d467jnH
>>373が聞いてるのは
translateがJSのcontextの関数なら
translate(100,50)はコンテキスト自体が右に100、下に50移動する

右移動量を絶対値にして移動させるってことかにゃん
2022/12/12(月) 11:24:58.04ID:9mOu9R4R0
>>374
ありがとうございます

>>375
そうです
全コード載せてみます
geometricBoundsは四角形の2点の座標を得るメソッドで、変数に[左上のx座標、左上のy座標、右下のx座標、右下のy座標]の順に格納されます
2022/12/12(月) 11:25:36.96ID:9mOu9R4R0
SEL = activeDocument.selection
PAT = activeDocument.pathItems
STB = app.preferences.getBooleanPreference("includeStrokeInBounds")

MAINfn()

function MAINfn(){
if(SEL.length == 0) return
GUI = []
for(p=0; p<PAT.length; p++) PATfn(PAT[p])
if(GUI.length == 0) return
for(s=0; s<SEL.length; s++) SELfn(SEL[s])
}

function PATfn(Px){
if(!Px.guides) return
Bp = Px.geometricBounds
GUI.push(Bp[0])
GUI.push(Bp[2])
}
2022/12/12(月) 11:26:49.23ID:9mOu9R4R0
function SELfn(Sx){
Bs = BNDfn(Sx)
MOV = []
for(g=0; g<GUI.length; g++){
MOV.push([Math.abs(GUI[g]-Bs[0]), GUI[g]-Bs[0]])
MOV.push([Math.abs(GUI[g]-Bs[2]), GUI[g]-Bs[2]])
}
MOV2 = SORTfn(MOV)
Sx.translate(MOV2[0][1], 0)
}

function SORTfn(f0){
f1 = []
for(i=0; i<f0.length; i++) f1.push(f0[i])
f1.sort(
function(a,b){
if(a[0] < b[0]) return -1
if(a[0] > b[0]) return 1
if(a[0]== b[0]) return 0
}
)
return f1
}

function BNDfn(Bx){
Bz = Bx.geometricBounds
if(STB) Bz = Bx.visibleBounds
if(Bx.clipped) Bz = Bx.pageItems[0].geometricBounds
return Bz
}
2022/12/12(月) 11:28:43.67ID:9mOu9R4R0
「一番近いガイドに図形を吸着させる」スクリプトです
app.preferences.getBooleanPreferenceは無視してもらっていいです
環境設定の予備的なものなので。
function BNDfn(Bx)以下も環境設定の予備的なものなので無視でいいです
[絶対値と絶対値でないもの]を入れ子にする意味が知りたいです
2022/12/12(月) 12:27:02.66ID:TCDiz++Hr
>>379
配列MOVをソートするSORTfnで[◯,●]の◯を利用してるのは読み取れる？
2022/12/12(月) 13:06:21.02ID:9mOu9R4R0
>>380
ソートで利用するために [　,　] の入れ子にしてるだけですか？
2022/12/12(月) 13:16:44.67ID:TCDiz++Hr
>>381
まず聞かれたことに対してYESかNOで答えようよ
2022/12/12(月) 13:25:11.50ID:9mOu9R4R0
>>38
ありがとうございます
わかりました
[◯,●]の◯はソートをするために利用している
絶対値が一番小さい◯を先頭に並べ替えて（距離が一番近い）、それと対になってる●だけtranslateで移動している
ということですね
2022/12/12(月) 13:25:56.97ID:9mOu9R4R0
× >>38
◯ >>382
2022/12/12(月) 13:29:27.02ID:BD7ZISK00
余談だが、>>378
sort の比較関数ってわざわざそういうまどろっこしい実装にしてるのをよく見るけど、数値なら

function(a,b){
return a[0] - b[0];
}

でいいのよ。
順序を見る要素が複数あるなら

function(a,b){
let c = a[0] - b[0];
if (c) return c;
c = a[1] - b[1];
if (c) return c;
return a[2] - b[2];
}

とか、短い表現なら

function(a,b){
let c;
if (c = a[0] - b[0]) return c;
if (c = a[1] - b[1]) return c;
return a[2] - b[2];
}

とか。
これをループで回すのも有りかも。

あ、複数要素の比較はあくまで例であって、>>378 のデータ構造とは関係無いよ。
2022/12/12(月) 13:34:52.14ID:9mOu9R4R0
ガイドが、動かしたいオブジェクトの右にあるか左にあるか確定して無いんですよ
だからMath.absで絶対値にして距離を測ってるのか…
そして配列の入れ子にしてソート
勉強になるな
ここだけ他のスクリプトでも使える
2022/12/12(月) 13:39:57.47ID:BD7ZISK00
>>386
abs なんてほとんどコストかからないんだから、元の値と絶対値の両方を保存するのは無駄な気がする。
配列の保存やアクセスの方がコストかかったりして。
2022/12/12(月) 13:45:29.13ID:TCDiz++Hr
命名や処理内容を見る限りあまり参考にすべきコードではないように感じる
2022/12/12(月) 13:50:47.16ID:8JMA8Bb40
>>377
転載禁止なのを勝手に載せたらあかんわ
gorolib.blog.jp/archives/72193707.html
2022/12/12(月) 14:04:35.37ID:xvk668V/d
絶対値が一番小さいものを選ぶだけならこんな大掛かりにする必要そもそもない気が
2022/12/12(月) 14:26:01.70ID:qd0QDeFeM
>>372
まず
[1, 2, 3 ] で 配列ができる
new Array(1,2,3) の省略型
2022/12/12(月) 14:32:46.45ID:Xk6tQN/c0
イラストレータのappかぃ
2022/12/12(月) 15:49:23.10ID:Ah12aly8r
>>391
なぜ配列にしているのかを聞いているのであって
記法に関する質問をしているわけではないだろう
2022/12/12(月) 17:14:12.48ID:Xk6tQN/c0
設定でjs使ってるみたいなのでjsスレで質問してるようだけどスレチのような・・・
2022/12/12(月) 17:18:01.39ID:RmZ1ojDx0
オブジェクトの配列にすれば分かりやすいな
2022/12/12(月) 17:19:55.56ID:Xk6tQN/c0
連投すみません
>>379さん
PC等->CG->Illustrator総合
のほうがいいかもですね
2022/12/12(月) 20:05:16.68ID:9mOu9R4R0
>>396
CG板のIllustratorスレはわかりませんが、DTP板のIllustratorスレではscriptがわかる人が1人くらいしか居ません
たまたまその人が居なかったら、何日も放置になってしまうし…
ここの人たちの方がscriptのメソッドとかもほとんどわかるし
Illustratorの図形といっても、xy座標に図形が並んでるだけの、ほとんど移動する時の足し算と引き算だけです
2022/12/12(月) 20:10:18.24ID:9mOu9R4R0
[◯,●]の◯をソートのために利用してるなんて、独りで考えてたら絶対思い付かなかったと思います
2022/12/12(月) 20:14:44.98ID:u3d467jnH
>>398
JSスレの神様たちは優しい感じですもんね
がんばってくださいね！
2022/12/12(月) 20:37:06.98ID:9eo7KahL0
>>398
ソートの手法としては収穫があったようでなにより。
でも他にも指摘があるように、アルゴリズムとしては今一つだから全体としてはあまり参考にするほどじゃないと思う。
それは距離の一番小さい相手を探す方法として距離でソートしてその一番最初を採るという手順を使ってるよね。
でも、最初から距離が一番小さいものを探せばループ 1回で答えが出る。
こんなかんじ？

function SELfn(Sx) {
Bs = BNDfn(Sx);
dmin = 99999
dsel = 0
for(g = 0; g < GUI.length; g++) {
for (b = 0; b <= 2; b += 2) {
d = GUI[g] - Bs[b]
a = Math.abs(d)
if (a < dmin) {
dmin = a
dsel = d
}
}
if (dmin < 99999) Sx.translate(dsel, 0)
}
2022/12/12(月) 20:39:31.01ID:fufRX2ZEr
>>398
MOV変数の行方を追って数行コードを読んだだけだよ
何も難しいことの種明かしをしたわけじゃない
今回人に聞いて答えを得たなら次は自分でそれにたどり着けるようになろう
2022/12/12(月) 22:12:32.05ID:9mOu9R4R0
>>400
これだとソート関数いらないんですか？
かなりコンパクトになりますね
ダイアログを表示させて吸着方向を上下左右選べるスクリプトを作ろうと思ってるので、こちらで作ってみます
2022/12/13(火) 02:24:56.21ID:IRSJsHbF0
>>402
閉じかっこひとつ抜けてた。
最後の if の前に } が要る。
2022/12/13(火) 11:11:56.07ID:dgxg9m7O0
>>403
こうですか？

function SELfn(Sx) {
Bs = BNDfn(Sx);
dmin = 99999
dsel = 0
for(g = 0; g < GUI.length; g++) {
for (b = 0; b <= 2; b += 2) {
d = GUI[g] - Bs[b]
a = Math.abs(d)
if (a < dmin) {
dmin = a
dsel = d
}
}
}
if (dmin < 99999) Sx.translate(dsel, 0)
}
2022/12/13(火) 12:03:25.74ID:l4PFzl7S0
君、プロトタイプをやりたまえ。
2022/12/13(火) 14:26:18.57ID:LSRhZVzxM
>>404
そそ
2022/12/13(火) 16:55:31.25ID:kcuzrobtd
プロトタイプとは何なのかを教え給え

クラスとかコンストラクタを書くんじゃなくて、『function hoge(a, b){}』にプロパティやメソッドや戻り値定義すればいいの？
2022/12/13(火) 18:39:15.95ID:pwiPw3z60
>>407
プロパティを参照する時、「対象オブジェクトの直属のプロパティ」だけでなく、[[Prptotype]] と呼ばれる内部プロパティ内にあるプロパティも検索対象となる仕組みを「プロトタイプチェーン」という
2022/12/13(火) 19:12:20.42ID:cf0t5w5pH
>>408
プロパティを参照する時、対象オブジェクトの直属にプロパティへの参照がない場合、[[Prptotype]] と呼ばれる内部プロパティ内にあるプロパティへの参照を走査する仕組みを「プロトタイプチェーン」という
なお[[Prototype]]はnewで生成される親のprototypeへの参照が格納されるが、動的に[[Prototype]]をセットすることもできる

でどうでしょう？
2022/12/13(火) 20:14:40.67ID:pwiPw3z60
>>409
プロトタイプに「親」という概念はない
クラスベース言語の考えが混ざってる気がする
2022/12/13(火) 20:36:49.94ID:cf0t5w5pH
>>410
えええええ？そうなんですか？
継承あるのに親がいない？？？
2022/12/13(火) 22:34:12.05ID:cf0t5w5pH
>>410
僕は理解が浅いのでもっと学習しないと。
JSはprptotypeの理解が深まると幅が広がりそうですね
僕ももっと勉強進めないと
2022/12/14(水) 00:03:47.61ID:+gEopm0Q0
>>411-412
プロトタイプベースとクラスベースの違いを理解することから始めよう
https://www.google.com/search?q=%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%99%E3%83%BC%E3%82%B9+%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%99%E3%83%BC%E3%82%B9&ie=UTF-8

親クラス、子クラス、継承は、クラスベース由来の用語
多くのサイトでクラスベースに慣れた人用に使われている用語だが、クラスベースのつもりで受け取ると誤った機能理解に繋がる

クラスベースはインスタンス生成時に親クラスを複製するが、プロトタイプベースは複製しない
プロトタイプベースはプロトタイプに手を加えると「全てのプロトタイプを元にしたオブジェクト」に影響する

「継承」や「クラス」という用語を使うのは問題ないが、プロトタイプでどのように継承やクラスを実装しているのかは理解する必要がある
2022/12/14(水) 00:19:25.91ID:Dbkp4Og+0
プロトタイプ最強伝説！
2022/12/14(水) 07:32:29.92ID:r+idjll+H
protptypeを使い、new演算子でインスタンスを継承でき、
さらにプロトタイプチェーンで始祖子孫を関連付けられるのに
親子関係という概念はJSにはないんですねー
2022/12/14(水) 07:55:29.99ID:r+idjll+H
ちょっと調べてみたけど、JSに親子関係は存在しない、的な記事はない
MDNには親子表現はないけれど、JSの継承で親子表現してる記事は多数ある
親子関係はクラスの拡張、実装、インスタンス生成でも使われるけど
親子関係自体を定義した言語なんて存在しない、あくまで機能の表現方法
であるにもかかわらず、プロトタイプ言語に親子関係が存在しないというのは
どこかにそういう記述があると思うのですが、参照場所を教えていただけませんか？
2022/12/14(水) 12:33:00.70ID:3zhhSsQg0
プロトタイプベースでは、親ではなく雛形という概念を用いる（それこそがプロトタイプ）
JavaScriptはプロトタイプベースのオブジェクト指向言語の代表格だが
その JavaScriptにも、ES2015(ES6) でクラスベース構文が導入されたので、
使い手の側としては、思想・概念・用語が入り乱れる事になったのかも知れません
2022/12/14(水) 13:15:16.28ID:U8xYt1Js0
あらためてMDNを概覧しましたが
417さんの力説されているとおりかもしれませんね
今後はご指摘の件、頭にいれながら勉強します
ながながとありがとうございます！今後ともよろしくです
2022/12/14(水) 14:22:13.24ID:dv/CWk9JH
個人的にクラス≒雛形って考えだからプロトタイプはわかるけどクラスベースがわからなかった

「雛形クローンして用意してあるの変えるだけだろ？」って
2022/12/15(木) 01:00:33.27ID:z3rBZpFn0
>>418
よくぞ言った、プロトタイプ使徒よ！
2022/12/16(金) 14:16:16.56ID:wrcGLpVa0
みんなはフレームワーク使ってる？
それともJS直接使ってる？
2022/12/16(金) 14:22:39.89ID:C3ZoQFlkM
お前から発表しろよ
アンケートだから職種、年俸、年齢、結婚歴は必須な
2022/12/17(土) 12:10:49.73ID:kI1nA3xa0
>>422
職種：プロトタイプ
年俸：プロトタイプ
年齢：プロトタイプ
結婚歴：プロトタイプ
2022/12/17(土) 13:15:46.84ID:OiGNBIp60
質問させてください

<style>
#d1,#d2{ color:blue}
</style>

<div id="d1"></div>
<div id="d2"></div>

<script>
</script>

JSで、<style>内の#d1,#d2セレクタの設定を編集したいのですが
特定のセレクタ部分だけを取得して変更ってできますか？
2022/12/17(土) 13:44:50.71ID:ycEukJwD0
>>424
https://developer.mozilla.org/ja/docs/Web/API/StyleSheetList
2022/12/17(土) 13:49:34.17ID:ycEukJwD0
>>424
変更はこっちだった
https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList
2022/12/17(土) 13:53:37.75ID:ycEukJwD0
>>424
訂正
https://developer.mozilla.org/ja/docs/Web/API/CSSStyleSheet
2022/12/17(土) 20:57:11.28ID:/rkC0QGzH
>>426
ありがとうございます。JSの皆様は本当に神様。
取り急ぎお礼申し上げます。ありがとうございます。
できれば明日時間をとって拝読させていただきます。
2022/12/17(土) 22:30:28.67ID:8Q1kFIoR0
if(A1[1] == A1[3]){
A0C = (A0[3]+A0[1])/2;
A1C = (A1[3]+A1[1])/2;
Ty = A1C - A0C;
X1[0].translate(0,Ty);
} else {
dofn3();
}

このif文ですが、A1[1]とA1[3]の誤差がプラスマイナス0.5までならtrueというふうに変えたいんですけど、どう書き換えれば良いでしょうか？
今のままだとA1[1]とA1[3]ともに小数点以下10桁くらいあって条件が厳し過ぎるんですよね
手違いでちょっとずれて作ってしまうこともあるので、その場合はtrueにしたいのです
2022/12/17(土) 22:40:09.17ID:on9KAdJq0
A1[1]とA1[3]の差が絶対値で0.5までって書けばいいんじゃないの？
2022/12/17(土) 22:44:13.88ID:8Q1kFIoR0
A1[1]==A1[3]は、四角形の左上のY座標A1[1]と右下のY座標A1[3]が同じだから、直線という意味です
でもこの2点を上下0.5くらい余裕を持たせたいんです
間違って微妙に斜めに線を引いてしまうこともあるので
2022/12/17(土) 22:45:31.22ID:8Q1kFIoR0
>>430
そうか
簡単でしたね w
ありがとうございます
2022/12/17(土) 22:45:36.51ID:t7AYft2Wr
>>429
まず自分で試行錯誤してみたら？
やりたいことが日本語に出来てるなら難しいことではないと思うよ
君は何でも最初から人に聞いて済ませようとしてるように見える
2022/12/17(土) 22:47:25.94ID:t4TbQFP40
このスレは、回答者の腕試しの意味もあるから
2022/12/17(土) 23:01:46.75ID:nEwVWz8Q0
正直このレベルの質問に答える必要が無いと思うが・・・
範囲でif文を書く事とかすら考えつかないレベルでこの先やっていける訳無いやんｗ
2022/12/17(土) 23:10:51.36ID:2CNUWbJ80
>>435
こういうちょっとしたきっかけで他の思い付きができるようになることもあるしね
2022/12/18(日) 12:44:32.64ID:uPN+O46jH
>>427
様、ありがとうございました。
CSSのスタイル設定プロパティをJSで編集できました。
CSSRulesは配列で返ってきますが
cssRules['div'].color='blue'
のように、プロパティ名で編集する方法はありませんでしょうか？
2022/12/18(日) 14:19:43.57ID:6JZ/0f38r
jQuery使えばできます
2022/12/19(月) 12:00:53.42ID:KEwe+Jaf0
>>437
俺は「プロパティ名で編集する方法」を知らないので、CSSOMを調べてみるといいと思う
https://triple-underscore.github.io/cssom-ja.html
2022/12/19(月) 14:10:45.85ID:GaFatWVX0
>>438
>>439
ありがとうございました
selectortextを呼び出して疑似的にプロパティ名で編集できるような関数を作ってみます。
2022/12/19(月) 21:50:19.67ID:K0fHbKFE0
https://developer.mozilla.org/ja/docs/Web/API/CSSStyleDeclaration/setProperty

let style = document.styleSheets[0].cssRules[0].style;
style.fontSize = "1em";
// style.setProperty("font-size", "1em");
2022/12/21(水) 07:34:30.54ID:nEbzRDrKH
>>441
ありがとうございます。

let styleの呼び出し箇所を関数にして
selector名のオブジェクトを生成し、その中にプロパティ名とvalueを格納して呼び出すような
簡易的な関数を作成してみます
年末のお忙しいとろ、アドバイスありがとうございました。
2022/12/21(水) 16:52:58.12ID:9yhxJASu0
小数点第4位を四捨五入するのは、parseFloat(a.toFixed(3))と Math.round(a*1000)/1000のどっちがいいでしょうか？
2022/12/21(水) 19:18:04.39ID:nEbzRDrKH
連日すみません。
<link rel="stylesheet" src>で読み込んだcssの
cssStylesheetプロパティにアクセスする方法を教えていただけないでしょうか？
2022/12/21(水) 21:53:16.64ID:paD1IZJK0
ちょっとググれば出てくるような情報までくれって言うのか？
2022/12/21(水) 22:46:02.69ID:nEbzRDrKH
すみません、ちょっとググってみます
2022/12/21(水) 23:16:30.68ID:paD1IZJK0
どうしても分からないならchromeのDevToolsのConsoleで
document.styleSheets
って打ってみれば中身が全て見れる
中身見ても意味不明な場合はやりたいことは出来ないかも
2022/12/21(水) 23:34:53.49ID:PQinZhLm0
jQuery最強伝説。
2022/12/22(木) 07:18:15.65ID:slpViawnH
>>447
それは試してみたんですけどundefinedなんですよね
他ファイルを参照した場合には、stylesheetがdocumentのプロパティになっていないようなのですよね
2022/12/22(木) 07:21:31.78ID:slpViawnH
>>447
すみません、訂正です
document.styleSheetで参照すると
document.styleSheet.cssRulesがnullとなってしまうんです
document.styleSheetで登録されるのは
同じファイル内のスタイルだけのよう？
他のcssファイルに書かれたスタイルを操作するには
どうしたらいいのでしょうか？
に訂正願います
2022/12/22(木) 07:48:35.40ID:YtaOqG2C0
document.styleSheetsの最後のs抜かしてないよな
document.styleSheets[0] みたいにインデックス使わないと参照できないぞ
2022/12/22(木) 09:18:28.13ID:N0yJkasM0
本当にやりたいのは、特定の要素のstyleを弄ることじゃないの？
2022/12/22(木) 13:29:52.00ID:kUDazAkOd
ワードプレスとかいうアレをイジってると特定idの親にスタイル変更したいとかはでてくる
2022/12/22(木) 17:03:26.78ID:J4HXq2Du0
よほどのことがなければ元ルールを直に書き変えるなんてしないよなぁ
cssRulesはクロスオリジンだとアクセスできないし
2022/12/22(木) 19:14:24.29ID:slpViawnH
みなさん、ありがとうございます。
関連した質問なのですが
cssが要素に適用される仕組みは
１：
<style>タグを読み込んだり<link ref>を読み込んだ時点で
ブラウザ実行環境にcssプロパティを記録して、セレクタを読み込んだ時に適用するのでしょうか？

それとも
２：
HTMLの要素を読み込んだ時に<style>タグや<link>先に走査して
cssの適用があるかを確認して適用する

なのでしょうか？
もし１なら、クライアントブラウザからアクセスできるような気がするのですけど
もし教えていただけるようでしたらご指導お願いします
2022/12/22(木) 20:32:53.94ID:NthFDCjcr
次の話に移る前にまず>>451や>>452に答えるべきだろう
言葉遣いだけ丁寧にしてもそういうのが疎かだと相手にされなくなる
2022/12/23(金) 07:08:17.10ID:OG24yN7PH
>>452様
424,437,440,442の記載の通り、cssRuleを直接編集したいと考えています

>>451様
437,441,442で記載の通り、配列で受けとって編集することはできています
しかし別のスタイルシートでは同様の方法では参照できませんでした

>>445様のご指摘があって、再度検索してみたのですが
別スタイルシートのcssをオブジェクト化して参照する方法が見当たらず
今の質問に至っています

JQueryでできるようなレスがありましたので
JSでもできるのだろうなと思って次の質問をしました

皆様質問の仕方に失礼があっって申し訳ありませんでした
お許しくださいませ
2022/12/23(金) 08:30:41.88ID:d3IbDeU70
>>454 でクロスオリジンの場合にnullになるって指摘されてるけど、これに引っかかってるだけじゃないかな
この場合はどうにもならんと思う
2022/12/23(金) 10:44:42.21ID:Lv24OjDar
>>457
ブラウザのコンソールで↓を実行したらどうなる？
for(const ss of document.styleSheets){console.log(ss.href); console.log(ss.cssRules);}
2022/12/23(金) 17:28:12.54ID:o+ONuUnd0
>>458で指摘している通り、他の所から読み込んだスタイルはそもそも変更出来ないって書いてあるんじゃね？
https://w3c.github.io/csswg-drafts/cssom/

> 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をいじりたいのだろうけど、そういう低層の話じゃなくて本当にやりたい事を書いた方が答えが得られると思うよ
結局何がやりたいのか全く分からんｗ
2022/12/23(金) 17:30:32.01ID:o+ONuUnd0
変な日本語になってるなｗ

>>459のように実際に自分の所のでは無いcssRulesをアクセスしようとすると
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at <anonymous>:1:76
みたいなエラーになる
2022/12/23(金) 19:30:29.91ID:OG24yN7PH
>>458
459,460,461

皆様ありがとうございます
具体的にこれをしたいというのはなかったんですけど
js勉強していまして、そういうことできるのかな？という質問でした

jsのエンジンは<link rel>を実行すると
jsの実行コンテキストを記録するメモリ部分に
<rel>の情報をロードして
HTML要素を読み込んだ時に参照するという挙動なら
クロスオリジンの適用を受けずに編集できるかなと
そういう疑問も持ちまして質問させていただきました

皆様ありがとうございました
2022/12/23(金) 20:54:13.31ID:2ps+kI7qr
>>462
>クロスオリジンの適用を受けずに編集できるかなと
君の>>450や>>457の発言ではCSS参照が別ファイルでも同一オリジンでは問題なく出来て
別オリジンのみ問題が発生していると認識しているとは読み取れないけども
別ファイル即ち別オリジンと勘違いしてない？
同一オリジンなら別ファイルでも参照出来ることは理解してる？
2022/12/23(金) 20:55:49.05ID:OG24yN7PH
>>460
今勉強再開して思い出しました。
@keyframesのプロパティや値を
動的に変更したいと考えたのです

同じファイルなら
<style id="st">
として、stから@keyframesを設定編集できますが
外部ファイルでの設定編集ができないので
できたらいいな、って質問してみました
2022/12/23(金) 20:57:53.66ID:OG24yN7PH
>>463
勘違い、混乱してました。ありがとうございます！
2022/12/23(金) 21:10:25.93ID:2ps+kI7qr
>>465
で、>>450で参照したかったのは本当に別サーバ等のcssだったのか
それともhtmlやjsと同じ場所に置いてあるcssだったのかどっち？
2022/12/23(金) 21:19:54.48ID:OG24yN7PH
>>466
ローカルで、同じフォルダ内です
2022/12/23(金) 21:28:01.20ID:G5aj5uG70
@keyframesなんかも後のスタイルで再定義できるんだから
DOMにstyle要素追加してそこに上書きルール突っ込んでそっちを操作すればいいじゃない
2022/12/23(金) 21:39:17.88ID:2ps+kI7qr
>>467
それは本来別オリジンではないんだけどブラウザがローカルアクセスに対するセキュリティの一環として制限をかけてる模様
詳しくはググって
>>459のスクリプトを実行して
file:///～
の行のあとに例外が出るならそれが原因

対策としてはローカルにwebサーバを立ててhttp経由でアクセスする
そうすればスクリプト実行で例外が発生せずcssの中身が読み取れる
webサーバはそんな大層なものは必要なくてvscodeのLiveServerで十分
2022/12/23(金) 21:55:43.41ID:gwhrrj9D0
DevTools を弄れるなら、要素タブでスタイル欄を見れば
適用内容と設定元のファイルが行番号付きで確認できるし
アニメーションを弄りたいなら、「その他のツール」に「アニメーション」がある（chrome）
2022/12/24(土) 09:52:50.24ID:Lk0KbRC60
皆様いろいろありがとうございます
時間とれましたら確認させていただきます
2022/12/24(土) 10:46:15.28ID:se6E0pPpr
>>471
少し調べたらchromeのオプションでクロスオリジン制約を回避する方法があった
chrome クロスオリジン
で検索
これならwebサーバを立てる必要もなくてお手軽
2022/12/24(土) 14:27:49.26ID:0WYu35VL0
firefoxもsecurity.fileuri.strict_origin_policyをfalseにすれば回避できるけど
早いうちにローカルサーバ立てることを覚えた方が後が楽になると思うよ

対象要素が１つなら@keyframes書き換えるよりWebAnimationAPI使った方がいいかもしれないし
やりたいことはぼかさずにはっきり書いた方がいいよ
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況