jquery เพิ่ม,ลบ,เปิดปิด(สลับค่า)style

[pond]

code jquery

Workspace 1_132.png (146.9 KiB) Viewed 530 times

อธิบาย code
3อ่านcodeภาษา ด้วย utf-8
4ชื่อtitle
5คำสั่งที่ทำให้เป็น Responsive
6เรียกใช้งาน javascript ของ jquery
7แท็คเปิด javascipt
8เรียกใช้งาน function ของ jquery
10กำหนดfunction ถ้ากด คลิก ที่มีid add ให้ทำอะไร
11เปลี่ยนแปลงแท็ค p ให้เพิ่ม class ที่ชื่อ style1
12เปลี่ยนแปลงแท็ค div ให้เพิ่ม class ที่ชื่อ stylediv
15กำหนดfunction ถ้ากด คลิก ที่มีid del ให้ทำอะไร
16เปลี่ยนแปลงแท็ค p ให้ลบ class ที่ชื่อ style1
17เปลี่ยนแปลงแท็ค div ให้ลบ class ที่ชื่อ stylediv
19กำหนดfunction ถ้ากด คลิก ที่มีid tog ให้ทำอะไร
20เปลี่ยนแปลงแท็ค p ให้สลับเปิดปิด class ที่ชื่อ style1
21เปลี่ยนแปลงแท็ค div ให้สลับเิดปิด class ที่ชื่อ stylediv
24แท็คปิด javascipt
25เปิดแท็ค style
26 กำหนด class ที่ชื่อว่า style1
27ขนาดตัวอักษร 30px
28เปลี่ยนสีตัวอักษร เป็นสีแดง
29background สีเหลือง
30กำหนดกรอบ ขนาด2px ชนิด solid สีดำ
32กำหนดclass ที่ชื่อ stylediv
33กว้าง80
34สูง100
35กรอบ 2px ชนิด solid สีแดง
36เงา ด้านขวา 7px ข้างล่าง 5px สีเหลือง
37พื้นหลัง สีเขียวออกเหลือง
38ตัวอักษรอยู่ตรงกลาง
41ปิดแท็ค style
44แท็คp มีตัวอักษร test
45แท็ค div มี ตัวอักษร hello
47ปุ่ม id add
48ปุ่ม id del
49ปุ่ม id tog
ผลลัพธ์

Workspace 1_133.png (56.23 KiB) Viewed 530 times

เมื่อทำการกดปุ่ม
-ปุ่มเพิ่มstyle คือ เมื่อกดปุ่มจะเป็นการเพิ่ม style
-ปุ่มลบstyle คือ เมื่อกดปุ่มจะเป็นการลบ style
-เปิดปิดstyle คือ เมื่อกดปุ่ม จะสลับค่า เช่น มีstyle เมื่อกด จะลบ style

Workspace 1_134.png (70.64 KiB) Viewed 530 times