所以我在我的项目中确实有一个个人资料图像,我希望它有一个绿色的边框.但每次我重新加载页面时,图像会消失一小段时间,但边框仍然存在.我想问一下,如果还没有加载图像,有没有什么方法可以用JavaScript来删除css中的边框元素

这是我的html:

<img src="somepic.png" id="user_img" class="user_img">

这是我的css:

.user_img{
    border: 2px solid rgb(136, 186, 60);
}

我已经在jQuery上try 过了:

if(!$("#user_img").complete){
  $("#user_img").removeClass("user_img")
}

但这并不是真正的动态工作,因此边界将永远消失.有没有办法在重新加载时判断并仅在图像完全加载的情况下添加边框?

推荐答案

Try to add border with JS

<html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style2.css" />
        <link rel="stylesheet" href="https://cdnJS.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
      </head>
      <body>
        <img src="https://picsum.photos/id/237/200/300" id="user_img" class="user_img">
      </body>
    </html>

JS

<script>

$(document).ready(function(){
  document.getElementById("user_img").style.border = "2px solid rgb(136, 186, 60)";
});
</script>

Javascript相关问答推荐

如何添加绘图条形图图例单击角形事件

Chart.js 4.4.2,当悬停在一个数据点上时,如何在工具提示中拥有多个数据点/标签?

setcallback是什么时候放到macrotask队列上的?

并不是所有的iframe都被更换

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法?

检索相加到点的子项

环境值在.js文件/Next.js中不起作用

Reaction Redux&Quot;在派单错误中检测到状态Mutations

OpenAI转录API错误请求

每隔3个项目交替显示,然后每1个项目交替显示

如何在FiRestore中的事务中使用getCountFromServer

react 路由DOM有条件地呈现元素

我为什么要使用回调而不是等待?

为什么当雪碧的S在另一个函数中时,Phaser不能加载它?

Plotly.js栏为x轴栏添加辅助文本

将以前缓存的 Select 器与querySelector()一起使用

不允许在对象文本中注释掉的属性

在openstreemap/leaflet中,当鼠标在 map 上移动时,如何在小工具提示中实时显示坐标

如何将.jsx转换为.tsx

FromBody似乎没有处理C#API PUT调用,并且始终为空