.css() | Hàm JQuery | Tham Khảo JQuery | Học Web Chuẩn

Trang chủ » Chỉnh Css Bằng Js » .css() | Hàm JQuery | Tham Khảo JQuery | Học Web Chuẩn

Có thể bạn quan tâm

.css()
  • Trang chủ
  • Tham khảo
  • jQuery
  • jQuery - function
  • .css()

Định nghĩa và sử dụng

  • .css(): Được dùng để thêm một hoặc nhiều style cho thành phần.
  • Ngoài ra còn có thể sử dụng .css() để lấy giá trị style của thành phần.

Cấu trúc

Thêm style cho thành phần:

  • Đã được thêm vào từ phiên bản 1.0

Thêm một style cho thành phần

.css('thuộc tính','giá trị')

$('p').css('color','red');

Thêm nhiều style cho thành phần

.css({'thuộc tính 01':'giá trị 01','thuộc tính 02':'giá trị 02',...})

$('p').css({'color':'yellow','background':'blue'});
  • Đã được thêm vào từ phiên bản 1.4

.css('thuộc tính',function(index,giá trị){})

$('p').css(width,function(index,value){ return parseFloat( value ) * 1.2; });

Lấy giá trị style của thành phần:

  • Đã được thêm vào từ phiên bản 1.0

Lấy một giá trị style của thành phần

.css('thuộc tính'

$('p').css('color');

Lấy nhiều giá trị style của thành phần

.css({'thuộc tính 01','thuộc tính 02',...})

$('p').css({'color','background'});

.css('thuộc tính','giá trị')

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('p.test').css('color','red'); }); </script> </head> <body> <p class="test">Thành phần p có class</p> <p>Thành phần p</p> </body> </html>

Hiển thị trình duyệt:

Ta thấy thành phần p đã được thêm style="color: red".

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p class="test">Thành phần p có class</p> <p>Thành phần p</p>

<p class="test" style="color: red;">Thành phần p có class</p> <p>Thành phần p</p>

.css({'thuộc tính 01':'giá trị 01','thuộc tính 02':'giá trị 02',...})

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('p.test').css({'color':'blue','border':'1px dashed red'}); }); </script> </head> <body> <p class="test">Thành phần p có class</p> <p>Thành phần p</p> </body> </html>

Hiển thị trình duyệt:

Ta thấy thành phần p đã được thêm style="color: red".

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p class="test">Thành phần p có class</p> <p>Thành phần p</p>

<p class="test" style="color: blue; border: 1px dashed red;">Thành phần p có class</p> <p>Thành phần p</p>

.css('thuộc tính',function(index,giá trị){})

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <style> p { background: yellow; width: 200px; } </style> <script> $(function(){ $('p.test').css('width', function(index,value){ return parseFloat( value ) * 2; }); }); </script> </head> <body> <p class="test">Thành phần p có class</p> <p>Thành phần p</p> </body> </html>

Hiển thị trình duyệt:

Ta thấy thành phần p có class="test" đã được thêm width với giá trị nhân 2 (*2).

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p class="test">Thành phần p có class</p> <p>Thành phần p</p>

<p class="test" style="width: 400px;">Thành phần p có class</p> <p>Thành phần p</p>

.css('thuộc tính','function')

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <style> p { background: yellow; width: 200px; } </style> <script> $(function(){ $('p.test').css('width', '+=300'); }); </script> </head> <body> <p class="test">Thành phần p có class</p> <p>Thành phần p</p> </body> </html>

Hiển thị trình duyệt:

Ta thấy thành phần p có class="test" đã được thêm width với giá trị cộng thêm 300 (+=300).

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p class="test">Thành phần p có class</p> <p>Thành phần p</p>

<p class="test" style="width: 500px;">Thành phần p có class</p> <p>Thành phần p</p>

.css('thuộc tính')

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ var ulHeight = $('ul').css('height'); $('span').text(ulHeight); }); </script> </head> <body> <ul> <li>list 01</li> <li>list 02</li> <li>list 03</li> </ul> <p>Thành phần ul có chiều cao: <span><span></p> </body> </html>

Hiển thị trình duyệt:

.css(height) đã lấy giá trị chiều cao của thành phần ul.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<ul> <li>list 01</li> <li>list 02</li> <li>list 03</li> </ul> <p>Thành phần ul có chiều cao: <span><span></p>

<ul> <li>list 01</li> <li>list 02</li> <li>list 03</li> </ul> <p>Thành phần ul có chiều cao: <span>60px<span></p>

.css({'thuộc tính 01','thuộc tính 02'})

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <style> p, ul { float: left; margin-right: 20px;} li { width: 80px; list-style: none; } li.first { background-color: yellow; color: #333; height: 40px; } li.second { background-color: blue; color: #ddd; height: 30px; } li.third { background-color: red; color: yellow; height: 60px; } </style> <script> $(function(){ $("li").click(function () { var html = ["Click từng phần tử li để xem kết quả:"]; var styleProps = $(this).css( ["width", "height", "color", "background-color"] ); $.each( styleProps, function( prop, value ) { html.push( prop + ": " + value ); }); $( "p" ).html( html.join( "<br>" ) ); }); }); </script> </head> <body> <ul> <li class="first">list 01</li> <li class="second">list 02</li> <li class="third">list 03</li> </ul> <p></p> </body> </html>

Hiển thị trình duyệt:

.css(height) đã lấy giá trị chiều cao của thành phần ul.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery - click thành phần li

<ul> <li class="first">list 01</li> <li class="second">list 02</li> <li class="third">list 03</li> </ul> <p></p>

<ul> <li class="first">list 01</li> <li class="second">list 02</li> <li class="third">list 03</li> </ul> <p>Click từng phần tử li để xem kết quả:<br> width: 80px<br> height: 40px<br> color: rgb(51, 51, 51)<br> background-color: rgb(255, 255, 0)</p>

.context

.data()

HTML & XHTML

HƯỚNG DẪN HỌC

  • Hướng dẫn học
  • Hướng dẫn học XHTML & HTML5
  • Hướng dẫn học CSS
  • Hướng dẫn học CSS3
  • Hướng dẫn học Responsive
  • Hướng dẫn học ES6
  • Hướng dẫn học React.js
  • Hướng dẫn học jQuery
  • Hướng dẫn học PHP
  • Hướng dẫn học Laravel
  • Hướng dẫn học Wordpress
  • Hướng dẫn học Webpack
  • Hướng dẫn học SCSS

THAM KHẢO

Hàm jQuery (Selectors)

  • .add()
  • .addBack()
  • .addClass()
  • .after()
  • .andSelf()
  • .animate()
  • .append()
  • .appendTo()
  • .attr()
  • .before()
  • .bind()
  • .blur()
  • .change()
  • .children()
  • .clearQueue()
  • .click()
  • .clone()
  • .closest()
  • .contents()
  • .context
  • .css()
  • .dblclick()
  • .delay()
  • .delegate()
  • .dequeue()
  • .detach()
  • .die()
  • .each()
  • .empty()
  • .end()
  • .eq()
  • .error()
  • .fadeIn()
  • .fadeOut()
  • .fadeTo()
  • .fadeToggle()
  • .filter()
  • .find()
  • .finish()
  • .first()
  • .focus()
  • .focusin()
  • .focusout()
  • .get()
  • .has()
  • .hasClass()
  • .height()
  • .hide()
  • .hover()
  • .html()
  • .index()
  • .innerHeight()
  • .innerWidth()
  • .insertAfter()
  • .insertBefore()
  • .is()
  • .jquery
  • .keydown()
  • .keypress()
  • .keyup()
  • .last()
  • .length
  • .live()
  • .load()
  • .map()
  • .mousedown()
  • .mouseenter()
  • .mouseleave()
  • .mousemove()
  • .mouseout()
  • .mouseover()
  • .mouseup()
  • .next()
  • .nextAll()
  • .nextUntil()
  • .not()
  • .off()
  • .offset()
  • .offsetParent()
  • .on()
  • .one()
  • .outerHeight()
  • .outerWidth()
  • .parent()
  • .parents()
  • .parentsUntil()
  • .position()
  • .prepend()
  • .prependTo()
  • .prev()
  • .prevAll()
  • .prevUntil()
  • .remove()
  • .removeAttr()
  • .removeClass()
  • .removeData()
  • .removeProp()
  • .replaceAll()
  • .replaceWith()
  • .resize()
  • .scroll()
  • .scrollLeft()
  • .scrollTop()
  • .select()
  • .selector()
  • .serialize()
  • .serializeArray()
  • .show()
  • .siblings()
  • .size()
  • .slice()
  • .slideDown()
  • .slideToggle()
  • .slideUp()
  • .stop()
  • .submit()
  • .text()
  • .toArray()
  • .toggle()
  • .toggleClass()
  • .trigger()
  • .triggerHandler()
  • .unbind()
  • .undelegate()
  • .unload()
  • .unwrap()
  • .val()
  • .width()
  • .wrap()
  • .wrapAll()
  • .wrapInner()

Tham khảo CSS

  • CSS - Tham khảo
  • CSS - Bộ chọn (selectors)
  • CSS - Thuộc tính
  • CSS3 - Tham khảo
  • CSS3 - Bộ chọn (selectors)
  • CSS3 - Thuộc tính
  • Xem thêm ví dụ về CSS

Tham khảo HTML/XHTML

  • Tham khảo HTML/XHTML
  • Tag theo function
  • Tag theo giá trị DTD
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Xem thêm ví dụ về HTML

Tham khảo JQUERY

  • jQuery - Tham khảo
  • jQuery - Cài đặt và sử dụng
  • jQuery - Bộ chọn (selectors)
  • jQuery - Hàm (function)
  • jQuery - Ajax

Tham khảo Thêm

  • Lang codes
  • Font chữ
  • Mã ký tự
  • MIME
  • Đơn vị trong HTML & CSS
  • Giá trị màu trong HTML & CSS
  • Thuộc tính tổng quát

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Chỉnh Css Bằng Js