参考资料

1. HTML DOM添加表格中的行
2. HTML DOM 返回一个iframe中的longdesc属性的值
3. HTML DOM改变表格边框的宽度
4. HTML DOM 返回一个表单的name 实例
5. HTML DOM在下拉列表中选择多个选项
6. HTML DOM 当点击完button不可用 实例
7. HTML DOM 根节点
8. HTML DOM 返回图像映射的某个区域的protocol 实例

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;
}