資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 JavaScript/jQuery 將 textarea 的捲軸預設設定為底部？
HTML DOM 元素的 scrollTop 屬性用於設定或返回元素內容垂直滾動的畫素數。如果內容元素沒有生成捲軸，則 scrollTop 的值為零。
onclick 事件僅在使用者點選元素時發生，它是一個純 JavaScript 屬性。每當你點選 onclick 事件時，它都會執行一些操作，例如顯示訊息或將使用者重定向到另一個頁面。onclick 事件在網站中應該儘量少用，因為它可能會讓使用者感到困惑。因此，要謹慎使用此事件。
在這篇文章中，我們將學習如何使用 JavaScript/jQuery 將 textarea 的捲軸預設設定為底部。
語法
以下是使用 JavaScript 將 textarea 捲軸預設設定為底部的語法：
element.scrollTop = pixels
引數
畫素 - 用於指定要垂直滾動的元素內容的畫素數。
步驟
請按照以下步驟使用 JavaScript 將 textarea 捲軸預設設定為底部：
步驟 1 - 讓我們定義 HTML 文件中 textarea 的樣式，該樣式將 textarea 的捲軸預設設定為底部。對於 textarea 元素，我們定義了高度、寬度、背景顏色、顏色和文字對齊。
步驟 2 - 在 body 部分下，我們定義了標題、按鈕和指令碼元素。
步驟 3 - 為按鈕元素定義了 scrollBar() 方法。使用此方法將設定 textarea 捲軸的位置到底部。
步驟 4 - 在 scrollBar() 方法中，清楚地提到了應該執行方法功能的 ID。
步驟 5 - scrollTop 屬性是 HTML DOM 屬性，用於將捲軸設定為 textarea。
步驟 6 - 點選按鈕後，將觸發 onClick 事件函式，並將捲軸設定為底部。
示例
在這個例子中，我們將使用 JavaScript 將 textarea 的捲軸預設設定為底部。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
#textarea {
height: 100px;
width: 650px;
text-align:justify;
}
</style>
</head>
<body>
<h2>Setting textarea scroll bar to bottom as a default using JavaScript</h2>
<textarea id = "textarea">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</textarea>
<br><br>
<button onclick = "scrollBar()">
Press here
</button>
<script>
//function to set textarea scroll bar to bottom as a default using JavaScript
function scrollBar() {
var content = document.getElementById('textarea');
content.scrollTop = content.scrollHeight;
}
</script>
</body>
</html>
使用 jQuery 更改背景顏色
請按照以下步驟使用 jQuery 將 textarea 的捲軸預設設定為底部
步驟 1 - jQuery 的原始碼在 header 標籤的 Script 部分中定義。
步驟 2 - 宣告按鈕元素，當我們按下它時，它將設定 textarea 的捲軸到底部。
步驟 3 - 在 Script 部分內部，我們為 scrollTop 方法定義了 jQuery 功能。
步驟 4 - 您可以使用 jQuery 選擇器和 scrollTop 方法將選定元素的捲軸預設設定為底部。
步驟 5 - 此示例將 textarea 的捲軸預設設定為底部，您可以使用 click 事件處理程式觸發捲軸更改。
示例
在這個例子中，我們將使用 jQuery 將 textarea 的捲軸預設設定為底部。
<html>
<head>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
#contentarea {
height: 100px;
width: 350px;
background: yellow;
color: blue;
text-align:justify;
}
</style>
</head>
<body>
<h2>Setting textarea scroll bar to bottom as a default using jquery</h2>
<textarea id = "contentarea">Tutorials Point through its collection of more than a thousand user-friendly tutorials, helping millions of students and professionals worldwide to master new technologies and grow in their career. After a successful journey of providing the best self-learning content at tutorialspoint.com, we created our subscription-based premium product called Tutorix to provide Simplified Learning through High Quality Visuals in the best personalized way for K-12 students, and aspirants of competitive exams like IIT/JEE and NEET.</textarea>
<br><br>
<button onclick = "contentscrollBar()">
Click here to Scroll
</button>
<script>
//function to set textarea scroll bar to bottom as a default using jQuery
function contentscrollBar() {
$(document).ready(function(){
var $content1 = $('#contentarea');
$content1.scrollTop($content1[0].scrollHeight);
});
}
</script>
</body>
</html>
結論
在這篇文章中，我們演示瞭如何使用示例將 textarea 的捲軸預設設定為底部。我們在這裡看到了兩個不同的示例，在第一個示例中，我們使用 JavaScript 在點選按鈕後將 textarea 的捲軸設定為底部。在第二個示例中，我們使用 jQuery 在點選按鈕後將 textarea 的捲軸設定為底部。
2K+ 次檢視
