首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用某个src url查找img并使用vanilla javascript更改css?

使用vanilla javascript更改css的方法是通过获取指定的img元素,然后修改其样式属性。具体步骤如下:

  1. 使用document.querySelector()document.getElementById()等方法获取包含img元素的父元素,或者直接获取目标img元素。
  2. 使用querySelectorAll()方法获取所有的img元素,或者使用getElementsByTagName()方法获取指定标签名的元素集合。
  3. 遍历获取到的img元素集合,判断每个img元素的src属性是否与目标src url匹配。
  4. 如果匹配成功,使用style属性来更改img元素的CSS样式。例如,可以使用element.style.property = value的方式来修改样式属性,其中element为目标img元素,property为要修改的CSS属性,value为新的属性值。
  5. 如果需要修改多个样式属性,可以使用element.style.cssText来设置一组CSS属性和值,例如element.style.cssText = "property1: value1; property2: value2;"
  6. 如果需要添加或移除CSS类,可以使用element.classList.add()element.classList.remove()方法来操作元素的类名。

以下是一个示例代码:

代码语言:txt
复制
// 获取包含img元素的父元素
var parentElement = document.getElementById("parentElement");

// 获取所有的img元素
var imgElements = parentElement.querySelectorAll("img");

// 目标src url
var targetSrcUrl = "https://example.com/image.jpg";

// 遍历img元素集合
imgElements.forEach(function(img) {
  // 判断src属性是否与目标src url匹配
  if (img.src === targetSrcUrl) {
    // 修改img元素的CSS样式
    img.style.width = "200px";
    img.style.height = "auto";
    img.style.border = "1px solid red";
  }
});

请注意,以上代码仅为示例,实际应用中可能需要根据具体需求进行适当修改。

推荐的腾讯云相关产品:腾讯云对象存储(COS),该产品提供了高可靠、低成本的对象存储服务,适用于存储和处理各种类型的文件和媒体内容。产品介绍链接地址:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用 HTML、CSSVanilla JavaScript 以及本地存储创建待办事项应用程序

在本教程中,我们将介绍如何使用 HTML、CSSJavaScript 创建功能齐全的待办事项应用程序。...功能 为了让用户能够添加任务,我们将使用 JavaScript。...在这个函数中,我们想要执行与删除按钮相同的步骤:即: 获取所有编辑按钮 使用forEach()方法迭代获取最接近的li元素 获取 data-id 属性 allTasks使用 id 在数组中查找任务...将删除线 CSS 类添加到当前 li 元素的范围 使用该findIndex()方法从数组中获取当前任务的索引allTasks,然后将按钮的状态更新为选中。..."complete strike-through": "":是一个条件,用于检查是否task.completed为 true 添加“完整删除线”CSS 类。

8010

如何制作自己的原生 JavaScript 路由

但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢? 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...最重要的是,使用 vanilla JS router 可以减少你对框架的依赖。 只要你了解实现它所涉及的所有部分,就可以相对容易的在原生 JavaScript 中创建自己的路由。...我将简单地对的 HTML、CSS 和 **JavaScript **进行注释。...这就是使浏览器无需重新加载页面即可更改 URL 的原因。 结果:现在,每次我们单击按钮时,URL 实际上都会在浏览器的地址栏中更改。内容框也会更新。 ? 我们的原生 JS 路由开始运行了。...到目前为止,我们仅从前端更改了路由器地址。假定每次你导航到出现在路由按钮上的 URL 时,实际上都会从服务器单独加载该 URL

3.8K20

如何在Nuxt应用程序中加载外部脚本

我将分享我如何使用Nuxt完成此操作以及实现此操作的不同方法。 使用vue-meta 您可以使用vue-meta的head()方法插入脚本。幸运的是,Nuxt已预装了vue-meta。..." } ] } } } 您可以在nuxt.config.js上直接执行此操作,也可以直接在Nuxt页面上执行(如果在nuxt.config.js内执行此操作,则更改将应用于所有页面...,则可以使用Vue的安装生命周期通过DOM vanilla JS方式插入它: // pages/some/page.vue export default { mounted() { const...script = document.createElement("script"); script.type = "text/javascript"; script.src = "https...幸运的是,Nuxt提供了一种使用vue-meta的简便方法。另外,还可以使用Vue的mounted生命周期方法修改DOM以便自己插入。后者适用于vanilla(原生)Javascript。 谢谢阅读。

4.8K10

创建一个具有背景轮播和3D卡片翻转效果的个人名片网页

使用CSS 3D变换来创建一个具有多个面的卡片效果。...src="https://pic.imgdb.cn/item/63c2d285be43e0d30eeb5146.png" /> <img src="https://pic.imgdb.cn...知识点介绍 (大佬请绕道) 在这个项目中,我们涉及了许多前端开发的核心知识点,包括: HTML 结构的构建 CSS 样式的设计 JavaScript 动画的实现 背景图轮播的逻辑 CSS 3D变换的使用...背景图轮播的逻辑 背景图像轮播是一种常见的网页效果,通过定时更改background-image属性来实现。每隔一段时间,我们更改背景图像的URL,从而创造出图像轮播的效果。...CSS 3D变换的使用 CSS 3D变换允许元素在3D空间中旋转和移动,创建出令人印象深刻的3D效果。 transform 属性: 使用 transform 属性可以将元素移动、旋转和缩放。

13310

使用Electron创建跨平台桌面应用

例子:your need a hero 在这个例子里面我将会创建一个简单的应用,它会使用 Marvel API 拉取25位超级英雄的信息并且显示他们的名字和缩略图,创建完成之后的应用会有一个应用图标,最终使用的用户不会知道到应用是如何被创建的也不能看到程序的源代码...创建 app/css/index.css 添加一些基本的样式布局。...当整个过程完成之后,调用系统API显示一个通知,捕获可能出现的异常情况: fetch(url) .then(resp => resp.json()) .then(json => json.data.results...所使用的应用程序图标。 主意: 参数可以为多个使用逗号分开值,如果你想生成所有平台的二进制文件可以替换相关参数为 --all。 ? 还在对Electron保持怀疑?...---- 往期精选文章 使用虚拟dom和JavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全

1.4K40

分享 10 个你可能不知道的 Devtools 技巧!

如果要下载网页上的所有图片,可以打开 Devtools 工具,粘贴以下代码,然后按 Enter: $$('img').forEach(async (img) => { try { const src...= img.src; // Fetch the image as a blob....DevTools 的用户界面其实也是使用 HTML、CSSJavaScript 构建的,这意味着它也是由浏览器渲染的 Web 界面。...然后,在网页的任何部分,我们都可以使用测量工具来进行任意测距。 9. 查看代码覆盖率 想要让网页快速渲染给用户的方法之一是确保它只会加载真正需要的 JavaScriptCSS 依赖。...更改视频的播放速度 通常,网页视频都会给我们提供灵活的视频控制按钮,包括加快或减慢速度的方法,但如果你遇到了无法或者难以控制的视频,我们可以直接使用 DevTools 通过 JavaScript 进行控制

39510

一篇文章带你了解JavaScript htmldom 元素

这篇文章将教会大家如何查找和访问网页中的HTML元素。 一、找到HTML元素 通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。...五、通过HTML对象集合找到HTML元素 此示例查找id="frm1"的表单元素,在表单集合里,显示所有的颜色值。...src="pic_htmltree.gif"> document.getElementById...同样,可以使用setAttribute( )方法来更新或更改HTML元素上现有属性的值。...七、总结 本文基于JavaScript基础,介绍了Html元素,从最基本的通过标签名找Html元素,通过类名找Html元素。通过CSS选择器找Html元。最后扩展如何设置元素属性,如何去删除元素属性。

1.8K30

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

我们可以使用 的一大优点就是 object-fit 和 object-position 属性。它们让我们可以控制 的内容如何调整大小和位置,就像CSS背景图片一样。...CSS背景图片 当使用CSS背景显示图片时,它需要一个具有内容或特定宽度或高度的元素。通常,背景图片的主要用途应该是用于装饰目的。 2.1 如何使用CSS背景图片 简单来说,我们需要一个元素。...现在,我们可以轻松地更新 --bg-url 变量,这将动态更改背景。这比内联的CSS好一百万倍。...要嵌入Logo,我们有两种选择: –> png,jpg,或者 svg 内联SVG 背景图像 让我们学习使用哪种技术以及如何选择合适的技术。...src="sm-logo.svg" alt="Smashing Magazine"> 在CSS中,我们需要将视口的宽度更改为等于或大于 1350px。

5.6K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券