3. ชีทรูปแบบ ตามเงื่อนไข

คำอธิบาย

1. มี 1 เพจ
2. เมื่อมีการเปลี่ยนค่าให้แสดงผลชีทรูปแบบตามเงื่อนไขที่ถูกต้อง

แสดงข้อความ ประเทศไทย

ตัวเลือกกำหนดขนาดอักษร

ขนาดตัวอักษร ? พิกเซล

เมื่อคลิกที่ปุ่มแสดงผล ให้ปรับข้อความ ประเทศไทยมีขนาดอักษรตามที่กำหนด

1. <style>
2. div.value-pack:hover {
3. border : 1px dotted red;
4. }
5. </style>
6. <form>
7. <div id="c">ประเทศไทย</div>
8. <div class="value-pack">
9. <input type="checkbox" id="cfsize">
10. ขนาดอักษร
11. <input type="number" id="fsize">
12. พิกเซล
13. </div>
14. <div class="value-pack">
15. <input type="checkbox" id="cbg_color">
16. สีพื้นหลัง
17. <input type="color" id="bg_color">
18. </div>
19. <input type="button" onclick="cstyle()" value="แสดง">
20. <input type="button" onclick="cstyle2()" value="แสดง (เรียกใช้ cstyle2())">
21. </form>
22. <script>
23. function cstyle() {
24. // อิลิเมนท์เป้าหมายที่ต้องการปรับชีทรูปแบบ
25. var a = document.getElementById("c");
26. //ขนาดอักษร
27. var c = document.getElementById("cfsize").checked;
28. if (c) {
29. var s = document.getElementById("fsize").value;
30. a.style.fontSize = s+"px";
31. }
32. //สีพื้นหลัง
33. var c = document.getElementById("cbg_color").checked;
34. if (c) {
35. var s = document.getElementById("bg_color").value;
36. a.style.backgroundColor = s;
37. }
38. }
39. </script>
40. <script>
41. function cstyle2() {
42. //ขนาดอักษร
43. setStyle("fontSize", "c", "cfsize", "fsize", "px");
44. //สีพื้นหลัง
45. setStyle("backgroundColor", "c", "cbg_color", "bg_color");
46. }
47. function setStyle(attrstyle, target, check, val, unit) {
48. // attrstyle - ชีทรูปแบบที่ต้องการเปลี่ยนแปลง
49. // target - ไอดีของอิลิเมนท์เป้าหมาย ที่ต้องการเปลี่ยนชีทรูปแบบ
50. // check - ไอดีของอิลิเมนท์ที่ทำเครื่องหมายเลือก หรือไม่เลือก
51. // val - ไอดีของอิลิเมนท์ ที่ต้องการอ่านค่า
52. // unit - หน่วยของชีทรูปแบบ ถ้าไม่กำหนด จะถูกทำให้เป็น ""
53. var c = document.getElementById(check).checked;
54. if (c) {
55. if (unit===undefined)
56. unit = "";
57. var s = document.getElementById(val).value;
58. var a = document.getElementById(target);
59. a.style[attrstyle] = s+unit;
60. }
61. }
62. </script>

condition.1