参考资料

1. HTML DOM改变单元格的内容
2. HTML DOM 节点
3. HTML DOM 改变一个iframe的src
4. HTML DOM 修改
5. HTML DOM 改变链接的target属性实例
6. HTML DOM 返回文档中的链接数
7. HTML DOM 访问
8. HTML DOM添加表格行中的单元格

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