Các thuộc tính trong DOM: offsetHeight, offsetWidth...

Trong bài này chúng ta sẽ tiếp tục tìm hiểu về các thuộc tính trong DOM bao gồm các thuộc tính như: offsetHeight, offsetWidth, offsetLeft, offsetTop, offsetParent, style, tagName, title.

offsetHeight

Thuộc tính này sẽ cho bạn biết thông tin số lượng điểm ảnh tính theo chiều cao của phần tử mà bạn chọn. Bạn nên chú ý rằng đây là độ cao thực của box, chắc bạn đã nghe đến khái niệm mô hình hộp trong CSS đây là điều cơ bản nhất để bạn làm việc với CSS. Thuộc tính offsetHeight trong DOM sẽ cho biết chiều cao thực sự của hộp và nó sẽ không cộng thêm các yếu tố bạn định kiểu bằng CSS như padding, margin hay border. Ví dụ ta có một đoạn CSS sau.

#results {
   width: 400px;
   height: 200px;
   padding: 10px;
   border: 1px solid red;
}

Khi xem thuộc tính offsetHeight chúng ta sẽ nhận được là 200 đúng bằng giá trị height được định kiểu trong CSS.

var results = document.getElementById("results");
alert(results.offsetHeight);

offsetWidth

Thuộc tính này cũng tương tự như offsetHeight chỉ khác là cho biết thông tin chiều rộng.

offsetLeft

Thuộc tính này cho biết khoảng cách của phần tử bạn chọn với phần tử cha của nó nó tính về phía trái, thông tin là số điểm ảnh pixel.

Ví dụ nếu có cấu trúc Html như sau.

<div id="wrap">
  <div id="results">Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I've put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo).
  </div>
</div>

CSS được định kiểu như sau.

#results{
   width: 400px;
   height: 200px;
   padding: 10px;
   border: 1px solid red;
   margin-left: 15px;
}
#wrap{
  background: #ccc;
  width: 500px;
}

Khi xem thuộc tính offsetLeft kết quả trả về là 15 đúng bằng giá trị của margin-left mà bạn định kiểu.

var results = document.getElementById("results");
alert(results.offsetLeft);

offsetTop

Thuộc tính này cho biết khoảng cách của phần tử bạn chọn với phần tử cha của nó nó tính về phía trên, thông tin là số điểm ảnh pixel.

offsetParent

Thuộc tính này trả về đối tượng là phần tử cha gần nhất của phần tử bạn chọn.

style

Thuộc tính này cũng là một đối tượng và cũng có các thuộc tính tương tự như trong CSS cho biết các thông tin định kiểu CSS của phần tử, chú ý rằng chúng ta chỉ có thể lấy được thông tin CSS khi nó được định kiểu ngay bên trong của phần tử còn các CSS gắn ngoài thì thuộc tính sẽ trả về rỗng. Ngoài việc cho biết thông tin bạn còn có thể gán các giá trị của thuộc tính CSS.

Ví dụ ta có một đoạn Html như sau.

<div id="results" style="background-color: #e7f1d8">Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software.</div>

Trong CSS các thuộc tính có 2 từ trở lên thì các từ nối với nhau bằng ký tự "-", nhưng trong DOM thì thuộc tính CSS có từ 2 từ rở lên sẽ được viết liền với nhau và từ tiếp theo sẽ được viết hoa chữ cái đầu tiên. Như ví dụ sau ta giễ ràng lấy và gán định kiểu CSS cho phần tử.

var results = document.getElementById("results");
results.style.color ="green";
var bgcolor =results.style.backgroundColor;
alert(bgcolor);

tagName

Thuộc tính này cho biết thông tin về tên của phần tử, chính là tên thẻ trong Html. thuộc tính này có chức năng tương tự như thuộc tính nodeName.

title

Thuộc tính này cho biết thông tin về tiêu đề của phần tử, ngoài ra thuộc tính còn sử dụng cho đối tượng document để lấy thông tin tiêu đề được đặt giữa cặp thẻ title trong Html.

Qua hai bài viết tôi đã giới thiệu nhanh hầu như gần hết những thuộc tính phổ biến trong DOM. Trong những bài tiếp theo chúng ta sẽ tìm hiểu về phần tiếp theo đó là các phương thức phổ biến trong DOM.

Phần 1: Thuộc tính trong DOM như attributes, childNodes...