Dùng Javascript định dạng trang web

Dùng Javascript định dạng trang web tức là dùng mã lệnh javascript để thực hiện định dạng css hoặc gán các thuộc tính của element trong trang.


Dùng Javascript định dạng trang web

Việc sử dụng Javascript để thực hiện định dạng trang web là rất cần thiết khi thiết kế web. Bởi vì việc khai báo CSS ban đầu (bằng các style) chỉ giúp bạn định dạng 1 lần lúc trang web mới nạp.

Khi trang đã hiện ra rồi, bạn muốn định dạng cho các phần tử nhận các sự kiện trong trang thì sao? Lúc này phải dùng Javascript để thực hiện.

Javascript và các thuộc tính html của element

Mỗi element có nhiều thuộc tính html như src, href, width, height, disabled, readonly, required, selected, size, value, type, alt, title, autocomplete, autofocus, checked, contenteditable, id, max, min, maxlength, minlength, multiple, name, onblur, onchange, onclick, ondblclick, onerror, onfocus, onkeyup, onmouseover, onmouseout, onsubmit, placeholder…

Bạn có thể trang tag và thuộc tính html – p1 để biết thêm về các thuộc tính html. Sau đây là ví dụ về cách sử dụng :

<img width="150" height="150" 
alt="Hình logo" title="Hình logo" 
src="https://longnv.name.vn/wp-content/uploads/2019/09/logo4-150x150.png"
onerror="this.src='1.jpg'">

<input type="text" name="un" class="username" readonly="readonly" value="teonv">
<input id="toan" autofocus="autofocus" required="required" min="0" max="10" onblur="check()">
<input type="checkbox" name="thethao" checked="checked">Thể thao
<select name="sothich" multiple="multiple" size="5">
    <option value="nmr" >Nhìn mưa rơi</option>
    <option value="nch" >Nghe chim hót</option>
    <option value="nmb" selected="selected">Ngắm mây bay</option>
    <option value="ut" >Uống trà</option>
    <option value="vr" >Vuốt râu</option>
</select>
<div id="bl" contenteditable="true" minlength="10" maxlength="500" title="Nhập 10 đến 500 ký tự">
    Nhập bình luận
</div>

Bạn có thể dùng mã lệnh javascript đển gán giá trị cho các thuộc tính html trong các element.

Gán giá trị cho các thuộc tính html

Trong trang web, nếu có nhu cầu gán giá trị mới cho các thuộc tính html thì bạn dùng hàm setAttribute. Cú pháp như sau:

x.setAttribute("tênthuộctính", "giá trị");

Trong đó x là phần tử nào đó trong trang. Ví dụ:

<img id="hinh1" src="https://longnv.name.vn/wp-content/uploads/2020/03/javascript-la-gi-324x235.png">
<p> <a id="tw" href="https://google.com">Google</a> </p>
<p> <button name="inan" type="button" onclick="window.print();">In ra giấy</button> </p>
<script>
var hinh = document.getElementById("hinh1");
hinh.setAttribute("src","https://longnv.name.vn/wp-content/uploads/2019/09/logo4-150x150.png");
hinh.setAttribute("width", "90px");
hinh.setAttribute("height", "90px");

var tw = document.getElementById("tw");
tw.setAttribute("href", "https://longnv.name.vn");
tw.innerText="Thầy Long Web";

var inan = document.getElementsByName("inan")[0];
inan.setAttribute("disabled", true);
</script>
<button onclick="abc()">Gán thuộc tính</button><hr>
<input value="OK"> <br>
<button onclick="alert('Chúc an lành')" disabled="true">Xử lý </button><br>
<a href="http://google.com" id="tlw">Link</a><br>
<img src="https://longnv.name.vn/wp-content/uploads/2020/03/tong-quan-ve-javascript.png">
<script>
function abc() {
  document.getElementsByTagName("INPUT")[0].setAttribute("type", "button"); 
  document.getElementById("tlw").setAttribute("href", "https://longnv.name.vn");
  document.getElementsByTagName("img")[0].setAttribute("width", "200px");
  document.getElementsByTagName("button")[1].disabled=false;
}
</script>

Lấy giá trị các thuộc tính html

Dùng hàm getAttribute để lấy giá trị của 1 thuộc tính html. Cú pháp như sau: x.getAttribute(“tên thuộc tính”);

<img src="https://longnv.name.vn/hinh/songdep1.jpg" width="300" height="180">
<img src="https://longnv.name.vn/hinh/songdep2.jpg" >
<script>
    var arr = document.getElementsByTagName("img");
    var w = arr[0].getAttribute("width");
    var h = arr[0].getAttribute("height");
    arr[1].setAttribute("width",w);
    arr[1].setAttribute("height",h);
</script>

Javascript và các thuộc tính css của element

Ngoài các thuộc tính html , mỗi phần tử trong DOM có rất nhiều thuộc tính css. Bạn có thể dùng javascript truy xuất đến các thuộc tính css để gán giá trị mới, đó là cách dùng Javascript định dạng trang web.

Đối tượng style trong 1 element

Mỗi phần tử trong DOM có 1 đối tượng đặc biệt tên là style – đây là nơi chứa các thuộc tính css cho phần tử. Bảng sau là các thuộc tính css của các phần tử trong DOM:

Thuộc tínhMô tả
backgroundGán hoặc lấy background của element
backgroundColorGán/lấy màu nền của element
backgroundImageSets or returns the background-image for an element
borderSets or returns borderWidth, borderStyle, and borderColor in one declaration
borderRadiusA shorthand property for setting or returning all the four borderRadius properties
bottomGán/lấy tọa độ cạnh dưới của element
boxSizingAllows you to define certain elements to fit an area in a certain way
colorGán/lấy màu chữ của element
displayGán/lấy cách hiển thị element
cssFloatGán/lấy giá thuộc tính Float của element
fontFamilyGán/lấy tên font của element
fontSizeGán/lấy cỡ chữ của element
fontStyleSets or returns whether the style of the font is normal, italic or oblique
heightGán/lấy độ cao của element
leftGán/lấy tọa độ cạnh trái của element
letterSpacingGán/lấy khoảng cách giữa các ký tự trong element
lineHeightSets or returns the distance between lines in a text
marginGán/lấy lề ngoài của element (có thể đến 4 giá trị)
paddingGán/lấy lề trong của element (có thể đến 4 giá trị)
positionGán/lấy giá trị thuộc tính position của element (static, relative, absolute or fixed)
resizeSets or returns whether or not an element is resizable by the user
rightGán/lấy tọa độ cạnh phải của element
textAlignGán/lấy cách canh chữ theo chiều ngang
topGán/lấy tọa độ cạnh trên của element
widthGán/lấy độ rộng của element
zIndexSets or returns the stack order of a positioned element

Tham khảo thêm: https://www.w3schools.com/jsref/dom_obj_style.asp

Tên một số thuộc tính trong đối tượng style so với các thuộc tính css chuẩn có chút khác biệt. Đó là : với các thuộc tính css chuẩn có dấu gạch ngang ở giữa (ví dụ font-family) thì trong style sẽ bỏ dấu gạch ngang và đổi chữ hoa cho ký tự phía sau (thành fontFamily) .

Định dạng css cho element bằng javascript

Thông qua cú pháp đơn giản là x.style.tênthuộctínhcss , bạn có thể định dạng phần tử trong trang dễ dàng. Trong đó x là phần tử bạn chọn để định dạng, còn tenthuoctinhcss thì tra cứu trong bảng trên.

<ul id="phanbiet">
    <b>Hãy phân biệt</b>
    <li>Bình đẳng và công bằng</li>
    <li>Dũng cảm và liều lĩnh</li>
    <li>Tiết kiệm và hà tiện</li>
    <li>Quyết đoán và độc đoán</li>
</ul>
<script>
var pb = document.getElementById('phanbiet');
pb.style.color='red';
pb.style.border='2px solid darkblue';
pb.style.width='300px';
</script>

Định dạng một mảng các element

Để định dạng nhiều phần tử, bạn dùng các hàm getElemenentsByName, getElemenentsByTagName , getElemenentsByClassName để nhận về 1 mảng các phần tử rồi lặp qua mảng để định dạng từng cái một.

<ul id="phanbiet">
    <b>Hãy phân biệt</b>
    <li>Bình đẳng và công bằng</li>
    <li>Dũng cảm và liều lĩnh</li>
    <li>Tiết kiệm và hà tiện</li>
    <li>Quyết đoán và độc đoán</li>
</ul>
<script>
 var arr = document.getElementsByTagName("li");
 console.log(arr);
for(let i=0; i<arr.length; i++){
    let li = arr[i];  
    li.style.color='blue';
    li.style.textTransform='uppercase';
}
</script>

Sử dụng className để định dạng

Ngoài cách gán thuộc tính qua đối tượng style để định dạng css, việc dùng Javascript định dạng trang web có thể thực hiện thông quan việc gán thuộc tính className cho phần tử trong trang.

<style>.abc{ color:red; font-size: 28px; }</style>
<h2 id='tp'>THƠ HAY</h2>
<script>
    var h= document.getElementsByTagName('h2')[0];
    h.className='abc';
</script>

Thêm class css cho element

Mỗi phần tử trong DOM có thể được gán cho nhiều class css . Để bổ sung 1 class css cho nó thì dùng cú pháp x.classList.add( tênclass); , trong đó x là phần tử nào đó trong DOM.

<style>
    .boxnhac  { width: 300px}
    .row { color:red }
    .vien {border: 2px solid darkblue;  }
</style>
<div id="danca" class="boxnhac">
    <b>Các thể điệu dân ca</b>
    <p class="row">Thể điệu Lý Mỹ Hưng</p>
    <p class="row">Thể điệu Vọng Kim Lang</p>
    <p class="row">Thể điệu Lý Cái Mơn</p>
    <p class="row">Thể điệu Lý Chim Quyên</p>
</div>
<script>
var danca = document.getElementById("danca");
danca.classList.add('vien');
</script>

Gỡ class css cho element

Có thể gỡ bớt 1 class css cho 1 phần tử bằng cách dùng cú pháp x.classList.remove(tênClass);

<style>
    .boxnhac  { width: 300px}
    .row { color:red }
    .vien {border: 2px solid darkblue;  }
    .nensang { background-color: antiquewhite;}
</style>
<div id="danca" class="boxnhac vien nensang">
    <b>Các thể điệu dân ca</b>
    <p class="row">Thể điệu Lý Mỹ Hưng</p>
    <p class="row">Thể điệu Vọng Kim Lang</p>
    <p class="row">Thể điệu Lý Cái Mơn</p>
    <p class="row">Thể điệu Lý Chim Quyên</p>
</div>
<script>
var danca = document.getElementById("danca");
danca.classList.remove('vien');
</script>

Thêm bớt class css cho element

Hàm toggle(‘tênClass’) dùng để đảo qua lại việc thêm hoặc gỡ bỏ 1 class css cho phần tử.

<style>
    .boxnhac  { width: 300px}
    .row { color:red }
    .vien {border: 2px solid darkblue;  }
</style>
<div id="danca" class="boxnhac">
    <b>Các thể điệu dân ca</b>
    <p class="row">Thể điệu Lý Mỹ Hưng</p>
    <p class="row">Thể điệu Vọng Kim Lang</p>
    <p class="row">Thể điệu Lý Cái Mơn</p>
    <p class="row">Thể điệu Lý Chim Quyên</p>
</div>
<button onclick="daonen()">Đảo nền</button>
<script>
function daonen(){
    var danca = document.getElementById("danca");
    danca.classList.toggle('vien');
}
</script>

Bạn đã học cách dùng Javascript định dạng trang web. Đó là dùng các hàm setAttribute, getAttribute để truy xuất và gán các thuộc tính html. Hoặc định dạng css qua đối tượng style của element. Hay là cách gán className cho phần tử. Và cuối cùng là thêm class css cho phần tử bằng hàm classList.add. Nhờ dùng Javascript định dạng trang web mà trang của bạn sẽ linh động hơn khi có thể thay đổi định dạng theo cách dùng của người xem.