在添加属性之前,如何隐藏没有src属性的img元素？

在添加属性之前，如果您想要隐藏没有src属性的img元素，可以使用CSS样式来实现。您可以使用以下代码来隐藏没有src属性的img元素：

img:not([src]) {
  display: none;
}

这段代码使用了CSS的伪类选择器:not()来选择没有src属性的img元素，并将其display属性设置为none，从而隐藏这些元素。

如果您需要在添加属性之前隐藏这些元素，可以将此样式放在<head>标签中的<style>标签内，或者将其放在外部CSS文件中并链接到HTML文件中。

如果您需要使用JavaScript来隐藏这些元素，可以使用以下代码：

const imgElements = document.getElementsByTagName('img');
for (let i = 0; i < imgElements.length; i++) {
  if (!imgElements[i].hasAttribute('src')) {
    imgElements[i].style.display = 'none';
  }
}

这段代码首先获取所有的img元素，然后遍历它们，检查每个元素是否有src属性。如果没有src属性，则将其display属性设置为none，从而隐藏这些元素。

总之，无论您使用CSS还是JavaScript来隐藏没有src属性的img元素，都可以实现这一目标。

相关·内容

【译】Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例

HTML 元素最简单的情况下，图片元素必须包含 src 属性。... 1.1 设置宽度和高度属性在页面加载时，它们会在页面图片加载时发生一些布局变化。...第一个没有 alt 属性，而第二个是空的 alt 属性。你能期待这个视觉效果吗？ ? 没有 alt 的图片仍然保留其空间，这很混乱，并且对可访问性不利。...您必须先检查元素，然后在DevTools中的 url 中打开链接，然后才能下载随CSS添加的图像。 2.6 伪元素可以使用伪元素与CSS背景图片一起使用，例如，在图片的顶部显示一个叠加元素。...另外，我喜欢使用HTML 的地方是可以在图片没有加载的情况下添加一个回退方法，这个回退至少可以保持内容的可读性。

5.6K2 0

【Web技术】610- Web上的图片技巧

在这篇文章中，我们将学习各种图片添加方式，以及每种方式的优缺点，以及什么时候和为什么要使用每种方式的上下文。 HTML 元素在最简单的情况下，image元素必须根据需要包含src属性。... 设置宽高属性在页面加载时，它们会在页面的图片加载过程中出现一些布局移动。为了避免这种情况，我们可以为它设置宽度和高度属性。...在检查该元素时，要先检查该元素，然后在DevTools中打开URL里面的链接，才可以下载一个正在添加CSS的图片。伪元素可以使用伪元素与CSS背景图片一起使用，例如，在图片的顶部显示一个叠加元素。...对于，除非我们为覆盖层添加一个单独的元素，否则无法做到这一点。 SVG SVG被认为是一种图像，它最大的功能是在不影响质量的前提下进行缩放。...而且，如果图片是重要的图片，会更有用处。另外，我喜欢使用HTML 的地方是可以在图片没有加载的情况下添加一个回撤。这个回撤至少可以保持内容的可读性。

2.9K3 0

HTML【知识问答】

文章目录一、行内元素有哪些？块级元素有哪些？二、解释一下CSS盒子模型。三、CSS选择符优先级算法如何计算？四、简述清除浮动的几种方式：五、一个盒子不给宽高如何水平垂直居中。...这种方法是先找到浮动元素的父元素，再在父元素中添加属性overflow:hidden,清除找到的父元素中的子元素浮动对页面的影响。...一般不使用这种方式，因为overflow:hidden属性的特点是，离开了这个属性的区域会被隐藏，就是超出的部分会被隐藏。...2.使用clear:both清除浮动，在所有浮动元素下方添加一个该属性，可以消除float的破坏性，但会增加不必要的标签。...;clear:both;} 这种方法是推荐使用的，bootsrtap也在使用，应该掌握，不然太low了，他的原理就是通过伪元素选择器，在div后面添加了一个clear:both的属性，跟第二种方法是一样的道理

7811 0

jQuery的简单使用

在jQuery里的事件名称并没有与html中的事件名称有多大区别，还是那个熟悉的味道熟悉的套路，示例： <!.../删除样式在jQuery中有一个addClass方法，可以给标签添加类样式，相对的removeClass方法则是删除标签中的类样式： "); }); val方法可以返回或设置被选元素的值，元素的值是通过 value 属性设置的。该方法大多用于 input 元素。...在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。...); }); toggle方法可以切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素，同样的可以设置过程时间和回调函数： <!

7K1 0

前端运用图片的技巧总结

在这篇文章中，我们将学习各种图片添加方式，以及每种方式的优缺点，以及什么时候和为什么要使用每种方式的上下文。 HTML 元素在最简单的情况下，image元素必须根据需要包含src属性。...="200"src="cheescake.jpg"alt=""> src是无效的，没有加载。...在检查该元素时，要先检查该元素，然后在DevTools中打开URL里面的链接，才可以下载一个正在添加CSS的图片。伪元素可以使用伪元素与CSS背景图片一起使用，例如，在图片的顶部显示一个叠加元素。...对于，除非我们为覆盖层添加一个单独的元素，否则无法做到这一点。 SVG SVG被认为是一种图像，它最大的功能是在不影响质量的前提下进行缩放。...而且，如果图片是重要的图片，会更有用处。另外，我喜欢使用HTML 的地方是可以在图片没有加载的情况下添加一个回撤。这个回撤至少可以保持内容的可读性。

2.6K2 0

CSS技巧（一）：清除浮动

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。...src="news-pic.jpg" /> some text 通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."...总结通过上面的例子，我们不难发现清除浮动的方法可以分成两类：一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after...伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。...，无需格外处理；正文中使用邻接元素清理之前的浮动。

7941 1

前端基础：jQuery

...改变元素的宽和高（带动画效果） show(speed)：显示 hide(speed)：隐藏 toggle(speed) 等价于 show + hide：显示的隐藏，隐藏的显示可选的 speed 参数规定隐藏...属性函数 attr("属性") 获得元素的属性值。...attr("属性", "新值") 修改元素的属性值。 attr(样式参数) 样式参数可以写成 json 格式。...next() 获取紧邻匹配元素之后的元素 prev() 获取紧邻匹配元素之前的元素 siblings([selector]) 获取位于匹配元素前面和后面的所有同辈元素测试</button

13.5K2 0

前端(四)-jQuery

的元素 :gt(index) 选取索引大于index的元素 :lt(index) 选取索引小于index的元素 :header 选取所有标题元素（h1~h6）注意 :header之前要有空格 :docus...context) 给指定元素添加网页内容(会编译标签) js->innerHTML html() 获取指定元素的网页内容 text(context) 给指定元素添加网页内容(不会编译标签)js->innerText...方法说明 show() 立刻显示 show(毫秒数) 慢慢显示 show(毫秒数,函数) 在动画效果结束后执行函数 hide() 立刻隐藏 hide(毫秒数) 慢慢隐藏 hide(毫秒数,函数) 在动画效果结束后执行函数..." value="显示" id="showImg"> <img src="img/...prop() 方法设置或返回被选元素的属性和值 prop(参数1，参数2)：参数1用于设置属性参数2设置属性值下面一个简单的案例来应用一下这个方法： head部分 <script src="

8.5K3 0

jQuery基础图文系列

jQuery选择器匹配的元素 .add() 将元素添加到匹配元素的集合中 .addSelf() 把堆栈中之前的元素添加到当前集合中 .children() 获取匹配元素集合中每个元素的所有子元素 .closest....siblings() 获得匹配元素集合中所有元素的同辈元素 .slice() 将匹配元素集合缩减为指定范围的子集 addClass() 向匹配的元素添加指定的类名 after() 在匹配的元素之后插入内容...append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容 appendTo() 向目标结尾插入匹配元素集合中的每个元素 attr() 设置或返回匹配元素的属性和值 before() 在每个匹配的元素之前插入内容...$("img").attr("src","test.jpg");//设置图片src属性为test.jpg $("img").attr("src");//返回图片的src属性从每一个匹配的元素中删除一个属性...$("img").removeAttr("src");//删除图片中srcs属性为每个匹配的元素添加指定的类名。

4.4K1 0

JQuery

hide()隐藏内容 show() 显示 toggle() 一下显示一下隐藏括号中如果有参数，填数字（单位是毫秒），那么会有动画效果，如果不填，没有动画效果。对比js和jq： <!...控制标签属性 k = "v" src value link中的href 3.1prop() prop()用法：分为单属性和多属性两种写法多属性就是字典的语法{k:v,k:v}：只支持修改，不支持访问...// alert($('img').prop('src')) // $('img').prop('src', 'img3.jpg') // $('img'...***常用动画函数 slideUp()隐藏 slideDown()显示 slideToggle() 一会显示一会隐藏清除动画排队机制，在形成动画函数之前加stop() fadeIn() 淡入...// $('div').slideDown() // 显示 // 清除动画排队机制：在形成动画函数之前加stop()

7.7K2 0

前端入门学习--CSS

CSS指层叠样式表（Cascading Style Sheets）样式定义如何显示 HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表分离的问题外部样式表可以极大提高工作效率...但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。 IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。...但是请注意，这两种方法会产生不同的结果。 visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。...浮动元素之前的元素将不会受到影响。.../img_trans.gif"> 实例解析： img class=”home” src=”img_trans.gif” / -因为不能为空,src属性只定义了一个小的透明图像

27.6K2 0

web 图像技术：前端引入图片的各种方式及其优缺点

HTML 元素最简单的情况下，img元素必须包含src属性: 设置宽度和高度属性在页面加载时，它们会在页面图像加载时发生一些布局变化...第一个没有alt属性，而第二个是空的alt属性，下面是它们的视觉效果： ? 没有alt的图片仍然保留了它的空间，这很混乱，而且不利于访问。...对于这是不可能的，直到我们为叠加层添加单独的元素。 SVG SVG被认为是一种图像，它最大的功能是在不影响质量的情况下进行缩放。...，可以轻松更改图片的src属性。...我们的目标是使内部边框与图像融合在一起，这种不太实用。使用和元素现在的问题是，要添加内部边框，我们不能使用box-shadow，因为它无法在图像上使用。

4.9K2 0

Web前端基础（07）

.css(“样式名”,“值”); 批量修改元素样式元素对象.css({“样式名1”:“值”,“样式名2”:“值”}); 获取和修改元素的属性获取元素属性元素对象.attr(“属性名”); 修改元素属性...内容 $("body").html(""); //设置id为abc img.attr("id","abc"); //设置src属性 img.attr("src","...../imgs/2.jpg"); $("body").append(img); //获取某个属性的值 console.log(img.attr("src")); ul").hide(); //给第一层的所有li添加点击事件 $("body>ul>li").click(function(){ //在事件方法中this代表触发该事件的元素对象

5K2 0

使用这些 CSS 属性选择器来提高前端开发效率！

在本文中，我们将讨论它们是如何运行的，并给出一些如何使用它们的想法。...div [title] 需要说明的是，它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格一样)，而它们之间的空格意味着后代选择器，即选择具有该属性的元素的子元素。...最后要知道的是，您可以添加一个标志，让属性搜索不区分大小写。在结束方括号之前添加i： [title*="DNA" i] 因此它会匹配dna, DNA, dnA等。...你现在应该知道如何自己构建它，你只需选择带有href的所有标签，添加伪元素，然后使用attr()和content打印它们。...script:after { content: attr(src); } JavaScript 事件元素你可以突出显示具有JavaScript事件属性的元素，以便将它们重构到JavaScript

2.2K5 0

10个CSS技巧，极大提升用户体验

Cursor 在不同的场景下使用不同的鼠标样式可以帮助读者感知页面的当前状态，从而改善用户的互动体验。 cursor CSS属性设置鼠标指针在一个元素上时要显示的鼠标指针（如果有的话）。...然后我们使用overflow: hidden来隐藏溢出的文本。最后，我们使用 text-overflow: ellipsis 在文本的末尾添加一个圆点，向用户表明有一些隐藏的文本。...无图片我们之前讨论的情况都是建立在我们能够得到图片的前提下。但是，在实际应用中，可能由于后端服务的不稳定，或者用户自身的网络信号不好，我们的网页可能无法正确加载图片。...当图片缺失时，浏览器的默认样式是不优雅的，这里我们可以优化它。我们可以给 img元素添加一个 onerror 事件。...在这种情况下，如果原始图片没有被正确加载，用户就不知道这个图片应该是什么。为了方便用户理解，我们可以将 img 元素的 alt 属性显示在页面上。

7731 0

JQuery的学习

title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/> $("#b3").click(function () {...']").css("backgroundColor", "pink"); }); //<input type="button" value="选取有属性id的div元素，然后在结果中选取属性...* 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾 2.prepend():父元素将子元素追加到开头 * 对象1.prepend(对象2)：将对象2添加到对象...1元素内部，并且在开头 3.appendTo():父元素将子元素追加到末尾 * 对象1.appendTo(对象2)：将对象1添加到对象2元素内部，并且在末尾 4.prependTo():父元素将子元素追加到开头...* 对象1.prependTo(对象2)：将对象1添加到对象2元素内部，并且在开头 5.after():添加元素到元素后边 * 对象1.after(对象2)：将对象2添加到对象1后边。

16.6K2 0

从零开始学 Web 之 jQuery（二）获取和操作元素的属性

一、jQuery获取和操作元素属性 DOM中有很多方式获取元素，比如通过id，通过标签名，通过类名，通过name的值，通过选择器等方式。...display:none|block 对应的隐藏和显示在 jQuery 中可以使用方法：show() 和 hide(); 3、show 和 hide 方法中可以添加参数，数字表示毫秒。...表示的显示和隐藏的动画效果。 4、stop 方法表示在显示和隐藏之前先清除之前的动画效果，防止鼠标操作过快，动画的显示跟不上操作。 10、过滤选择器这类选择器都带有冒号。... ...2、:eq() 选择器：匹配一个给定索引值的元素。 3、.hide() 隐藏一个元素； .show() 显示一个元素。

1.7K4 0

HTML 5.1 — 14 项新增特性及使用案例

并非所有的浏览器都支持这些功能特性，因此你最好是在将它们应用于生产环境之前先检查一下浏览器的支持情况。 14....假如一个 img 元素还有其他用途而不仅仅是展示一个图片，例如，作为一个服务的一部分用来计算页面视图个数，在 width 和 height 属性中使用 0 数值。... 元素的 id 取值应该与我们想要为其添加上下文菜单的元素的 contextmenu 属性取值保持一致。...显示/隐藏信息新的和元素允许您向一段内容添加扩展信息。您可以通过单击元素来显示或隐藏一个附加信息块。默认情况下是隐藏附加信息的。...在代码中，您应该将标记放在标记内，如下所示。标签之后，你可以添加要隐藏的其他内容。

7532 0

前端开发需要知道的一些 CSS 属性选择器！

1.7K2 0

Web前端知识系列（包括web前端全部知识点）

1.5.2.基础标签2 1.5.2.1.图片标签标签的 src 属性。...属性案例4:网站表单页面【实现思路】: 1.在页面中间添加一个表格 2.10行3列表格 3.在表格中添加表单表单子标签 1.5.7.基础标签7 1.5.7.1.框架标签 frameset框架级...2.6.0.CSS中的属性选择器 2.6.1.CSS选择器-伪类伪类在原有选择器的基础上添加的伪类只有在触发某些操作的时候执行的样式效果 2.6.2.CSS选择器的优先级原则：相同类型的选择器...- 添加一个类 addClass(class)给某个元素添加一个 CSS 类 $('div').addClass('myClass1'); 代码: 注意:类名没有”点” -添加多个类 addClass...在每一个动画开始之前，先停止调之前所有的动画，只保留自己的动画！！

2.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云