プログラミング html

9

divに複数の行を追加し、それらを削除できるようにしたい。ページの上部にコンテンツを追加するための「+」ボタンがあります。次に、すべての行の右側に、その行を削除するための「-」ボタンがあります。この例では、JavaScriptコードを理解できません。これが私の基本的なHTML構造です。 <input type="button" value="+" onclick="addRow()"> <div id="content"> </div> これは私がコンテンツdiv内に追加したいものです： <input type="text" name="name" value="" /> <input type="text" name="value" value="" /> <label><input type="checkbox" name="check" value="1" />Checked?</label> <input type="button" value="-" onclick="removeRow()">

80 javascript html innerhtml

4

Webpackファイルローダー出力[オブジェクトモジュール]

でwebpackを使用しています HtmlWebpackPlugin、html-loaderとfile-loader。フレームワークを使用せず、typescriptのみを使用する単純なプロジェクト構造があります。したがって、HTMLコードを直接に記述しindex.htmlます。また、このHTMLファイルをのテンプレートとして使用していますHtmlWebpackPlugin。すべてのWebサイトと同じように、PNGを参照する画像をアセットフォルダーに配置する必要があります。file-loader新しいファイル名をsrcタグ内に正しく配置してファイルをロードする必要がありますが、それは何が起こっているのかではありません。代わりに、srcタグの値として、があります[object Module]。私は、file-loaderいくつかのオブジェクトを放出し、その.toString()メソッドが実行されると、このように表されると想定しています。ただし、file-loaderファイルが正常に処理され、新しい名前で出力パスに出力されたことがわかります。エラーは発生しません。これが私のwebpack設定とindex.htmlです。 const projectRoot = path.resolve(__dirname, '..'); { entry: path.resolve(projectRoot, 'src', 'app.ts'), mode: 'production', output: { path: path.resolve(projectRoot, 'dist'), filename: 'app.bundle.js' }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.html$/i, use: 'html-loader' }, { test: /\.(eot|ttf|woff|woff2|svg|png)$/i, use: 'file-loader' }, { test: /\.scss$/i, use: …

40 javascript html webpack

4

CSSを使用して不均等にDIVを中央に配置する

フレックスボックスを使用して、DIVを別のDIVの中央に配置しています。必要に応じて画面の中央にポップアップするダイアログウィンドウを考えてみてください。正常に機能しますが、ダイアログの上下のスペースが完全に等しくなく、ダイアログの上下に残りのスペースの40％と60％があると、見栄えがよくなります。内部のテキストの量によってダイアログの高さが変わるため、注意が必要です。たとえば、ブラウザの高さが1000ピクセルで、ダイアログウィンドウの高さが400ピクセルの場合、残りの垂直方向のスペース（600ピクセル）をダイアログの上240ピクセル、下360ピクセルにしたいとします。私はJavaScriptでそれを行うことができますが、CSSでいくつかの巧妙な方法があるかどうか知りたいです。#dialogBox DIVに下マージンを追加しようとしましたが、ダイアログの高さがブラウザーの高さに近づくと機能しません。 #dialogBoxPanel { position:absolute; display:flex; align-items:center; justify-content:center; left:0px; top:0px; width:100%; height:100%; } #dialogBox { width:350px; } <div id="dialogBoxPanel"> <div id="dialogBox">Text</div> </div> コードスニペットを実行するHide resultsスニペットを展開

23 html css flexbox centering

10

同じ背景色を持つ3つのdiv間の奇妙なギャップを削除するにはどうすればよいですか？

私はこの問題にかなり長い間取り組んでいます。この問題は、モバイルデバイス（AndroidおよびiOS）で確認できます。一部のデバイスでは、少しズームインする必要がある場合があります。PCでは、モバイルモードに切り替えるときにChromeブラウザーでこのバグを再現することもできます。以下は、バグを再現するために使用するコードです。 <!DOCTYPE html> <html lang="en"> <head> <style> .top { height: 100px; background-color: #553213; } .middle { height: 100px; background-color: #553213; } .bottom { height: 100px; background-color: #553213; } </style> </head> <body> <div style="width:300px; height: 300px"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> </body> </html> コードスニペットを実行する結果を非表示スニペットを展開期待される結果は、＃553213色で満たされるdivになります。ただし、一部のモバイルデバイスでは、これらの3つのdivの間に追加の線（またはギャップ）が表示されます。 Om my iPhone 私のPCでは、モバイルモードでChromeブラウザを使用しています …

23 html css

5

2つのiframeを比較して違いを視覚的に取得する方法は？

ケース：私には2つのiframeがあり、両方に多くのdivと他のコントロールがあるので、両方のiframeは中規模のHTML Webサイトのようなものです。両方を比較して違いを見つけたいです。私はここでさまざまなオプションを考えました：解決策1： 2つのiframeの完全なスクリーンショットを取り、スクリーンショットの不一致領域にグリッドを描画するPythonの枕ライブラリを使用して両方のスクリーンショットを比較します。しかし、ここで問題となるのは、iframeの完全なスクリーンショットを撮ることができるコードがインターネット上で見つからなかったことです（スクロールバー付きの長いiframeがあります）。私はSOでほぼすべての答えを試しましたが、すべては通常のページで機能していますが、iframeでは機能しません。リファレンス：https : //blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196 解決策2：何らかの方法ですべてのHTMLコードをiframeから取得して比較しますが、2つのiframeで異なるまたは不一致のHTMLコードが見つかるため、結果を分析するのは簡単ではありません。これはテキスト比較のようなものであり、私が信じている良い解決策ではありません。したがって、PythonまたはJavaScriptを使用してiframeの完全なスクリーンショットを撮ることができるコード、または 2つのiframeを比較して違いを見つけることができるいくつかのより良いオプションを探しています。私は以下のようにグーグルが見つけるほとんどすべての答えを試しました：：全体のHTMLはインラインフレーム内にあるどこサンプルインラインフレームをここに与えられているhttps://grapesjs.com/demo.html、いくつかのコードは、このIFRAMEのフルスクリーンショットを撮ることができた場合は、私のために、比較しやすいだろう。

21 javascript python html selenium-webdriver iframe

5

JavaScriptでtextareaから選択されたテキストの位置を取得するにはどうすればよいですか？

JavaScriptを使用して、選択したテキストの位置を取得したい。たとえば、単純なテキストエリアがあります。 #input-text { resize: none; width: 50%; height: 50px; margin: 1rem auto; } <textarea id="input-text">I am a student and I want to become a good person</textarea> コードスニペットを実行する結果を非表示スニペットを展開私のテキストエリアには、次のようなテキストがあります。 "I am a student and I want to become a good person" この文字列から、textareaから "become a good person"を選択した場合、JavaScriptで選択したテキスト/文字列の位置を取得するにはどうすればよいですか？ここでは、選択した文字列文字は29で始まり、49で終わります。したがって、開始位置は29で、終了位置は49です。

20 javascript html

7

以前に設定した境界線の色を削除します

20 javascript html css

8

2つのHTMLページが同一に見えることをどのように証明できますか？

たとえば、私はこれを持っています： <pre> sun<br/> &nbsp;&nbsp;&nbsp;&nbsp;mercury <br/> &nbsp;&nbsp;&nbsp;&nbsp;venus <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/> &nbsp;&nbsp;&nbsp;&nbsp;saturn <br/> </pre> コードスニペットを実行する結果を非表示スニペットを展開この： <div style="font-family:monospace"> <div style="text-indent: 0">sun</div> <br/> <div style="text-indent: 4ch">mercury</div> <br/> <div style="text-indent: 4ch">venus</div> <br/> <div style="text-indent: 8ch">earth</div> <br/> <div style="text-indent: 8ch">mars</div> <br/> <div style="text-indent: 12ch">jupiter</div> <br/> <div style="text-indent: 4ch">saturn</div> <br/> </div> コードスニペットを実行する結果を非表示スニペットを展開 …

19 html css acid3

5

垂直にスクロールするときに水平スクロールを許可しない（およびその逆）

overflow-xとにoverflow-y設定したリストがありますauto。さらに、モメンタムスクロールを設定したので、を使用してタッチスクロールがモバイルでうまく機能しwebkit-overflow-scrolling: trueます。ただし、問題は、垂直にスクロールするときに水平スクロールを無効にする方法がわからないことです。左上または右上にスワイプするとテーブルが斜めにスクロールするため、ユーザーエクスペリエンスが非常に低下します。ユーザーが垂直方向にスクロールしているときは、ユーザーが垂直方向のスクロールを停止するまで、水平方向のスクロールは絶対にしたくない。私は以下を試しました： JS： offsetX: number; offsetY: number; isScrollingHorizontally = false; isScrollingVertically = false; //Detect the scrolling events ngOnInit() { this.scrollListener = this.renderer.listen( this.taskRows.nativeElement, 'scroll', evt => { this.didScroll(); } ); fromEvent(this.taskRows.nativeElement, 'scroll') .pipe( debounceTime(100), takeUntil(this.destroy$) ) .subscribe(() => { this.endScroll(); }); } didScroll() { if ((this.taskRows.nativeElement.scrollLeft != this.offsetX) …

17 javascript html css angular ionic-framework

10

ラップアラウンドで同じサイズのdivを作成する

上と下に画像とテキストを含むメニューシステムを作成しようとしています。データは動的です。メニューシステムを表示して、各画像が他の画像から等距離になり、水平方向と垂直方向の両方で画像のグリッドに整列するようにしたいと考えています。問題はテキストです。テキストが画像より長い場合、divは拡大されます。ただし、画像が互いに等間隔に配置されなくなるため、見苦しいギャップが生じます。これを回避するための最善の方法は、他の各divに大きいdivのサイズを採用させることだと思います。ただし、これをどのように行うかはわかりません。 flex-wrapプロパティを使用してflexboxで試しました。うまく折り返していますが、各画像を等距離で並べる方法を見つけることができませんでした。これを達成するにはどうすればよいですか？私のコードは次のとおりです： #outer { display: flex; } #main { display: flex; justify-content: space-between; flex-wrap: wrap; border: solid black 25px; border-radius: 25px; width: 450px; height: 500px; padding: 20px; } .section { background-color: #ddd; padding: 15px; } .label, .icon { text-align: center; } <div id="outer"> <div id="main"> <div …

17 html css flexbox

2

等間隔の破線の円を作成するにはどうすればよいですか？

CSSで点線の円を作りたかったので、以下の手順で作成しました。この処理で破線の円を表示することはできましたが、破線の終点と始点の間隔が狭くなり、間隔が均一でなくなりました。 .c { width: 500px; height: 500px; border-width: 15px; border-style: dashed; border-radius: 600px; } <div class="c"></div> コードスニペットを実行する結果を非表示スニペットを展開ギャップを均一にする方法はありますか？ダッシュ間のギャップも制御できますか？ CSSだけではそれが不可能な場合は、JavaScriptなどを使用することを検討しています。

16 javascript html css

8

Ctrl +クリックを使用して複数のセルを選択する方法

数字の表があります。テーブルのセルをクリックすると、アクティブ状態が切り替わります。1つのセルを選択してcrtlを押し、別のセルを選択すると、1番目と2番目のセルがアクティブになります。それを実装する方法？ codepen https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> const grid = document.getElementById("grid") grid.onclick = (event) => { event.stopPropagation(); const { className } = event.target; if (className.includes('cell')) { if (className.includes('active')) { event.target.className = 'cell'; } else { event.target.className = 'cell active'; …

16 javascript html css

3

マルチレベルドロップダウンリストを作成し、サーバーからのデータにバインドする方法

Angularは初めてです。Angularに関するいくつかの作業があります。 JsonRest Apiを呼び出して、サーバーから送信されるデータのネストされたドロップダウンリストをバインドする必要があります。データには1つの属性がLgLevelあり、グループの階層内のレベルを指定します。親にはlevel=0、即時Child=1、Grandchild=2などがあります。Childそして、GrandchildしているParentLocationGroup分野、番組内の親メニューは、子メニューが存在します。これは私のjsonデータです。膨大なデータがありますが、すべてを示しているわけではありません。 { "ArrayOfLocationGroup": { "LocationGroup": [ { "Id": "628", "Name": "TEST1", "GroupId": { "_xmlns": "http://www.air-watch.com/servicemodel/resources" }, "ParentLocationGroup": { "_uuid": "bdce4396-9c60-4831-90f2-6f793becb362", "__text": "570" }, "LgLevel": { "_xmlns": "http://www.air-watch.com/servicemodel/resources", "__text": "0" } }, { "Id": "630", "Name": "TEST2", "GroupId": { "_xmlns": "http://www.air-watch.com/servicemodel/resources", "__text": "PAM-TEST" }, "ParentLocationGroup": { "_uuid": …

15 html angular typescript

4

CSSの「ローラーコースター」アニメーションでラインをカーブさせるにはどうすればよいですか？

CSSでジェットコースタースタイルのアニメーションを作成しようとしています。「コースター」をループ段階でカーブさせる方法を知りたい。私はすべてのCSSソリューションを探していますが、JavaScriptが少し必要な場合はそれで問題ありません。これまでの私のコード： #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: 10px; background: lightblue; position: absolute; bottom: 0; left: 1px; right: 1px; margin: 0 auto; } @keyframes loop { from { margin-left: -200px; } 30% …

15 html css css-animations css-transforms

6

固定フレックスボックスナビゲーションメニューの下にスクロール可能なコンテンツを配置する

次のスニペット（全画面モードで表示する必要があります）があり、<main>要素のすぐ下に<header>要素を配置しようとしています。私が持っている<header>、私はそれがでコンテンツをスクロールなどの画面の上部に滞在したいので、固定位置での<main>要素。私は知っているすべてのことを試しましたが、思いつくことができる最善の方法は、<header>要素を要素の上に配置して<main>、コンテンツの大きなチャンクを切り取ることです。私が思いついた最も近い可能な解決策は、推定された上部パディングを<main>要素に置くこと<header>です。ただし、pxではなくrem sizingを使用しているため、このソリューションはさまざまな画面サイズを十分に考慮していません。<header>相対またはパーセンテージベースの高さを使用する内にいくつかの要素を配置すると、上部パディングのアイデアはさらに悪化します。ある画面サイズではすべてが完璧に並ぶ場合があり、別の画面サイズではコンテンツが途切れる場合があります。最後に、jQueryを使用して動的に上部のパディングを設定できることはわかっていますが、常にうまく機能するとは限りません。純粋なcss / htmlソリューションがあるのだろうか。私がここで欠けているものを誰かに教えてもらえますか？私のトップパディング方法が唯一の実行可能なソリューションですか？ $(document).ready(function() { $('#navToggle').click(function() { $("div#bottom-container > nav").slideToggle(); }); $(window).resize(function() { if(window.innerWidth >= "751") { $("header > div#bottom-container > nav").show(); }else { $("header > div#bottom-container > nav").hide(); } }); $("header > div#bottom-container > nav > ul > li > a").click(function(e) { if (window.innerWidth <= …

15 html css css-position fixed

タグ付けされた質問 「html」

タグ付けされた質問「html」