参考资料

1. HTML DOM shift键被按下了吗？
2. HTML DOM 返回表单中的enctype属性的值
3. HTML DOM对单个单元格的内容垂直对齐
4. HTML DOM 改变一个iframe的src
5. HTML DOM 用指定的Name弹出元素的数量实例
6. HTML DOM 返回一个表单中元素的数量 实例
7. HTML DOM一个单元格的innerHTML
8. HTML DOM 返回一个button的value 实例

HTML DOM 给image加上border

HTML DOM 给 image 加上 border

详细介绍

HTML DOM 可以通过多种方式为 <img> 元素添加边框，包括 HTML 属性、JavaScript DOM 操作和 CSS 样式。

标签

<img> 标签

用法

1. 使用 HTML border 属性

<img src="image.jpg" border="1">

2. 使用 JavaScript DOM 操作

document.getElementById("myImage").style.border = "1px solid black";

3. 使用 CSS

img {
    border: 1px solid #000;
}

实例

HTML 属性实例

<img src="photo.jpg" border="2" alt="示例图片">

JavaScript 实例

<img id="myImg" src="photo.jpg" alt="示例图片">
<script>
    document.getElementById("myImg").style.border = "3px dashed red";
</script>

CSS 实例

<style>
    .bordered-img {
        border: 4px double blue;
        padding: 5px;
    }
</style>
<img class="bordered-img" src="photo.jpg" alt="示例图片">

功能

• 为图片添加视觉边框

• 突出显示图片内容

• 创建图片框架效果

• 增强页面设计感

CSS 扩展

可以通过 CSS 扩展更多边框样式：

img.fancy-border {
    border: 5px ridge #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    padding: 8px;
    background: #f8f8f8;
}