[過去ログ] JavaScript の質問用スレッド vol.125 (1002レス)
1-
抽出解除 レス栞 あぼーん

このスレッドは過去ログ倉庫に格納されています。
次スレ検索 歴削→次スレ 栞削→次スレ 過去ログメニュー
リロード規制です。10分ほどで解除するので、他のブラウザへ避難してください。
450
(3): デフォルトの名無しさん (JP 0H11-JDfe [126.249.157.89]) [sage] 2022/12/22(木) 07:21:31.78 ID:slpViawnH(2/3) AAS
>>447
447(2): デフォルトの名無しさん (ワッチョイ 427c-e5AJ [43.235.241.201]) [sage] 2022/12/21(水) 23:16:30.68 ID:paD1IZJK0(2/2) AAS
どうしても分からないならchromeのDevToolsのConsoleで
document.styleSheets
って打ってみれば中身が全て見れる
中身見ても意味不明な場合はやりたいことは出来ないかも
すみません、訂正です
document.styleSheetで参照すると
document.styleSheet.cssRulesがnullとなってしまうんです
document.styleSheetで登録されるのは
同じファイル内のスタイルだけのよう?
他のcssファイルに書かれたスタイルを操作するには
どうしたらいいのでしょうか?
に訂正願います
455: デフォルトの名無しさん (JP 0H11-JDfe [126.249.157.89]) [sage] 2022/12/22(木) 19:14:24.29 ID:slpViawnH(3/3) AAS
みなさん、ありがとうございます。
関連した質問なのですが
cssが要素に適用される仕組みは
1:
<style>タグを読み込んだり<link ref>を読み込んだ時点で
ブラウザ実行環境にcssプロパティを記録して、セレクタを読み込んだ時に適用するのでしょうか?

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

なのでしょうか?
もし1なら、クライアントブラウザからアクセスできるような気がするのですけど
もし教えていただけるようでしたらご指導お願いします
457
(2): デフォルトの名無しさん (JP 0H11-JDfe [126.249.157.89]) [sage] 2022/12/23(金) 07:08:17.10 ID:OG24yN7PH(1/5) AAS
>>452
452(2): デフォルトの名無しさん (ワッチョイ eecf-DiWi [153.174.224.39]) [sage] 2022/12/22(木) 09:18:28.13 ID:N0yJkasM0(1) AAS
本当にやりたいのは、特定の要素のstyleを弄ることじゃないの?

424,437,440,442の記載の通り、cssRuleを直接編集したいと考えています

>>451
451(2): デフォルトの名無しさん (ワッチョイ 2101-eq55 [60.103.70.28]) [sage] 2022/12/22(木) 07:48:35.40 ID:YtaOqG2C0(1) AAS
document.styleSheetsの最後のs抜かしてないよな
document.styleSheets[0] みたいにインデックス使わないと参照できないぞ

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

>>445
445(1): デフォルトの名無しさん (ワッチョイ 427c-e5AJ [43.235.241.201]) [sage] 2022/12/21(水) 21:53:16.64 ID:paD1IZJK0(1/2) AAS
ちょっとググれば出てくるような情報までくれって言うのか?
様のご指摘があって、再度検索してみたのですが
別スタイルシートのcssをオブジェクト化して参照する方法が見当たらず
今の質問に至っています

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

皆様質問の仕方に失礼があっって申し訳ありませんでした
お許しくださいませ
462
(1): デフォルトの名無しさん (JP 0H11-JDfe [126.249.157.89]) [sage] 2022/12/23(金) 19:30:29.91 ID:OG24yN7PH(2/5) AAS
>>458
458(2): デフォルトの名無しさん (ワッチョイ 2101-eq55 [60.103.75.178]) [sage] 2022/12/23(金) 08:30:41.88 ID:d3IbDeU70(1) AAS
>>454 でクロスオリジンの場合にnullになるって指摘されてるけど、これに引っかかってるだけじゃないかな
この場合はどうにもならんと思う
459,460,461

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

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

皆様ありがとうございました
464: デフォルトの名無しさん (JP 0H11-JDfe [126.249.157.89]) [sage] 2022/12/23(金) 20:55:49.05 ID:OG24yN7PH(3/5) AAS
>>460
460(1): デフォルトの名無しさん (ワッチョイ 427c-e5AJ [43.235.241.201]) [sage] 2022/12/23(金) 17:28:12.54 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をいじりたいのだろうけど、そういう低層の話じゃなくて本当にやりたい事を書いた方が答えが得られると思うよ
結局何がやりたいのか全く分からんw
今勉強再開して思い出しました。
@keyframesのプロパティや値を
動的に変更したいと考えたのです

同じファイルなら
<style id="st">
として、stから@keyframesを設定編集できますが
外部ファイルでの設定編集ができないので
できたらいいな、って質問してみました
465
(1): デフォルトの名無しさん (JP 0H11-JDfe [126.249.157.89]) [sage] 2022/12/23(金) 20:57:53.66 ID:OG24yN7PH(4/5) AAS
>>463
463(1): デフォルトの名無しさん (オッペケ Sr11-y+PC [126.194.240.154]) [sage] 2022/12/23(金) 20:54:13.31 ID:2ps+kI7qr(1/3) AAS
>>462
>クロスオリジンの適用を受けずに編集できるかなと
君の>>450>>457の発言ではCSS参照が別ファイルでも同一オリジンでは問題なく出来て
別オリジンのみ問題が発生していると認識しているとは読み取れないけども
別ファイル即ち別オリジンと勘違いしてない?
同一オリジンなら別ファイルでも参照出来ることは理解してる?
勘違い、混乱してました。ありがとうございます!
467
(1): デフォルトの名無しさん (JP 0H11-JDfe [126.249.157.89]) [sage] 2022/12/23(金) 21:19:54.48 ID:OG24yN7PH(5/5) AAS
>>466
466(1): デフォルトの名無しさん (オッペケ Sr11-y+PC [126.194.240.154]) [sage] 2022/12/23(金) 21:10:25.93 ID:2ps+kI7qr(2/3) AAS
>>465
で、>>450で参照したかったのは本当に別サーバ等のcssだったのか
それともhtmlやjsと同じ場所に置いてあるcssだったのかどっち?
ローカルで、同じフォルダ内です
476: デフォルトの名無しさん (JP 0H88-aH43 [126.249.157.89]) [sage] 2022/12/25(日) 12:52:51.27 ID:GFtl9gAsH(1/5) AAS
皆さん、ありがとうございます
別シートのcssで可変にしたい部分を変数にし
読み込むシート側に変数専用のstyleタグを用意し
変数用のスタイルタグを編集することにしました

皆様いろいろとありがとうございました
478
(2): デフォルトの名無しさん (JP 0H88-aH43 [126.249.157.89]) [sage] 2022/12/25(日) 13:37:10.68 ID:GFtl9gAsH(2/5) AAS
そうです
>>468
468(1): デフォルトの名無しさん (ワッチョイ 1961-x3o1 [222.144.111.42]) [sage] 2022/12/23(金) 21:28:01.20 ID:G5aj5uG70(1) AAS
@keyframesなんかも後のスタイルで再定義できるんだから
DOMにstyle要素追加してそこに上書きルール突っ込んでそっちを操作すればいいじゃない
様のアドバイスなら
私の学習レベルでもググり時間とられずにできそうだと思いまして

style.css
@keyframes xxx{ *** : var(--prm) }

index.html
<style id="prm"></style>
<script>
prm.innerHTML=":root {--prm:50% }"

のように、変数を編集するstyleタグを設けました
見栄え悪いしかっこ悪いんですけど
いろんな変数を設定変更する関数も自作できそうですので
とりあえずはこれでいいかなと
480: デフォルトの名無しさん (JP 0H88-aH43 [126.249.157.89]) [sage] 2022/12/25(日) 15:40:19.02 ID:GFtl9gAsH(3/5) AAS
>>479
479(2): デフォルトの名無しさん (ワッチョイ 1e61-3CYd [180.23.194.154]) [sage] 2022/12/25(日) 14:26:34.39 ID:kQ0MTzKr0(1) AAS
>>478
それならわざわざstyle要素作って直に操作する必要はない
変数の最初の定義もcssファイルの方に書いておいて
変更したい時は
document.documentElement.style.setProperty("--prm", "100%");
とかすればいいだけ
ありがとうございます!そうさせていただきます。
今後ともいろいろ教えてください。ありがとうござました!
482: デフォルトの名無しさん (JP 0H88-aH43 [126.249.157.89]) [sage] 2022/12/25(日) 16:50:28.05 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)

とすると、子孫のスタイル設定が優先されることも理解できました
とても面白く学習できました、ありがとうございました
483: デフォルトの名無しさん (JP 0H88-aH43 [126.249.157.89]) [sage] 2022/12/25(日) 16:51:23.54 ID:GFtl9gAsH(5/5) AAS
>>481
481(1): デフォルトの名無しさん (オッペケ Srd9-r/3v [126.194.247.243]) [sage] 2022/12/25(日) 16:48:37.78 ID:sJzx1gQhr(1) AAS
>>478
>私の学習レベルでもググり時間とられずにできそうだと思いまして
webサーバ云々が億劫だってのは分かるからしょうがないけども
せめて>>472ぐらいは実際に試して欲しかったな
ググって最初に出てくる記事にすぐ出来るやり方が具体的に書いてあるんだし
ありがとうございます
次時間ができたときにぜひ調べて実行してみます
541
(2): デフォルトの名無しさん (JP 0H4f-ChaJ [126.249.157.89]) [sage] 2023/01/05(木) 20:55:47.77 ID:XhDooIHVH(1/7) AAS
>>531
531(6): デフォルトの名無しさん (ワッチョイ 8202-9yt5 [27.92.176.51]) [sage] 2023/01/05(木) 14:46:47.66 ID:EVXeoiyo0(7/10) AAS
すいません。やっぱり関数リテラルという意味を理解したい。。でも↓この質問でわかるかも。
だれか答えていただけますでしょうか?
---
次のコードがあります。1から5のうち
どれが適切でしょうか?

let dispMessage = function(msg){
console.log(msg);
};

1.
function(msg){console.log(msg);}
は関数リテラルである。

2.
dispMessage
は関数リテラルである。

3.
let dispMessage = function(msg){
console.log(msg);
};
が全体として関数リテラルである。

4.
全て関数リテラルとはいえない。

5.
関数リテラルとは、用法のことであり、
コード部分を表すものではない。
自分もあまりJS詳しくないんですけど
リテラルっていうのは、括るもの、という意味合いでは?
オブジェクトリテラルっていうのは波かっこで括るオブジェクト={}
文字列のリテラルは、""や’’
展開のリテラルは、``とか
関数のリテラルというのは、functionを指定した引数括弧つきのオブジェクトリテラルでfunction(){}

関数リテラルといえば、例えばfunction func(){...}
とした場合、{...}は変数funcに文字列として代入されます
そしてfuncは関数オブジェクトと指定されていて
関数の実行は()を読み込むことで実行されます
func 文字列
()   関数の実行
542: デフォルトの名無しさん (JP 0H4f-ChaJ [126.249.157.89]) [sage] 2023/01/05(木) 21:01:26.21 ID:XhDooIHVH(2/7) AAS
>>531
解決済みだったようですみませんでした
参考までに追加

function func(){return 1}
とした場合
console.log(func)

console.log(func())
を見比べるとわかりますが、
func変数の中身は、function指定された文字列で
func()は関数を実行した結果の1が表示されます
544
(2): デフォルトの名無しさん (JP 0H4f-ChaJ [126.249.157.89]) [sage] 2023/01/05(木) 22:26:48.61 ID:XhDooIHVH(3/7) AAS
>>543
543(1): デフォルトの名無しさん (オッペケ Sr4f-JZbg [126.208.231.97]) [sage] 2023/01/05(木) 21:40:35.47 ID:n/EqvkXYr(1/3) AAS
>>541
JavaScriptのリテラルに関してはまず下記を読んでください
括ってあればリテラルというわけではないです
外部リンク:developer.mozilla.org
括る、というのはそういう意味かと
リテラルはリテラルなので括る必要はなくて
プリミティブは、これは文字列です、
これは配列です、
これはオブジェクトです
とエンジンに理解させるための記述なのかと思いまして
547
(1): デフォルトの名無しさん (JP 0H4f-ChaJ [126.249.157.89]) [sage] 2023/01/05(木) 22:57:51.54 ID:XhDooIHVH(4/7) AAS
括ることで、エンジンに対して、これは配列オブジェクトだよとか
これは{}だよとか、これは文字列だよとか、そういうことを伝えているってことですけど
550: デフォルトの名無しさん (JP 0H4f-ChaJ [126.249.157.89]) [sage] 2023/01/05(木) 23:12:56.82 ID:XhDooIHVH(5/7) AAS
<<538
諄いですね
正しい理論的な話あればご披露ください

JSの処理エンジンに、どういう記述があれば
どう処理するかというのがあるでしょ
{}とう記述を読めば、オブジェクトなのだな、と
””ならもじれるなのかなと、
function でて意義されたものがあれば関数なのかなと

リテラルは数値などの表現で
文字列は””、’’のクオーテーションで
関数は、function装飾委sで
それぞれが何を表現してるのかを確認し
スクリプト実行時にそれらをコンテキストに登録して
その後の作動を担保する、ってことなのかな
552: デフォルトの名無しさん (JP 0H4f-ChaJ [126.249.157.89]) [sage] 2023/01/05(木) 23:20:08.45 ID:XhDooIHVH(6/7) AAS
先生、ありがとうござす
時間とれましたら勉強してみます、ありがとうです
555: デフォルトの名無しさん (JP 0H4f-ChaJ [126.249.157.89]) [sage] 2023/01/05(木) 23:34:22.58 ID:XhDooIHVH(7/7) AAS
すみませんでした、もっと勉強します
559
(2): デフォルトの名無しさん (JP 0H4f-ChaJ [126.249.157.89]) [sage] 2023/01/06(金) 22:25:41.09 ID:Th1PE0Z2H(1) AAS
リテラル

””や’’で表現されるのは文字列と評価する
[]は配列と評価する
{}はオブジェクトと評価する
JSエンジンがオブジェクトをどう評価して処理するかということだと思ったんですけど
何やら全く的外れなこと言ってたみたいですみませんでした
何度も謝ったのでもう許してください、鬼神様
561
(1): デフォルトの名無しさん (JP 0Hd3-DWwd [126.249.157.89]) [sage] 2023/01/07(土) 08:36:35.89 ID:I26x6s3dH(1) AAS
時間があるときに読んでおきます
609: デフォルトの名無しさん (JP 0H67-w88e [126.249.157.89]) [sage] 2023/01/17(火) 19:01:55.76 ID:LBqNgpc6H(1) AAS
ポインタのこと?
613: デフォルトの名無しさん (JP 0H67-w88e [126.249.157.89]) [sage] 2023/01/18(水) 07:40:19.90 ID:Eqd2U92jH(1/2) AAS
documentのpropertyにconcertzenderって標準でないっしょ?
スクリプトのどっかでなんか設定してるん?
614
(1): デフォルトの名無しさん (JP 0H67-w88e [126.249.157.89]) [sage] 2023/01/18(水) 07:41:25.64 ID:Eqd2U92jH(2/2) AAS
それとエラーの内容も書き込まずにして質問っていうのもどうなの?
622
(2): デフォルトの名無しさん (JP 0H67-w88e [126.249.157.89]) [sage] 2023/01/19(木) 22:07:44.38 ID:40XBuhhWH(1) AAS
君は君の質問に反応しない人には
推し量って導こうという崇高な意識はないの?JS使いなのに?
1-
スレ情報 赤レス抽出 画像レス抽出 歴の未読スレ AAサムネイル

ぬこの手 ぬこTOP 0.057s