参考资料

  1. HTML DOM单元格内容水平对齐
  2. HTML DOM 返回图像映射某个区域的替代文字实例
  3. HTML DOM 返回一个button的value 实例
  4. HTML DOM 元素
  5. HTML DOM 返回和设置一个iframe中的scrolling属性的值
  6. HTML DOM 返回一个区域的href属性的querystring部分 实例
  7. HTML DOM获得下拉列表的选项数量
  8. HTML DOM改变单元格的内容

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：高度宽度文档动态属性像素百分比内容基本元素