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

HTML(HyperText Markup Language)は、Webブラウザーに表示されるWebページやその他の情報を作成するための主要なマークアップ言語です。HTMLに関する質問には、最小限の再現可能な例と、何を達成しようとしているのかについての考えを含める必要があります。このタグが単独で使用されることはほとんどなく、[CSS]や[javascript]と組み合わせられることがよくあります。

5
src属性とdata-src属性の違いは何ですか?
タグの属性data-srcまたはタグのsrc属性の使用の違いと結果(良い点と悪い点の両方)はimg何ですか?両方を使用して同じ結果を得ることができますか?もしそうなら、いつそれぞれを使うべきですか?
101 html  image 

3
innerHTMLは非同期ですか?
私は自分を馬鹿にしないでほしいと思いますが、次の2行のコードで何が起こっているのかを理解しようとしています。 document.body.innerHTML = 'something'; alert('something else'); 私が観察しているのは、HTMLが更新される前(または更新されているがページが更新/再描画されていないなど)の前にアラートが表示されることです。 このコードペンをチェックして、私の意味を確認してください。 でも置くことに注意してくださいalertにはsetTimeout(..., 0)役立ちません。innerHTML実際にページを更新するには、より多くのイベントループが必要のようです。 編集: Chromeを使用していることを忘れて、他のブラウザをチェックしていません。Chromeでのみ表示されるようです。それにもかかわらず、なぜそれが起こっているのか私はまだ興味があります。

4
無効な入力フィールドの値を送信する
入力フィールドを無効にしたいのですが、フォームを送信してもフォームは値を渡します。 使用例:Googleマップから緯度と経度を取得して表示したいのですが、ユーザーが編集したくありません。 これは可能ですか?
101 javascript  html 

7
TypeScript:型システムの問題
私はVisualStudio 2012でtypescriptをテストしているだけで、その型システムに問題があります。私のHTMLサイトには、「mycanvas」というIDのcanvasタグがあります。このキャンバスに長方形を描こうとしています。これがコードです var canvas = document.getElementById("mycanvas"); var ctx: CanvasRenderingContext2D = canvas.getContext("2d"); ctx.fillStyle = "#00FF00"; ctx.fillRect(0, 0, 100, 100); 残念ながらVisualStudioは不平を言います プロパティ「getContext」は、タイプ「HTMLElement」の値に存在しません 2行目をエラーとしてマークします。これは単なる警告だと思いましたが、コードはコンパイルされません。VisualStudioはそれを言う ビルドエラーがありました。最後に成功したビルドを続行して実行しますか? このエラーはまったく気に入らなかった。動的メソッド呼び出しがないのはなぜですか?結局のところ、getContextメソッドは間違いなくcanvas要素に存在しています。しかし、この問題は簡単に解決できると思いました。canvasの型注釈を追加しました: var canvas : HTMLCanvasElement = document.getElementById("mycanvas"); var ctx: CanvasRenderingContext2D = canvas.getContext("2d"); ctx.fillStyle = "#00FF00"; ctx.fillRect(0, 0, 100, 100); しかし、型システムはまだ満足されていませんでした。これが新しいエラーメッセージです。今回は1行目にあります。 「HTMLElement」を「HTMLCanvasElement」に変換できません:タイプ「HTMLElement」にタイプ「HTMLCanvasElement」のプロパティ「toDataURL」がありません まあ、私はすべて静的型付けに専念していますが、これにより言語が使用できなくなります。型システムは私に何をしたいですか? 更新: Typescriptは確かに動的呼び出しをサポートしておらず、私の問題はタイプキャストで解決できます。私の質問は基本的にはこの1つのTypeScriptの複製です:HTMLElementのキャスト


3
iframeが読み込まれているかどうかをどのように検出できますか?
ユーザーがボタンをクリックした後にiframeが読み込まれたかどうかを確認しようとしています。 私が持っています $('#MainPopupIframe').load(function(){ console.log('load the iframe') //the console won't show anything even if the iframe is loaded. }) HTML <button id='click'>click me</button> //the iframe is created after the user clicks the button. <iframe id='MainPopupIframe' src='http://...' />...</iframe> 助言がありますか? ちなみに、私のiframeは動的に作成されます。最初のページの読み込みでは読み込まれません。

12
jQueryで単語を強調表示する
基本的に、テキストブロック内の特定の単語を強調表示する必要があります。たとえば、このテキストで「dolor」という単語を強調したいと思います。 <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <p> Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris. </p> 上記を次のように変換するにはどうすればよいですか? <p> Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit. </p> <p> Quisque bibendum sem ut lacus. Integer <span …
101 javascript  jquery  html 

15
コンテンツに基づいて動的にTwitter Bootstrapモーダルのサイズを変更する方法
YouTubeのビデオ、Vimeoのビデオ、テキスト、Imgurの写真など、さまざまな種類のデータを含むデータベースコンテンツがあります。それらの高さと幅はすべて異なります。インターネットを検索しているときに私が見つけたのは、サイズを1つのパラメーターに変更することだけです。ポップアップのコンテンツと同じである必要があります。 これは私のHTMLコードです。また、Ajaxを使用してコンテンツを呼び出します。 <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="ModalLabel"></h3> </div> <div class="modal-body"> </div> </div>

10
CSSガラス/ぼかし効果をオーバーレイで機能させるにはどうすればよいですか?
半透明のオーバーレイdivにぼかし効果を適用できません。次のように、divの背後にあるすべてをぼかしたいのですが。 これは動作しないjsfiddleです:http ://jsfiddle.net/u2y2091z/ これを機能させる方法はありますか?これをできるだけ複雑にせず、クロスブラウザにしたいと思います。ここに私が使用しているCSSがあります: #overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background:black; background:rgba(0,0,0,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); }
101 html  css  blur  css-filters 

3
フルハイトアプリでフレックスボックスと垂直スクロールを組み合わせるにはどうすればよいですか?
flexboxを使用してフルハイトアプリを使用したい。私display: box;はこのリンクで古いflexboxレイアウトモジュール(およびその他のもの)を使用して欲しいものを見つけました:CSS3 Flexboxフルハイトアプリとオーバーフロー これは、古いバージョンのフレックスボックスCSSプロパティのみをサポートするブラウザーに適したソリューションです。 新しいフレックスボックスのプロパティを使用したい場合は、ハックとしてリストされているのと同じリンクで2番目のソリューションを使用してみますheight: 0px;。縦スクロールを表示します。 他の問題が発生し、解決策よりも回避策であるため、あまり好きではありません。 html, body { height: 100%; } #container { display: flex; flex-direction: column; height: 100%; } #container article { flex: 1 1 auto; overflow-y: scroll; } #container header { background-color: gray; } #container footer { background-color: gray; } <section id="container" > <header id="header" >This …
101 html  css  flexbox 

9
テキストを同じ行で左揃えと右揃えにする方法を教えてください。
同じ行内でテキストの一部を左に揃え、一部を右に揃えるにはどうすればよいですか? <p>This text should be left-aligned. This text should be right aligned.</p> すべてのテキストを直接インラインで、またはスタイルシートを使用して、左(または右)に配置できます。 <p style='text-align: left'>This text should be left-aligned. This text should be right aligned.</p> 同じ行に保ちながら、対応するテキストを左と右に揃えるにはどうすればよいですか?
101 html  css 

18
ブートストラップドロップダウンメニューが機能しない
ドロップダウンを機能させるのに問題があります。ナビゲーションバーを完全に表示することはできますが、[ドロップダウン](どちらか)をクリックすると、ドロップダウンメニューが表示されません。私はこれについて他の投稿を調べてみましたが、誰の問題も解決するものは何もありませんでした。ブートストラップのウェブサイトから直接ソースをコピーしましたが、自分のマシンで動作させることができないようです。誰かアイデアはありますか?私はそれを1時間じっと見ていましたが、何が問題なのか理解できません。 <head> <script src="resource/js/jquery-1.11.0.js"></script> <script src="resources/js/bootstrap.js"></script> <script type="text/javascript"> $(document).ready(function() { $('dropdown-toggle').dropdown() }); </script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> …

8
divでのCSSワードラップ
幅が250pxのdivがあります。innertextがそれよりも広い場合は、分解したい。divはfloat:左で、オーバーフローが発生しています。ワードラッピングを使用してスクロールバーを消してほしい。どうすればこれを達成できますか? <div id="Treeview"> <div id="HandboekBox"> <div id="HandboekTitel"> <asp:Label ID="lblManual" runat="server"></asp:Label> </div> <div id="HandboekClose"> <asp:ImageButton ID="btnCloseManual" runat="server" ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click" BorderWidth="0" ToolTip="Sluit handboek" /> </div> </div> <asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode"> <Nodes> </Nodes> </asp:TreeView> </div> CSS: #Treeview { padding-right: 5px; width: 250px; height: 100%; float: left; border-right: solid 1px black; overflow-x: scroll; }
100 css  html  word-wrap 

6
HTML5では、WebアプリでピアツーピアのHTTP接続を確立できますか?
中央サーバーの助けを借りて、同じWebアプリの他のユーザーとの直接接続を作成できるWebアプリを作成することは可能ですか?UDPホールパンチングに似たプロセスを想像しています。 HTML5の新しいWebSockets APIについて読みましたが、全二重接続を開始する前に、WS互換サーバーとの接続を開始する必要があります。クライアント間の直接接続を確立するプロセスについてさらに考えています。サーバーは最初のハンドシェイクにのみ関与します。 注:Javaアプレットはカウントされません。興味があるのは、標準のブラウザ技術だけです。
100 javascript  ajax  html 

1
onclickの値で「javascript」の代わりに他の単語が使用されている場合、ブラウザがエラーをスローしないのはなぜですか?
私はウェブサイトを継承し、この好奇心に出会いました。 <a href="/delete" onClick="jamoscript:return confirm('Do you really want to do that?');">Delete all</a> 「jamoscript」を「javascript」に変更する場合とまったく同じように、それを含むページを表示してリンクをクリックすると、確認ダイアログボックスが表示されます。ページがロードされたとき、またはリンクがクリックされたときに、Firebugコンソールに診断が表示されません。なに?jamoscriptをグーグルしても、興味深いことは何もありません。 誰かがこの動作を説明できますか?
100 javascript  html 

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.