コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLにおいて、JSを使わずに画像をドラッグしたり選択したりできないようにする方法

HTMLにおいて、JSを使わずに画像をドラッグしたり選択したりできないようにする方法

PHPz
リリース： 2023-09-03 08:09:06
転載
1302 人が閲覧しました

HTMLにおいて、JSを使わずに画像をドラッグしたり選択したりできないようにする方法

次のコード スニペットを画像のプロパティに追加し、画像がドラッグされて選択されないようにします。 

img {  
   user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}
ログイン後にコピー

テキストまたは画像をダブルクリックすると、強調表示（選択）されます。ユーザー選択属性を使用すると、これを防ぐことができます。このプロパティを none に設定すると、画像が選択 (強調表示) されないようにすることができます。

例

次のコードを実行して、画像が選択されないようにすることができます - 

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            -drag: none;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -ms-user-select: none;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/images/python3.png" alt = "Python" width = "62" height = "62">
   </body>
</html>
ログイン後にコピー

以上がHTMLにおいて、JSを使わずに画像をドラッグしたり選択したりできないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html画像 jsブロック ドラッグ可能/選択可能
ソース：tutorialspoint.com
前の記事：HTML と CSS を使用して価格表を作成するにはどうすればよいですか? 次の記事：JavaScriptで文字列をブール値に変換するにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
CSS グリッドの高さが期待したものと異なるという問題が発生しています。どのような間違いを犯している可能性がありますか? 私は現在 CSS グリッドを学習しており、このカードをグリッドに分割して作成するように依頼されました。作りたいグリッドの写真を添付し​​ます。実際には、これらすべてのカードが配置さ...
から 2024-04-06 12:52:14
0
1
339
顔認証端末 iVMS-4200 と基盤の接続に問題がある 顔認証端末 iVMS-4200 が mysql データベースに接続するとエラーが表示されます。 YouTubeから以下の動画を参考にしてみました。しかし、保存するとエラーが表示され...
から 2024-04-06 12:20:33
0
1
347
CSS を使用して Next.js の三目並べボードの各行の下のスペースを削除するにはどうすればよいですか? 各行の下にスペースがあるのはなぜですか? (CSS) 自分のスキルをテストするために Next.js 三目並べアプリを作成しようとしています。ただし、CSSに問題があります。ボード...
から 2024-04-05 11:39:02
0
1
1431
ブロック改行の後の要素を表示する 私は現在これを持っています：テキストの最後にアイコン div を置きたいのですが、それは「ブロック」であるため、機能させることができません。必要な出力: コード スニペット: *{...
から 2024-04-04 21:45:21
0
1
271
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート