Thuộc tính scrollWidth trong HTML DOM

Thuộc tính scrollWidth trong HTML DOM trả về chiều rộng toàn bộ (nội dung + padding) của một phần tử tính bằng pixel trong tài liệu HTML.

Cú pháp

element.scrollWidth

Ví dụ

Ví dụ sử dụng thuộc tính scrollWidth (và scrollHeight):

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body { text-align: center; color: #fff; background: #ff7f5094; height: 100%; }
  p { font-weight: 700; font-size: 1.2rem; height: 80px; border: 1px solid #fff; overflow: auto; width: 250px; margin: 20px auto; }
  .btn { background: #0197F6; border: none; height: 2rem; border-radius: 2px; width: 35%; margin: 2rem auto; display: block; color: #fff; outline: none; cursor: pointer; }
  .show { font-size: 1.5rem; }
</style>
</head>
<body>
<h1>Demo thuộc tính scrollHeight/scrollWidth DOM</h1>
<p>Chào! Tôi là một phần tử p trong HTML với một số văn bản giả. Chào! Tôi là một phần tử p trong HTML với một số văn bản giả. Chào! Tôi là một phần tử p trong HTML với một số văn bản giả. Chào! Tôi là một phần tử p trong HTML với một số văn bản giả.</p>
<button onclick="getHW()" class="btn">Lấy chiều cao & chiều rộng đoạn văn</button>
<div class="show"></div>
<script>
  function getHW() {
    var para = document.querySelector('p');
    document.querySelector(".show").innerHTML = "<div>Chiều cao đoạn văn = " + para.scrollHeight + " px</div><div>Chiều rộng đoạn văn = " + para.scrollWidth + " px</div>";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Xanh dương để hiển thị chiều rộng và chiều cao cuộn của đoạn văn.