問題タブ [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.

0 投票する
3 に答える
69 参照

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 の差が生じます。私の意見では、それはモバイルデバイスにとってかなり大きな量です...

0 投票する
1 に答える
1223 参照

css - 複数の背景画像を持つ要素の背景を変更する

複数の div で CSS 背景を使用して、多数の大きな形式のボタンを作成しました。見た目は美しいですが、ボタンは動的に作成され、何千ものボタンが存在する可能性があります。これは巨大な動的 CSS スクリプトを意味します...各要素に同じプロパティを持つ異なる CSS 背景を与えるより良い方法はありますか?

コード例は次のとおりです - HTML:

など.... (これらは数千ある可能性があります)

CSS:

...動的 CSS ファイルでこのコード ブロックを何千回も繰り返す必要はありません。

バックグラウンド URL (変更される唯一のビット) を残りのコードから分離するにはどうすればよいですか?

ところで - スクリプト内に背景 URL をインラインで配置するだけでは機能しません。スタイルシート内のすべての CSS プロパティが無視されます。

前もって感謝します。

0 投票する
4 に答える
4615 参照

c# - ASP.NET MVC ActionLink で C# 変数を CSS クラス変数に割り当てる方法

@class以下の ActionLink コードで、C# 文字列変数をASP.NET MVC 5 のビューに割り当てるにはどうすればよいですか?

@class = "DynamicClassName"静的文字列を次のような動的なものに置き換えたい @class = @myChangingColorClass

0 投票する
1 に答える
1079 参照

jquery - jQuery を使用して動的インライン CSS 属性を変更する

クラス の divのmin-widthとの値を変更しようとしています。この div は動的に生成された幅を持っています。ブラウザー ウィンドウのサイズを変更すると、これらの値が変更されます。width.upb_row_bg

add_actionto を介してロードされているこのjQueryが機能しない理由wp_footerは何ですか? 問題があるかどうかはわかりませんが、これは私が変更しようとしている Visual Composer の要素です。

0 投票する
2 に答える
1639 参照

jquery - Scrollmagic/GSAP タイムラインに動的変数を含むトゥイーンを追加する

私は Jquery の初心者であり、私の問題の解決策は非常に簡単だと思っていたでしょうが、このコードの順列を何百万回も試しましたが、解決できません。

私は Scrollmagic と GSAP を使用しており、同じポイントから 3 つのトゥイーンをトリガーして、それらが次々と (わずかにオーバーラップして) 起動するようにしたいと考えています。シーンはduration: 0、ユーザーがアニメーションを開始するだけで、その進行を制御しないようにします。各トゥイーンには、同じオブジェクトで動作する CSS 変換が含まれています ( #boxes3d)。

私が目指している効果は次
のとおりです: 1) ボックスは平らに始まりますが、cssperspective850px
2) csstransform値を変更して、ボックスを 180 度回転させます。
3) 元に戻すと、ボックスが再び折りたたまれます。perspective: 50000.
[ 4) ユーザーがトリガーを過ぎて戻ると、アニメーションが反転します。]

複雑なのは、transformscale内部の絶対位置の div#boxes3dを任意の画面サイズのフレームに合わせるために、値に動的な値も組み込む必要があることです。値 (したがってscale全体) は、ネストされたand関数を含むtransform別の Jquery 関数によって動的に設定されます。 トゥイーンをキューに入れるには(または)を作成する必要があると思いますが、動的な CSS 値をタイムラインに入れるのに問題があります。 つなぎ合わせたいトゥイーン/トランジションを含むjsfiddleを作成しました。scaleDiv()rotate3D()reverse3D()

timelineMaxLite

scaleDiv2 番目のトゥイーンに組み込む必要がある関数。現在は別々のシーンになっていますが、1 つのシーン/タイムラインにまとめたいと考えています。

ここにフィドルがあります:http://jsfiddle.net/gbinning/vccxufou/13/。いくつかのガイダンスを本当に感謝します!ありがとうございます!

編集:関数を正しく設定していませんscaleDiv。ウィンドウのサイズを少し変更してトリガーする必要があります。

0 投票する
1 に答える
310 参照

mysql - 特定のdivのSQLデータベースからCSSの背景を変更する

プロパティが runat="server" に ID で設定されている div があります。行に記載されているパス URL である MySQL データベースから、その特定の div の動的な背景画像を配置しようとしています。現在はすべて正常に動作していますが、その特定の div のみにスタイルの影響を与える方法がわかりません。現在、そのページのすべての div で背景画像を取得する div のみを定義しています。コードでその div クラスまたは ID を定義するにはどうすればよいですか?

0 投票する
1 に答える
236 参照

javascript - 各要素の JSON からの動的 CSS

動的にレンダリングする必要がある API の要素があり、要素のスタイルは次のようになります。

Background のようなキーを background-color に、font を font-family Topmargin から margin-top にマッピングする最良の方法は何でしょうか。