数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
服装研究
法律研究如何在 JavaScript 中设置高度为 100% 的全屏 iframe？
`style.height` 属性用于设置高度为 100% 的全屏 iframe，它返回一个字符串值，表示元素的高度。`auto` 是此高度属性的默认值。这里我们使用 `onclick` 事件，使更改在点击按钮后生效。
`onclick` 事件仅在用户点击元素时发生，它是一个纯 JavaScript 属性。每当你点击 `onclick` 事件时，它都会执行一些操作，例如显示消息或将用户重定向到另一个页面。在网站中应尽量少用 `onclick` 事件，因为它可能会让用户感到困惑。因此，请谨慎使用此事件。
`getElementById()` 生成一个元素对象，该对象表示其 `id` 属性与提供的字符串匹配的元素。由于提供的元素 ID 必须唯一，因此它们是快速检索单个元素的便捷方法。
在本文中，我们将学习如何使用 JavaScript 设置高度为 100% 的全屏 iframe。
语法
以下是使用 JavaScript 在点击按钮后设置高度为 100% 的全屏 iframe 的语法：
document.getElementById('id').style.backgroundColor = 'auto | length | %| initial | inherit';
参数
height − 用于设置或返回元素的高度
getElementById − 读取和编辑特定的 HTML 元素。
Length − 它以长度单位定义高度
% − 用于以父元素百分比定义高度
步骤
按照以下步骤，在 JavaScript 中点击按钮后设置高度为 100% 的全屏 iframe：
步骤 1 − 在 `
` 部分，我们定义了标题、iframe、按钮和脚本元素。步骤 2 − 让我们为 HTML 文档的 iframe id 定义样式，该样式将在点击按钮后设置 iframe 的高度。对于 iframe 元素，我们定义了高度和宽度。
步骤 3 − 对于按钮元素，定义了 `heightChanging()` 方法。使用此方法，当我们按下按钮时高度将发生变化。
步骤 4 − 在 `heightChanging()` 方法中，清楚地提到了应执行方法功能的 id 和高度。
步骤 5 − `style.height` 是用于设置 iframe 高度的 HTML DOM 样式属性。
步骤 6 − 点击按钮后，`onClick` 事件函数被触发，它将高度更改为 100%。
示例
在这个例子中，我们将借助 JavaScript 在点击按钮后设置高度为 100% 的全屏 iframe。
<html>
<body>
<h2>Setting the full-screen iframe with height 100% using the Javascript</h2>
<iframe id="iframe" width="650" height="315" src="https://www.youtube.com/embed/B8VDIyNX4Ok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br><br>
<button onclick ="heightChanging()">
Press Here to Change
</button>
<script>
//function to change the height of iframe using the Javascript
function heightChanging() {
var video = document.getElementById('iframe');
video.style.height = window.innerHeight;
}
</script>
</body>
</html>
示例
在这个例子中，我们使用 `style.height` 属性将 iframe 的高度设置为 100%。为了使更改生效，我们使用 `onclick` 事件属性和 `querySelector` 方法。
<html>
<body>
<h2>Setting the full-screen iframe with height 100% using the Javascript</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/K5mgs1f-TFo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<br><br>
<button onclick ="heightChange()">
Click Here to Change Height
</button>
<script>
//function to change the height of iframe using the Javascript
function heightChange() {
document.querySelector('iframe').style.width = "100%";
document.querySelector('iframe').style.height = "100%";
document.querySelector('iframe').style.top = "0";
document.querySelector('iframe').style.left = "0";
document.querySelector('iframe').style.position = "fixed";
document.querySelector('iframe').style.zIndex = "8888";
}
</script>
</body>
</html>
在上面的例子中，我们使用 “querySelector” 来设置 HTML 文档中 iframe 的所有元素。`getElementById()` 和 `Document.querySelector()` 只能在全局 `document` 对象上访问。为了向网页添加功能，使用了 JavaScript 代码。在本例中，我们使用了带有 “id” 参数的箭头函数。我们也可以使用样式属性将 iframe 的高度设置为 100%。这些方法易于使用，我们用样式示例显示所有代码。
结论
在本文中，我们演示了如何设置高度为 100% 的全屏 iframe，并附带示例。我们在这里看到了两个不同的示例，我们使用了 `style.height` 属性来设置 iframe 的高度为 100%。在第一个示例中，我们使用了 `style.height` 属性来设置高度为 100% 的全屏 iframe。在第二个示例中，我们使用了 `style.height` 属性和 `querySelector` 方法来设置高度、宽度、左边距、上边距等元素。
4K+ 次浏览
