kaedah jQuery css().

Kaedah

css() menetapkan atau mengembalikan satu atau lebih atribut gaya elemen yang dipilih.

Kembalikan sifat CSS

Untuk mengembalikan nilai sifat CSS yang ditentukan, sila gunakan sintaks berikut:

css("propertyname");

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("背景颜色 = " + $("p").css("background-color"));
  });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
</html>

Tetapkan sifat CSS

Untuk menetapkan sifat CSS tertentu, sila gunakan sintaks berikut:

css("propertyname","value");

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","yellow");
  });
});
</script>
</head>
<body>
<h2>标题</h2>
<p style="background-color:#ff0000; width:200px;">段落1</p>
<p style="background-color:#00ff00; width:200px;">段落2</p>
<p style="background-color:#0000ff; width:200px;">段落3</p>
<p style="width:300px;">段落4</p>
<button>设置 p 元素的背景</button>
</body>
</html>

Tetapkan berbilang sifat CSS

Untuk menetapkan berbilang sifat CSS, sila gunakan sintaks berikut:

css({"propertyname":"value ", "propertyname":"value",...});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>
<body>
<h2>标题</h2>
<p style="background-color:#ff0000; width:200px;">段落1</p>
<p style="background-color:#00ff00; width:200px;">段落2</p>
<p style="background-color:#0000ff; width:200px;">段落3</p>
<p style="width:300px;">段落4</p>
<button>设置 p 元素的背景</button>
</body>
</html>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").css({color:"red",fontSize:20,backgroundColor:"yellow"}); }) }); </script> <style type="text/css"> div{ color:blue; background-color:green; width:100px; height:100px; margin-top:5px; } </style> </head> <body> <div>仔细查看变化</div> <div>仔细查看变化</div> <br> <button>点击查看效果</button> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

kaedah jQuery css().

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]