|
 |
|
สอบถามวิธีปรับค่าตัวแปรในclassหน่อยครับ(อยากปรับสี) |
|
 |
|
|
 |
 |
|
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
border: none;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
.info {background-color: blue;} /*สีเดิม*/
.info:hover {background: purple;} /*สีที่ต้องการเปลี่ยน*/
</style>
</head>
<body>
<button class="btn info">Button</button>
</body>
</html>
แบบนี้หรือป่าวครับ
|
 |
 |
 |
 |
Date :
2018-11-29 15:32:06 |
By :
nobetaking |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ประมาณว่าอยากได้ให้ทำงานแบบ เมื่อทำการ select แล้วจะเปลี่ยนสีเมนู ตามที่selectนะครับ
ไม่ใช่ว่าอยากได้แบบที่มีให้เลือกแต่อยากให้เลือกได้ระหว่างใช้งานครับ
เช่น กดปุ่ม เรียกฟังค์ชั่น แล้วสีเมนูเปลี่ยนเป็นอีกสี
|
 |
 |
 |
 |
Date :
2018-11-29 15:50:17 |
By :
holyomega |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
เปลี่ยนจาก getElementById เป็น getElementsByClassName ครับ
ลองดู
|
 |
 |
 |
 |
Date :
2018-11-29 16:13:02 |
By :
Jatmentz |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
กำหนด css classname ให้เท่ากับ จำนวน element ของสีที่ต้องการ
พอ select change ก็เอา value ไปกำหนด classname ให้กับ object
Code (PHP)
<style>
.dropbtn .c1 { background-color: red; }
.dropbtn .c2 { background-color: green; }
.dropbtn .c3 { background-color: blue; }
</style>
<select onchange="$('.dropbtn').attr('class', 'dropbtn c'+this.value)">
<option value="1">red</option>
<option value="2">green</option>
<option value="3">blue</option>
</select>
ปล. ถ้าจะเปลี่ยน ตรง style sheet เลย จำเป็นต้องผ่าน คำสั่ง document write
เช่น document.write(`<style>.dropbtn{ background-color: red;}</style>`;
เพื่อให้มีการ อ่านค่า style sheet ใหม่ พอใช้ document write ก็จะไปทับ style sheet เก่า
แต่มันจะเปลี่ยน สี object ที่ทำไปแล้วหรือไม่ อันนี้ไม่แน่ใจ เพราะไม่เคยทำ
แต่เดาว่าไม่เปลี่ยน เพราะ object มันถูกสร้างไปแล้ว ต้อง rewrite object ใหม่ ถีงจะเปลี่ยนสี
|
ประวัติการแก้ไข 2018-11-29 18:00:05 2018-11-29 18:00:47
 |
 |
 |
 |
Date :
2018-11-29 17:48:16 |
By :
Chaidhanan |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 01
|