クリック/HTMLでボタンの背景色を変更する方法

「続きを読む」に似たボタンを作成し、それを押すとテキストが下に展開されます。テキストが拡大されるとボタンの背景が変わり、もう一度ボタンを押してテキストを閉じると（例：「少なく読む」）、ボタンの背景は元の状態に戻ります。この関数の実装方法 functionmyFunction(){vardots=document.getElementById("dots");varmoreText=document.getElementBy

P粉502608799 2023-09-08 00:04:48 0  1  513

ダイアログのフローティングボタンが重なり続ける

こんにちは、私は Mauiblazor アプリを構築しています。その中にフローティング ボタンのあるフル ページ サイズのダイアログがあります。ダイアログを閉じて元のページに戻ると、元のページではダイアログ ボタンの位置にデッドスペースができてしまいます（ダイアログ上では条件に基づいてボタンの表示/非表示を変更しています）。フローティングボタンに使用しているスタイル: .center{bottom:5%;z-index:999;cursor:pointer;margin:0;position:fixed;left:50%;-

P粉032977207 2024-03-22 08:20:59 0  1  384

サードパーティサーバーから画像をダウンロードボタン

どのブラウザでも、画像が表示されたら右クリックし、[名前を付けて保存] をクリックしてダウンロードできます。画像をダウンロードするボタンを作ろうとしているのですが、ダウンロードボタンは上記の画像、バーコードをダウンロードするはずです。私は反応を使用していますが、これが答えに関連しているかどうかはわかりません。 <a/> タグを download 属性とともに使用できると読みましたが、Firefox を使用していると、バーコード画像をホストしているページにリダイレクトされ、ダウンロード ウィンドウが開きません。コードは非常に単純で、次のとおりです。表示: <ahref='ht

P粉198670603 2024-02-21 14:47:20 0  1  361

Angularでモーダルの外側をクリックしたときにモーダルが閉じないようにするにはどうすればよいですか?

この問題に関するいくつかの Q&A を読みましたが、すべての提案は非常に単純な解決策です。モーダルを開くボタンの HTML タグに data-backdrop="static" data-keyboard="false を追加します。私にとっては、このボタンは:<buttontype="button"class="btnbtn-primarybtn-dange

P粉805107717 2023-09-13 20:32:07 0  1  732

テキストとアイコンが中央に配置されたボタン

アイコンとテキストを含むボタンコンポーネントを開発しています。アイコンはボタンの左側に配置され、テキストはボタンの中央に配置されます。テキストがボタンに収まらない場合は、折り返さずに切り詰めてください。テキストを切り詰める重要な条件は、テキストがボタンの端からアイコンまでの距離と同じ距離にあることです。したがって、ボタンに均等なインライン パディングを追加することはできません。テキストが切り取られない場合は、ボタンの中央に配置されます。ただし、アイコンに重なったり、ボタンに収まりきらなかったりすると、テキストが切れてしまいます。つまり、通常の状態ではアイコンの位置は変わりませんが、テキストのス...

P粉033429162 2023-08-15 11:01:09 0  1  522

要素自体がクリックされたとき、または他のボタンがクリックされたときに要素のプロパティ値をリセットするにはどうすればよいですか?

クリックをリッスンするプレーンな JavaScript があり、クリックされると 4 つの処理が行われます。「form-opened」クラスがボタンに追加され、「aria-expanded」属性が「true」に設定されて、以前に非表示になっていた div が表示されます。 。ボタンの「後」テキストは「Closeinfo」に変わります (これは、ボタンに新しいクラス「form-opened」が含まれているかどうかに基づいて CSS によって制御されます)。別のボタンをクリックすると、最初にクリックしたボタンでは逆のことが起こります。 、追加されたクラスは削除され、「aria-expanded」属...

P粉652495194 2024-03-28 14:38:32 0  1  449

すべてのアコーディオンのオンとオフを切り替えるボタンを設定するにはどうすればよいですか?

次のコードを使用して折りたたみ可能なアコーディオンを作成するコンポーネントがあります: importReact,{useState}from'react';constCollapsible=(props)=>{const[open,setOpen]=useState(false);consttoggle=()= > {setOpen(!open);}return(<div><buttonclassName={

P粉391677921 2023-08-30 16:57:51 0  2  669

MUI スイッチで React Hook Form 7 を使用する方法

MUI スイッチで React-Hook-form を使用する場合、値が true に設定されていても、ページの読み込み時にスイッチに初期値が表示されません。ただし、ボタンに触れずにフォームを送信すると、値が true として定義されているスイッチに対して true が返されるため、これは表示の問題であるようです。さらに、これらのボタン (false として表示) を 1 回クリックしても効果はなく (ボタンは左側に残ったままになります)、2 回目のクリックで実際に再び切り替わります。フックを使用して初期値を設定します (他のすべてのフィールド タイプに適用されます): useEff

P粉231112437 2023-09-16 19:43:09 0  1  616

mysql - postgreSQL データベースはテーブルのフィールドのデフォルトの照合順序をどのように設定しますか?

ここで、日付フィールドを含む新しいテーブルを作成します。すべてのデータ行が表示されている場合、並べ替えフィルター ボタンの設定から並べ替え規則を変更できますが、ウィンドウを閉じて再度開くと、再び表示が乱れます。どうやって解決すればいいでしょうか？

怪我咯 2017-05-17 10:01:37 0  1  902

laravel という名前に一致する別のテーブルからデータを取得する

始める前に、コードが英語ではないため、いくつかの翻訳を行います。 プロバイダー = サプライヤー ジョブ = ジョブ したがって、サプライヤー テーブルとワークシートの 2 つのテーブルがあります。各サプライヤーは複数の作品を所有できますが、各作品は 1 つのサプライヤーのみが所有できます。 1 対多の関係である必要があります。これは私のテーブルベンダーテーブルワークベンチなので、フレームとしてLARAVELを使用しています。アクションボタンを備えたベンダーテーブルを作成しました。これを機能させたいのですが、ボタンをクリックすると、正確なベンダー名が所有するジョブのリスト（pekerjaan）...

P粉378264633 2024-01-29 12:28:44 0  1  406

ボタンに属性無効を設定できません

以下に示すコードでは、ボタンを作成し、disable 属性を追加する子コンポーネントを開発しています。以下のコードでは、disable プロパティに赤の下線が引かれ、エラー メッセージが表示されます: Type '"isDigitizePolygonDisabled"' can be assign to type 'Booleanish|unknown' disable プロパティを正しく設定する方法を教えてください コード: import{ref} 「vue」レティスから

P粉039633152 2023-08-16 20:54:18 0  1  515

マウスが離れる前にすべての値をコミットするのではなく、マウスが離れたときにスライダーの値をコミットするにはどうすればよいですか?

入力ボックスとスライダーがあります。スライダーの範囲は 1 から 100 です。トグル スイッチとドロップダウン メニューがあるため、スライダーを含む送信ボタンを使用する代わりに、onChange イベントを使用して各フィールドへの変更を処理します。しかし、問題があります。スライダーを 1 から 50 まで変更しようとすると、1 から 50 までのすべての値が onChange イベントで送信されます。

P粉129731808 2023-07-27 15:35:18 0  1  576

JavaScript - サブウィンドウがポップアップし、操作後に閉じられます。メイン ウィンドウは、Web サイトのログイン インターフェイス、Django バックグラウンド管理など、対応する応答を取得します。これはどのように実現されますか?

Web 開発を学習していて、同様の機能を実装したいと考えています。以下は Django 管理者の例です: たとえば、自分が所属するプロジェクトを追加または編集したい場合は、赤丸内のボタンを直接クリックし、小さなボタンをクリックします。ウィンドウがポップアップします: 入力後、小さなウィンドウがポップアップします: ウィンドウが閉じられ、メイン ウィンドウがそれに応じて応答します。 ...

阿神 2017-06-05 11:10:39 0  2  842

HTML、CSS、SVG を使用してスケーラブルな標識を作成する

道標（先端のある長方形）の形のボタンを作成したいと考えています。 _______|\|_______/各テキストの長さが異なるテキストを動的にロゴに書き込みたいと考えています。グラフィックのみを背景グラフィックとして使用してこれを試してみると、矢印はそれに応じて拡大縮小および圧縮/伸縮されます。したがって、これを行う方法は、テキストを通常の div に配置し、CSS:after を使用して矢印を SVG として追加することです。矢印は完全に塗りつぶされているはずです。つまり、フレームの問題に対処する必要はありません。 （見やすくするためにSVGを黒のままにしました）最初の問題は、矢印が常にブロ...

P粉555682718 2024-03-31 14:45:14 0  1  444

キャッチされない TypeError: this.saveAlpha は eval の関数ではありません

このコードには、開始ボタン、停止ボタン、タイマーがあります。このリンクに示されているように、DeviceOrientationEvent などの情報と、絶対、アルファ、ベータ、ガンマなどのプロパティを電話から取得したいと考えています。このようなイベントを使用したことがないので、このようなことを行う方法がわかりません。これらのイベントを受信した後、それらをdirections[]などに保存します。 <テンプレート><q-pagepadding><divclass=&quot

P粉930534280 2024-03-27 11:22:56 0  1  475

Ex-Admin は、グラフィカルなドラッグ アンド ドロップを使用して、JS を意識せずに CURD を生成し、PHP コードのみを使用してバックエンド システムを迅速に構築できます。

Ex-AdminEx-Admin は、Vue の Ant Design をベースに開発されたバックエンド システム構築ツールで、ページ テンプレートの JavaScript を意識する必要がなく、PHP コードのみで十分な機能を備えたバックエンド システムを迅速に構築できます。 。 [中国語ドキュメント][デモ / オンラインデモ][github] [gitee(codecloud)] グラフィカルカードチュートリアル機能 - 柔軟な設計、さまざまな PHP フレームワークへのアクセス、バックエンド コンポーネントのオブジェクト指向プログラミング、コンポーネント ベースの開発をサポート

Rocky 2022-07-21 12:27:18 0  0  795

純粋な Javascript を使用して画像置換のためのトランジション効果を実装する

私が作成した Web サイトには多数のアコーディオンがあり、それぞれの上部に画像があります。アコーディオンを開くと中に説明があり、画像が切り替わります。アコーディオンを閉じると、画像は最初の画像に戻ります。問題は、この画像の変更には、フェード効果を伴う滑らかな遷移を持たせたいのですが、現在は単なる突然の変更であるということです。どうすればいいですか？アコーディオン ボタンの ID が「button」で、最初の画像 (2 番目の画像に変更されます) を含むラベルの ID が「firstimage」だとします。これはJavaSです

P粉458913655 2024-03-30 00:14:11 0  1  423

「x」または「閉じる」ボタンをクリックしてもブートストラップのモーダル ボックスを閉じることができません

クリックしてモーダルを開くと、モーダルは正常に表示され、閉じるボタンにはマウスが上に置かれていることが表示されますが、クリックしても何も起こらず、モーダルは開いたままになります。これまでにこの問題に遭遇した/解決した人はいますか?ここでは「data-bs-dismiss」を追加しているだけですが、これはスキーマには影響しません。私はブートストラップを初めて使用するので、あらゆる助けをいただければ幸いです。コードは次のとおりです。完全なコードへのリンク-<!DOCTYPEhtml><html><head&g

P粉809110129 2024-03-29 23:39:12 0  1  444

Vue 3 の v-for ループでボタンのアクティブ状態を切り替える

Vue3 でフィルター ヘッダーを作成しています。そこでは表示するカテゴリを選択できるため、スイッチをクリックしてフィルターを切り替えることができます。別のカテゴリをクリックすると、前のアクティブなカテゴリの選択が 1 回だけ解除されます。アクティブなカテゴリがありません。この jsfiddle のように、トグル ボタン (選択を解除するにはもう一度クリック) がなく、v-for ループを使用していない例をいくつか見つけました。これを v-for ループに変換できる自信はありますが、切り替えを簡単に行う方法、および一度に 1 つのアクティブ カテゴリのみを使用する方法がわかりません。これは私で...

P粉046878197 2023-08-27 09:44:54 0  1  474

スクロール イベント リスナーが要素に追加されましたが、scrollTop が 0 に等しくない場合にのみ正しく移動します

そこで、完了済みタスクとアクティブなタスクという 2 つのリストがあるこの小さなスクリプトを作成しました。ボタンをクリックするとタスク リストを切り替えることができ、[詳細情報] をクリックするとタスクの詳細を読むことができます。 「詳細情報」をクリックすると、新しい div 要素が作成され、そのホスト要素の Y 位置を追跡したいのですが、途中まで機能します。これは次のようになります: ここに画像の説明を入力してください これはバグです。スクロール可能な要素のscrollTopが0でない場合にこのエラーが発生すると確信しています(これは正しい方法で作成されており、スクロールを開始するとすべて上...

P粉427877676 2024-04-01 11:03:26 0  1  574