Javascript 上传图像时如何添加额外的CSS？

上传图像时，我希望文本框完全位于灰色区域内。现在当我上传图像时，文本框并没有完全在灰色区域内。上传图像时，有没有办法自动扩展文本框所在的灰色区域？谢谢

让cssProps={
“字体重量”：“，
“字体样式”：“，
“文本装饰”：“
}
$（'input[name=“textStyle”]”）。更改（函数（）{
const val=$（this.val（）
如果（$（this）.is（':checked'））{
开关（val）{
大小写“粗体”：
cssProps['font-weight']='bold'；
打破
斜体字：
cssProps['font-style']='italic'；
打破
大小写“下划线”：
cssProps['text-decoration']='underline'；
打破
}
}否则{
开关（val）{
大小写“粗体”：
cssProps['font-weight']=''；
打破
斜体字：
cssProps['font-style']=''；
打破
大小写“下划线”：
cssProps['text-decoration']=''；
打破
}
}
$（'textarea[name=“styledText”]'）.css（cssProps）
});
var loadFile=函数（事件）{
var image=document.getElementById（'output'）；
image.src=URL.createObjectURL（event.target.files[0]）；
};

您可以添加一个

加载

事件侦听器，并使用它添加一个类，然后将样式应用于：

image.addEventListener（'load'，（）=>{
image.classList.add（'loaded'）；
});

下面是一个例子：

consturl='1〕https://cdn.pixabay.com/photo/2021/04/02/23/33/annas-hummingbird-6146187_960_720.jpg';
const image=document.getElementById（'image'）；
image.addEventListener（'load'，（）=>{
image.classList.add（'loaded'）；
})
image.src=url
img.loaded{
边框：5px纯红；
}