jQuery CSS 操作 - css() 方法

jQuery CSS ការប្រើប្រាស់ ក្រដាស់ប្រព័ន្ធ

ឧទាហរណ៍

Set the color of the <p> element:

$(".btn1").click(function(){
  $("p").css("color","red");
});

ព្យាយាមដោយខ្លួនឯង

定义和用法

css() 方法返回或设置匹配元素的一个或多个样式属性。

返回 CSS 属性值

返回第一个匹配元素的 CSS 属性值。

注释：当用于返回一个值时，不支持简写的 CSS 属性（例如 "background" 和 "border"）。

$(selector).css(name)
អត្តបទ ការពន្យល់
name 必需。指定 CSS 属性的名称。该参数可以包含任何 CSS 属性。例如 "color"。

ឧទាហរណ៍

Get the value of the color style attribute of the first paragraph:

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

ព្យាយាមដោយខ្លួនឯង

Set CSS 属性

កំណត់ CSS អត្តបទ នៅលើសមាសធាតុដែលត្រូវអាចមានចំនួនច្រើន

$(selector).css(name,value)
អត្តបទ ការពន្យល់
name ចាំបាច់
value

value - ជាការបើកចំហ

ប្រសិនបើត្រូវកំណត់តម្លៃជាអត្តបទទទេ កម្រិតអត្តបទនឹងត្រូវលប់ចោល

ឧទាហរណ៍

កំណត់ពណ៌សម្លេងទាំងអស់នៃអត្ថបទ

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

ព្យាយាមដោយខ្លួនឯង

កំណត់ CSS អត្តបទ ដោយប្រើតុល្យវិទ្យា

កំណត់តម្លៃអត្តបទរចនាភាព នៅលើសមាសធាតុដែលត្រូវអាចមានចំនួនច្រើន

អត្តបទនេះបង្ហាញតម្លៃអត្តបទដែលត្រូវកំណត់ ដោយទទួលបានបីគម្រោង index គឺជាទីតាំងនៃសមាសធាតុនៅក្នុងក្រុម value គឺជាតម្លៃអត្តបទដើម

$(selector).css(name,function(index,value))
អត្តបទ ការពន្យល់
name ចាំបាច់
function(index,value)

កំណត់រួមគ្នានៃតុល្យវិទ្យាក្នុងការបញ្ចេញតម្លៃថ្មីនៃ CSS អត្តបទ

  • index - ជាការបើកចំហ
  • oldvalue - ជាការបើកចំហ

ឧទាហរណ៍ 1

កំណត់ពណ៌សម្លេងទាំងអស់នៃអត្ថបទ

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

ព្យាយាមដោយខ្លួនឯង

ឧទាហរណ៍ 2

ការបង្កើនកម្រាស់ div ដោយរហលើក

$("div").click(function() {
  $("this").css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

ព្យាយាមដោយខ្លួនឯង

កំណត់ CSS អត្តបទ/តម្លៃ មួយចំនួន

$(selector).css({property:value, property:value, ...})

កំណត់ "ឈ្មោះ/តម្លៃ" រូបមុខ ទៅជាសមាសធាតុដែលត្រូវអាចមានចំនួនច្រើន

នេះគឺជាវិធីល្អបំផុតក្នុងការកំណត់រចនាភាព នៅលើសមាសធាតុដែលត្រូវអាចមានចំនួនច្រើន

អត្តបទ ការពន្យល់
{property:value}

ចាំបាច់

រូបមុខនេះអាចមានចំនួនមួយចំនួន នៃ CSS អត្តបទ/តម្លៃ ដូចជា {"color":"red","font-weight":"bold"}

ឧទាហរណ៍

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

ព្យាយាមដោយខ្លួនឯង

jQuery CSS ការប្រើប្រាស់ ក្រដាស់ប្រព័ន្ធ