問題タブ [dynamic-css]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - 要素と子に CSS ファイルを追加する
私は現在、いくつかの CSS スタイルのライブラリを作成しています (jQuery で定義されているものもあります。そのため、解決策として JavaScript/jQuery を自由に使用してください。通常の CSS ではどちらの方法でも可能ではないと思います)。
特定のクラス (例では .style-container) を持つ親要素が存在する場合にのみ適用されるはずのパーツがいくつかあります。
もちろん、これはすべての CSS セレクターの前にクラスを追加することで可能です。
ただし、転送する必要があるデータがさらに多く必要になるため、CSS ファイルを適用する可能性があり、それは特定の要素だけのコンテンツであり、ドキュメント全体ではなく子であると考えました。
この CSS を想像してみてください (かなり単純化されています):
この HTML ドキュメント (本文の一部):
そして今、クラスとその子要素を持つすべての要素のファイルをロードするための JavaScript/jQuery がいくつかあるかもしれません。
ノート:
以前はなかった JavaScript/jQuery を介して新しい要素が表示される可能性があり、コンテンツが非常に速く変更された場合に、読み込みに多くのリソースが必要になる可能性があるため、スタイル全体を再度読み込みたくありません。
また、待機することもできません。待機している間、要素のスタイルが設定されないためです。
編集: もう一度指摘します: 標準の CSS 子セレクターよりも優れたオプションを探しています。これは次のように機能します。
サーバーからクライアントに転送されるデータが多くなるため、これが必要です。これを理解するには: コードの一部を最小化した形式でセレクターを使用する場合と使用しない場合があります。セレクターがあるバージョンは 3698 文字、セレクターがないバージョンは 2538 文字必要です。それは1160文字の違いです。または、kB では、3.61kB - 2.47kB = 1.14kB の差があります。それは非常に小さいように見えますが、コードのごく一部にすぎません。コードは 10 倍の大きさになると予想しています。これにより、11.4kB の差が生じます。私の意見では、それはモバイルデバイスにとってかなり大きな量です...
css - 複数の背景画像を持つ要素の背景を変更する
複数の div で CSS 背景を使用して、多数の大きな形式のボタンを作成しました。見た目は美しいですが、ボタンは動的に作成され、何千ものボタンが存在する可能性があります。これは巨大な動的 CSS スクリプトを意味します...各要素に同じプロパティを持つ異なる CSS 背景を与えるより良い方法はありますか?
コード例は次のとおりです - HTML:
など.... (これらは数千ある可能性があります)
CSS:
...動的 CSS ファイルでこのコード ブロックを何千回も繰り返す必要はありません。
バックグラウンド URL (変更される唯一のビット) を残りのコードから分離するにはどうすればよいですか?
ところで - スクリプト内に背景 URL をインラインで配置するだけでは機能しません。スタイルシート内のすべての CSS プロパティが無視されます。
前もって感謝します。
c# - ASP.NET MVC ActionLink で C# 変数を CSS クラス変数に割り当てる方法
@class
以下の ActionLink コードで、C# 文字列変数をASP.NET MVC 5 のビューに割り当てるにはどうすればよいですか?
@class = "DynamicClassName"
静的文字列を次のような動的なものに置き換えたい @class = @myChangingColorClass
jquery - jQuery を使用して動的インライン CSS 属性を変更する
クラス の divのmin-width
との値を変更しようとしています。この div は動的に生成された幅を持っています。ブラウザー ウィンドウのサイズを変更すると、これらの値が変更されます。width
.upb_row_bg
add_action
to を介してロードされているこのjQueryが機能しない理由wp_footer
は何ですか? 問題があるかどうかはわかりませんが、これは私が変更しようとしている Visual Composer の要素です。
jquery - Scrollmagic/GSAP タイムラインに動的変数を含むトゥイーンを追加する
私は Jquery の初心者であり、私の問題の解決策は非常に簡単だと思っていたでしょうが、このコードの順列を何百万回も試しましたが、解決できません。
私は Scrollmagic と GSAP を使用しており、同じポイントから 3 つのトゥイーンをトリガーして、それらが次々と (わずかにオーバーラップして) 起動するようにしたいと考えています。シーンはduration: 0
、ユーザーがアニメーションを開始するだけで、その進行を制御しないようにします。各トゥイーンには、同じオブジェクトで動作する CSS 変換が含まれています ( #boxes3d
)。
私が目指している効果は次
のとおりです: 1) ボックスは平らに始まりますが、cssperspective
値850px
を
2) csstransform
値を変更して、ボックスを 180 度回転させます。
3) 元に戻すと、ボックスが再び折りたたまれます。perspective: 50000
.
[ 4) ユーザーがトリガーを過ぎて戻ると、アニメーションが反転します。]
複雑なのは、transform
scale
内部の絶対位置の div#boxes3d
を任意の画面サイズのフレームに合わせるために、値に動的な値も組み込む必要があることです。値 (したがってscale
全体) は、ネストされたand関数を含むtransform
別の Jquery 関数によって動的に設定されます。
トゥイーンをキューに入れるには(または)を作成する必要があると思いますが、動的な CSS 値をタイムラインに入れるのに問題があります。
つなぎ合わせたいトゥイーン/トランジションを含むjsfiddleを作成しました。scaleDiv()
rotate3D()
reverse3D()
timelineMax
Lite
scaleDiv
2 番目のトゥイーンに組み込む必要がある関数。現在は別々のシーンになっていますが、1 つのシーン/タイムラインにまとめたいと考えています。
ここにフィドルがあります:http://jsfiddle.net/gbinning/vccxufou/13/。いくつかのガイダンスを本当に感謝します!ありがとうございます!
編集:関数を正しく設定していませんscaleDiv
。ウィンドウのサイズを少し変更してトリガーする必要があります。
mysql - 特定のdivのSQLデータベースからCSSの背景を変更する
プロパティが runat="server" に ID で設定されている div があります。行に記載されているパス URL である MySQL データベースから、その特定の div の動的な背景画像を配置しようとしています。現在はすべて正常に動作していますが、その特定の div のみにスタイルの影響を与える方法がわかりません。現在、そのページのすべての div で背景画像を取得する div のみを定義しています。コードでその div クラスまたは ID を定義するにはどうすればよいですか?
javascript - 各要素の JSON からの動的 CSS
動的にレンダリングする必要がある API の要素があり、要素のスタイルは次のようになります。
Background のようなキーを background-color に、font を font-family Topmargin から margin-top にマッピングする最良の方法は何でしょうか。