参考资料

  1. HTML DOM 访问
  2. HTML DOM 哪个事件发生了？
  3. HTML DOM弹出下拉列表中被选中的选项的索引
  4. HTML DOM 返回文档中表单数目
  5. HTML DOM 返回图像映射的某个区域的port 实例
  6. HTML DOM 返回一个区域的href属性的querystring部分 实例
  7. HTML DOM弹出下拉列表中所有选项
  8. HTML DOM 返回一个button的name 实例

HTML DOM 改变iframe的高度和宽度

基本介绍

iframe元素允许在当前HTML文档中嵌入另一个文档。通过DOM可以动态改变iframe的高度和宽度属性。

相关标签

<iframe id="myFrame" src="example.html"></iframe>

主要属性

  • height: 设置iframe高度(像素或百分比)

  • width: 设置iframe宽度(像素或百分比)

DOM操作方法

// 通过ID获取iframe元素
var frame = document.getElementById("myFrame");

// 设置高度和宽度(像素)
frame.height = "500px";
frame.width = "800px";

// 设置高度和宽度(数值)
frame.height = 500;
frame.width = 800;

// 使用style属性设置
frame.style.height = "500px";
frame.style.width = "800px";

完整实例

<!DOCTYPE html>
<html>
<head>
    <title>Iframe尺寸调整</title>
    <style>
        #container {
            margin: 20px;
        }
        #myFrame {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="container">
        <iframe id="myFrame" src="https://example.com"></iframe>
        <br>
        <button onclick="resizeFrame(600, 900)">设置为600x900</button>
        <button onclick="resizeFrame(400, 600)">设置为400x600</button>
    </div>

    <script>
        function resizeFrame(height, width) {
            var frame = document.getElementById("myFrame");
            frame.height = height;
            frame.width = width;
            
            // 或者使用style
            // frame.style.height = height + "px";
            // frame.style.width = width + "px";
        }
    </script>
</body>
</html>

CSS扩展控制

/* 响应式iframe */
.responsive-iframe {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 宽高比 */
    height: 0;
}

.responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

功能说明

  1. 动态调整iframe显示区域大小

  2. 实现响应式iframe布局

  3. 根据内容自动调整iframe尺寸

  4. 创建适应不同设备的嵌入内容

TAG：高度宽度文档动态属性像素百分比内容基本元素

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。