使用 CSS 一次将 draggable="false" 应用于所有图像答案

【问题标题】：Apply draggable="false" to all images at once with CSS使用 CSS 一次将 draggable="false" 应用于所有图像
【发布时间】：2018-07-16 18:32:52
【问题描述】：

为了防止用户在我的网站上拖动图片，看来我必须这样做：<img draggable="false" src="../example.jpg" style="width:100%">。

但是我有一堆图像要应用，所以我想知道是否有办法将它应用到 CSS 中的所有图像。

【问题讨论】：

标签： css draggable

【解决方案1】：

你可以用这个 CSS 做到这一点：

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

【讨论】：

【解决方案2】：

你不能用 css 做到这一点。但是你可以通过 JS（本例中为 jQuery）来实现

$('img').attr('draggable', false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">

【讨论】：

【解决方案3】：

改变元素的行为和交互性并不是 CSS 应该做的（它是用来处理布局和外观的）。

您可以在所有图像上设置 user-drag 和 user-select（以及浏览器变体）CSS 属性，或者您可以使用 CSS 选择器访问和操作具有给定类或 ID 的一组元素，而不是直接针对每个该类型的元素。由于您的图像上似乎没有任何 CSS 类，因此您必须定位 img 元素，该元素目前会影响页面上的每个图像。

您可以使用基本的 JavaScript（参见 sn-p）或 jQuery 来做到这一点：

$('img').attr('draggable', false);

例如，如果您以后只想使某个特定组/类型的图像可拖动，则可以将 CSS 类应用于它们并使用它来仅定位具有该类的图像，而不是更改 的属性每个 img 元素。

//get all images & make them all non-draggable
var allImages = document.getElementsByTagName("img");
    for (element of allImages) { 
        element.draggable = false;
        //console.log(element.draggable);
    }
    
//make only images w/the appropriate CSS class draggable again    
var draggableImages = document.getElementsByClassName("draggableImage");
    for (element of draggableImages) { 
        element.draggable = true;
        //console.log(element.draggable);
    }

img {
  width: 60%;
}

.draggableImage {
   /*Whatever styles you might want to apply to a draggable image  */
}

<img draggable="true" src="http://via.placeholder.com/300x20"></img>

<img draggable="true" src="http://via.placeholder.com/300x20"></img>

<img class="draggableImage" draggable="true" src="http://via.placeholder.com/300x20"></img>

<img class="draggableImage" draggable="true" src="http://via.placeholder.com/300x20"></img>

【讨论】：