[過去ﾛｸﾞ] JavaScript の質問用スレッド vol.125 (1002ﾚｽ)
上下前次1-新
抽出解除 ﾚｽ栞 あぼーん
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
437(1): (JP 0H11-JDfe [126.249.157.89]) 2022/12/18(日)12:44 ID:uPN+O46jH(1) AAS
>>427
様、ありがとうございました。
CSSのスタイル設定プロパティをJSで編集できました。
CSSRulesは配列で返ってきますが
cssRules['div'].color='blue'
のように、プロパティ名で編集する方法はありませんでしょうか？
442: (JP 0H11-JDfe [126.249.157.89]) 2022/12/21(水)07:34 ID:nEbzRDrKH(1/3) AAS
>>441
ありがとうございます。
let styleの呼び出し箇所を関数にして
selector名のオブジェクトを生成し、その中にプロパティ名とvalueを格納して呼び出すような
簡易的な関数を作成してみます
年末のお忙しいとろ、アドバイスありがとうございました。
444: (JP 0H11-JDfe [126.249.157.89]) 2022/12/21(水)19:18 ID:nEbzRDrKH(2/3) AAS
連日すみません。
<link rel="stylesheet" src>で読み込んだcssの
cssStylesheetプロパティにアクセスする方法を教えていただけないでしょうか？
446: (JP 0H11-JDfe [126.249.157.89]) 2022/12/21(水)22:46 ID:nEbzRDrKH(3/3) AAS
すみません、ちょっとググってみます
449: (JP 0H11-JDfe [126.249.157.89]) 2022/12/22(木)07:18 ID:slpViawnH(1/3) AAS
>>447
それは試してみたんですけどundefinedなんですよね
他ファイルを参照した場合には、stylesheetがdocumentのプロパティになっていないようなのですよね
450(3): (JP 0H11-JDfe [126.249.157.89]) 2022/12/22(木)07:21 ID:slpViawnH(2/3) AAS
>>447
すみません、訂正です
document.styleSheetで参照すると
document.styleSheet.cssRulesがnullとなってしまうんです
document.styleSheetで登録されるのは
同じファイル内のスタイルだけのよう？
他のcssファイルに書かれたスタイルを操作するには
どうしたらいいのでしょうか？
に訂正願います
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
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
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
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
勘違い、混乱してました。ありがとうございます！
467(1): (JP 0H11-JDfe [126.249.157.89]) 2022/12/23(金)21:19 ID:OG24yN7PH(5/5) AAS
>>466
ローカルで、同じフォルダ内です
476: (JP 0H88-aH43 [126.249.157.89]) 2022/12/25(日)12:52 ID:GFtl9gAsH(1/5) AAS
皆さん、ありがとうございます
別シートのcssで可変にしたい部分を変数にし
読み込むシート側に変数専用のstyleタグを用意し
変数用のスタイルタグを編集することにしました
皆様いろいろとありがとうございました
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
480: (JP 0H88-aH43 [126.249.157.89]) 2022/12/25(日)15:40 ID:GFtl9gAsH(3/5) AAS
>>479
ありがとうございます！そうさせていただきます。
今後ともいろいろ教えてください。ありがとうござました！
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
ありがとうございます
次時間ができたときにぜひ調べて実行してみます
541(2): (JP 0H4f-ChaJ [126.249.157.89]) 2023/01/05(木)20:55 ID:XhDooIHVH(1/7) AAS
>>531
自分もあまりJS詳しくないんですけど
リテラルっていうのは、括るもの、という意味合いでは？
オブジェクトリテラルっていうのは波かっこで括るオブジェクト＝｛｝
文字列のリテラルは、""や’’
展開のリテラルは、``とか
関数のリテラルというのは、functionを指定した引数括弧つきのオブジェクトリテラルでfunction(){}
関数リテラルといえば、例えばfunction func(){...}
とした場合、{...}は変数funcに文字列として代入されます
そしてfuncは関数オブジェクトと指定されていて
省3
542: (JP 0H4f-ChaJ [126.249.157.89]) 2023/01/05(木)21:01 ID:XhDooIHVH(2/7) AAS
>>531
解決済みだったようですみませんでした
参考までに追加
function func(){return 1}
とした場合
console.log(func)
と
console.log(func())
を見比べるとわかりますが、
func変数の中身は、function指定された文字列で
省1
544(2): (JP 0H4f-ChaJ [126.249.157.89]) 2023/01/05(木)22:26 ID:XhDooIHVH(3/7) AAS
>>543
括る、というのはそういう意味かと
リテラルはリテラルなので括る必要はなくて
プリミティブは、これは文字列です、
これは配列です、
これはオブジェクトです
とエンジンに理解させるための記述なのかと思いまして
上下前次1-新書関写板覧索設栞歴
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 1.719s*