MooTools - Thuộc tính kiểu
MooTools cung cấp một số phương thức Đặc biệt để đặt và nhận các giá trị thuộc tính kiểu cho các phần tử DOM. Chúng tôi sử dụng các thuộc tính kiểu khác nhau như chiều rộng, chiều cao, màu nền, độ đậm của phông chữ, màu phông chữ, đường viền, v.v. Bằng cách đặt và nhận các giá trị khác nhau cho các thuộc tính kiểu này, chúng tôi có thể trình bày các phần tử HTML theo các kiểu khác nhau.
Đặt và lấy thuộc tính kiểu
Thư viện MooTools chứa các phương thức khác nhau được sử dụng để đặt hoặc lấy giá trị của một thuộc tính kiểu cụ thể hoặc nhiều thuộc tính kiểu.
setStyle ()
Phương thức này cho phép bạn đặt giá trị cho một thuộc tính của phần tử DOM. Phương thức này sẽ hoạt động trên đối tượng bộ chọn của một phần tử DOM cụ thể. Chúng ta hãy lấy một ví dụ cung cấp màu nền cho phần tử div. Hãy xem đoạn mã sau.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
$('body_wrap').setStyle('background-color', '#6B8E23');
$$('.class_name').setStyle('background-color', '#FAEBD7');
});
</script>
</head>
<body>
<div id = "body_wrap">A</div>
<div class = "class_name">B</div>
<div class = "class_name">C</div>
<div class = "class_name">D</div>
<div class = "class_name">E</div>
</body>
</html>Bạn sẽ nhận được kết quả sau:
Output
getStyle ()
Phương thức getStyle () là để lấy giá trị của thuộc tính style của một phần tử. Hãy để chúng tôi lấy một ví dụ lấy màu nền của một div có tên body_wrap. Hãy xem cú pháp sau.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Nhiều thuộc tính kiểu
Thư viện MooTools chứa các phương thức khác nhau được sử dụng để đặt hoặc lấy giá trị của một thuộc tính kiểu cụ thể hoặc nhiều thuộc tính kiểu.
setStyle ()
Nếu bạn muốn thiết lập nhiều thuộc tính kiểu trên một phần tử hoặc một mảng phần tử thì bạn phải sử dụng phương thức setStyle (). Hãy xem cú pháp sau của phương thức setStyle ().
Syntax
$('<element-id>').setStyles({
//use different style properties such as width, height, background-color, etc.
});Example
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 200px;
height: 200px;
background-color: #eeeeee;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var setWidth = function(){
$('body_div').setStyles({
'width': 100
});
}
var setHeight = function(){
$('body_div').setStyles({
'height': 100
});
}
var reset = function(){
$('body_div').setStyles({
'width': 200,
'height': 200
});
}
window.addEvent('domready', function() {
$('set_width').addEvent('click', setWidth);
$('set_height').addEvent('click', setHeight);
$('reset').addEvent('click', reset);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "set_width" value = "Set Width to 100 px"/>
<input type = "button" id = "set_height" value = "Set Height to 100 px"/>
<input type = "button" id = "reset" value = "Reset"/>
</body>
</html>Bạn sẽ nhận được kết quả sau:
Output
Hãy thử các nút này trên trang web, bạn có thể thấy sự khác biệt với kích thước div.