ការសិក្សាពីការប្រើប្រាស់ jQuery

មាតិកា

XIV.        CSS Manipulation ដោយប្រើប្រាស់ jQuery

XIV.     CSS Manipulation ដោយប្រើប្រាស់ jQuery

jQuery library រួមបញ្ចូលនូវ methods ផ្សេងៗគ្នា ដើម្បី manipulate style properties ហើយនិង CSS class នៃ DOM Element(s)។ តារាងខាងក្រោមបង្ហាញអំពី jQuery methods សម្រាប់ styling និង css manipulate។

រូបភាពខាងក្រោមបង្ហាញអំពី jQuery methods សម្រាប់ការ changes style ហើយនិង css class នៃ DOM elements.

1. jQuery css() Method

jQuery css() method គឺត្រូវបានគេប្រើដើម្បី get ឬក៏ set styles properties ទៅលើ elements ជាក់លាក់។

រូបមន្ត

ឧទាហរណ៍

លទ្ធផល

នៅក្នុងឧទាហរណ៍ខាងលើ យើងកំណត់នូវ background-color អោយ #myDiv ហើយនិង font styles ទៅគ្រប់ <p> elements។ វិធីសាស្រ្តដូចគ្នា គឺយើងទទួលយក value នៃ style properties មួយចំនួន ដោយប្រើប្រាស់ css() method ដោយបញ្ជាក់នូវឈ្មោះ property ធ្វើជា​ parameter ទី១។

1. jQuery addClass() Method

jQuery addClass() method គឺត្រូវបានគេប្រើដើម្បី បន្ថែមទៅលើ single ឬក៏ multiple css class ទៅលើ elements។

ឧទាហរណ៍

លទ្ធផល

ក្នុងឧទាហរណ៍ខាងលើ យើង set នូវ css class នៃ Individual <div> element (#myDiv) ហើយនិង Multiple <p> elements ដោយប្រើប្រាស់ addClass() mehod

1. jQuery toggleClass() Method

jQuery toggleClass() method គឺត្រូវបានគេប្រើសម្រាប់ toggle រវាង adding/removing classes ទៅលើ elements។

រូបមន្ត

ឧទាហរណ៍

លទ្ធផល

ក្នុងឧទាហរណ៍ខាងលើ css class yellowDiv ត្រូវបានបន្ថែមចូលទៅក្នុង div element ដំបូងគេ ហើយបន្ទាប់មកវាត្រូវបាន remove ចេញ។