資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
