สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
Moderator: mindphp
- mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41384
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
- ติดต่อ:
Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
ตำแหน่งช่องควรกำหนดด้วย id ส่วน css clas จุดประสงค์ในการใช้งานมันคือการเปลี่ยน style ของตำแหน่ง หรือตำแหน่งย่อยๆ หรือ กำหนด element ซ้อน element ให้แสดงผลได้แตกต่างกันอยู่แล้ว ศึกษาตามลิงค์ที่แปะให้ให้เข้าใจ แล้วประยุคใข้งานดูครับ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
- ewqolf
- PHP Super Hero Member
- โพสต์: 621
- ลงทะเบียนเมื่อ: 14/11/2022 9:26 am
Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
ผมทดลองลบ class และ add class ใหม่เข้าไปแล้วแต่ตัว style css นั้นไม่ได้เข้าไปที่ element ครับ ผมได้ลองวิธีการทั้งหมดนี้ซึ่งก็เป็นของพี่ไปแล้วแต่ว่าตัว css นั้นไม่ถูก reset ตามที่กำหนดใน css ครับซึ่งผมได้ทำการเช็คแล้วว่าชื่อ class นั้นตรงอย่างแน่นอนครับmindphp เขียน: ↑24/01/2023 1:04 pm ตัวอย่าง javascript เปลี่ยน class css
https://www.mindphp.com/developer/20-ja ... class.html
ตัวอย่าง jQuery เปลี่ยน class css
viewtopic.php?t=6179
ตัวอย่าง interactive css class
viewtopic.php?t=62460
- แนบไฟล์
-
- image_2023-01-26_132449069.png (2.25 KiB) Viewed 1369 times
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
- mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41384
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
- ติดต่อ:
Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
ลงโค้ดในคำถาม ควรลงเป็นข้อความ เพื่อความสามารถของคนที่จะช่วยเอาโค้ดไม่ลองเช็คปัญหา
และการตัดโค้ดมาลงควรลงที่เกี่ยวข้องกับคำถามมาให้ครบ
selector ไม่ได้เรียกมาจาก jQuery
และ
ในโค้ดที่ยกมา ดูไม่ออกมามี class อะไรอยู่ ถ้าจะ remove ด้วย method นั้นดูให้ชัวร์ก่อนว่า selector ที่เลือก element มามีอะไรอยู่ในนั้น
ทำความเข้าใน object ก้อนที่เลือกมาก่อนครับ ว่ามีองค์ประกอบอะไรบ้าง
และการตัดโค้ดมาลงควรลงที่เกี่ยวข้องกับคำถามมาให้ครบ
selector ไม่ได้เรียกมาจาก jQuery
และ
ในโค้ดที่ยกมา ดูไม่ออกมามี class อะไรอยู่ ถ้าจะ remove ด้วย method นั้นดูให้ชัวร์ก่อนว่า selector ที่เลือก element มามีอะไรอยู่ในนั้น
ทำความเข้าใน object ก้อนที่เลือกมาก่อนครับ ว่ามีองค์ประกอบอะไรบ้าง
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
- ewqolf
- PHP Super Hero Member
- โพสต์: 621
- ลงทะเบียนเมื่อ: 14/11/2022 9:26 am
Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
เช็คดูแล้วครับว่ามีข้อมูลซึ่งผมใช้ตัว selector ออกมาแล้วใช้ jquery มันก็ทำงานได้ครับและผมลองทำแยกเป็นขั้นตอนๆแล้วก็มีการลบชื่อ class และ ใส่ชื่อ class ใหม่ไปจริงๆครับ แต่ว่าตัว style ก็ยังไม่เปลี่ยนครับผมmindphp เขียน: ↑27/01/2023 12:06 am ลงโค้ดในคำถาม ควรลงเป็นข้อความ เพื่อความสามารถของคนที่จะช่วยเอาโค้ดไม่ลองเช็คปัญหา
และการตัดโค้ดมาลงควรลงที่เกี่ยวข้องกับคำถามมาให้ครบ
selector ไม่ได้เรียกมาจาก jQuery
และ
ในโค้ดที่ยกมา ดูไม่ออกมามี class อะไรอยู่ ถ้าจะ remove ด้วย method นั้นดูให้ชัวร์ก่อนว่า selector ที่เลือก element มามีอะไรอยู่ในนั้น
ทำความเข้าใน object ก้อนที่เลือกมาก่อนครับ ว่ามีองค์ประกอบอะไรบ้าง
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
- mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41384
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
- ติดต่อ:
Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
จาก Code ตัวอย่าง
ในโค้ดที่ยกมา ดูไม่ออกมามี class อะไรอยู่ ถ้าจะ remove ด้วย method นั้นดูให้ชัวร์ก่อนว่า selector ที่เลือก element มามีอะไรอยู่ในนั้น
ช่วยลงโค้ด ของ html, css class, และ JQuery ที่เข้าไปเปลี่ยน class มัน แล้วไม่เปลี่ยนมาดูหน่อยครับลงโค้ดในคำถาม ควรลงเป็นข้อความ เพื่อความสามารถของคนที่จะช่วยเอาโค้ดไม่ลองเช็คปัญหา
และการตัดโค้ดมาลงควรลงที่เกี่ยวข้องกับคำถามมาให้ครบ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
- ewqolf
- PHP Super Hero Member
- โพสต์: 621
- ลงทะเบียนเมื่อ: 14/11/2022 9:26 am
Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
โค้ดใน cssmindphp เขียน: ↑27/01/2023 10:13 pm จาก Code ตัวอย่างในโค้ดที่ยกมา ดูไม่ออกมามี class อะไรอยู่ ถ้าจะ remove ด้วย method นั้นดูให้ชัวร์ก่อนว่า selector ที่เลือก element มามีอะไรอยู่ในนั้นช่วยลงโค้ด ของ html, css class, และ JQuery ที่เข้าไปเปลี่ยน class มัน แล้วไม่เปลี่ยนมาดูหน่อยครับลงโค้ดในคำถาม ควรลงเป็นข้อความ เพื่อความสามารถของคนที่จะช่วยเอาโค้ดไม่ลองเช็คปัญหา
และการตัดโค้ดมาลงควรลงที่เกี่ยวข้องกับคำถามมาให้ครบ
โค้ด: เลือกทั้งหมด
.whitechecker{
top:auto;
left:auto;
margin: 1%;
width: 10%;
height: 10%;
border-radius: 50%;
position: absolute;
border: 4px solid #52188F;
cursor: pointer;
background-color: #9551DB;
}
โค้ด: เลือกทั้งหมด
class = "whitechecker ui-draggable ui-draggable-handle ui-draggable-disabled"
id = "whitechecker box 3 5"
โค้ด: เลือกทั้งหมด
pidele = document.getElementById(piid);
console.log(piid)
pidclass=pidele.className;
console.log(pidclass);
$(pidele).removeClass().addClass(pidclass);
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
- MBMoo
- PHP VIP Members
- โพสต์: 25879
- ลงทะเบียนเมื่อ: 04/06/2020 10:05 am
Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
1. id ไม่ควรเว้นวรรค
2. removeClass() ระบุด้วยจะ remove Class อะไร
3. มี tag html ที่ไม่รู้จักด้วย checkers เอามาจากไหนคะ ขอ ref หน่อยค่ะ
4. ไม่ใช้ปนกันระหว่าง javascript กับ jquery
5. $(pidele) ให้ select โดยใช้ id หรือ classname หรือ html tag เลยค่ะ ไม่ต้องไปหา getElementById แล้วเอามาใส่ใน select
2. removeClass() ระบุด้วยจะ remove Class อะไร
3. มี tag html ที่ไม่รู้จักด้วย checkers เอามาจากไหนคะ ขอ ref หน่อยค่ะ
4. ไม่ใช้ปนกันระหว่าง javascript กับ jquery
5. $(pidele) ให้ select โดยใช้ id หรือ classname หรือ html tag เลยค่ะ ไม่ต้องไปหา getElementById แล้วเอามาใส่ใน select
- ewqolf
- PHP Super Hero Member
- โพสต์: 621
- ลงทะเบียนเมื่อ: 14/11/2022 9:26 am
Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
1. เดี้ยวผมจะลองแก้ไขดูครับbolue เขียน: ↑01/02/2023 9:01 pm 1. id ไม่ควรเว้นวรรค
2. removeClass() ระบุด้วยจะ remove Class อะไร
3. มี tag html ที่ไม่รู้จักด้วย checkers เอามาจากไหนคะ ขอ ref หน่อยค่ะ
4. ไม่ใช้ปนกันระหว่าง javascript กับ jquery
5. $(pidele) ให้ select โดยใช้ id หรือ classname หรือ html tag เลยค่ะ ไม่ต้องไปหา getElementById แล้วเอามาใส่ใน select
2. removeclass() มันลบทั้งหมดเลยอะครับซึ่งผมต้องการให้มันลบให้หมดอะครับ
3. tag html มาจาก
โค้ด: เลือกทั้งหมด
let checker = document.createElement('checkers')
checker.style=`
top:auto;
left:auto;
margin: 1%;
width: 10%;
height: 10%;
border-radius: 50%;
position: absolute;
border: 4px solid #8F8F27;
cursor: pointer;
background-color: #FFFF78;`;
checker.className='whitechecker'
checker.id='whitechecker '+boxH.id
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
- ewqolf
- PHP Super Hero Member
- โพสต์: 621
- ลงทะเบียนเมื่อ: 14/11/2022 9:26 am
Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
ผมได้ทดลองใช้งานตัวของการสร้าง class css ขึ้นมาเป็น class สำหรับการ reset position ครับซึ่งเมื่อผมทำการใส่ class เข้าไปแล้วในจอนั้นตัวหมากนั้นถูก reset จริงครับ แต่ว่าไปดูใน style แล้วตัว position นั้นยังเหมือนเดิมอยู่ครับ
class css ที่กำหนดใน style
ตัว position นั้นถูกย้ายไปอยู่ตรงที่ผมกำหนดไว้จริงๆครับ แต่ว่าใน style นั้นยังเป็นการกำหนดพื้นที่ที่ผมได้ทำการวางเมาส์ครับ ทำให้พอเมื่อผมทำการลบ class reset-position นั้นออกตัว position นั้นก็ถูกนำกลับไปไว้ที่อยู๋ตาม style ครับไม่อยู่ที่กำหนดใน class css จากนั้นผมก็เลยลองใช้วิธีการเอา ตัว class ของตัวหมากนั้นมา กำหนดค่า เป็น
ซึ่งตัว whitechecker นั้นเป็นตัว class ที่ติดตัวมันน้องอยู่แล้วครับแล้วผมได้ลองใช้ดู
เนื่องจากว่าผมใช้วิธีการลากตัวหมาก draggable ไปมาเพื่อเดินครับแต่ว่าพอใช้ class ตัวที่กำหนดไว้ .whitechecker นั้นระหว่างการลากนั้นตัวหมากของเราไม่ตามเมาส์มาด้วยครับมันถูก fix ไว้ที่ อยู่ของมันเลยครับจนผมทำการวางมันจะย้ายไปเพราะว่าผมเขียนให้ตัวหมากนั้นเปลี่ยน parent ครับ
โค้ด: เลือกทั้งหมด
style="top: 321.75px; left: 229.781px; margin: 1%; width: 10%; height: 10%; border-radius: 50%; position: absolute; border: 4px solid rgb(82, 24, 143); cursor: pointer; background-color: rgb(149, 81, 219);"
โค้ด: เลือกทั้งหมด
.reset-position{
top: auto !important;
left: auto !important;
}
โค้ด: เลือกทั้งหมด
.whitechecker{
top:auto !important;
left:auto !important;
}
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
- ewqolf
- PHP Super Hero Member
- โพสต์: 621
- ลงทะเบียนเมื่อ: 14/11/2022 9:26 am
Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ
ผมทราบสาเหตุที่ทำไมตัว element ของผมไม่ใช้ css ที่ผมกำหนดไว้แล้วเรียกผ่าน class เพราะว่าผมใช้วิธีการกำหนด css ของตัว element ตั้งแต่ตอนสร้างให้เป็น element.style ซึ่งจะทำให้พอผมเปลี่ยน class แล้วตัว css ที่ผมกำหนดไว้ตอนเริ่มสร้างนั้นมีความสำคัญมากที่สุดถ้าหากว่าไม่มีการใส่ important เข้าไปตัว css ที่เรียกผ่าน class อันใหม่นั้นจะไม่ถูกแสดงขึ้นมาครับ ซึ่งปัญหานี้จะแก้ได้จากการสร้าง element และไม่กำหนด css ไว้ที่ตัว element แต่ไปกำหนดที่ตัวของ class css ใน style sheet ซึ่งตัว css ก็จะสามารถเปลี่ยนแปลงไปได้ตา class ครับ เพียงแต่ว่าโปรเจ็คหมากฮอสของผมนั้นไม่สามารถทำแบบนั้นได้ครับเนื่องจากว่าผมนั้นใช้โค้ดเดียวกันในการทำระบบทั้งหมด โดยโปรเจ็คของผมนัันจะมีเรื่องของการกลับด้านของกระดานให้ตัวหมากของฝั่งเรานั้นอยู่ด้านล่างเสมอและผมใช้ตัว class เป็น whitechecker เพื่อบอกว่าตัวหมากตัวนี้เป็นของฝั่งเราครับ ซึ่งเมื่อกลับกระดานผมใช้วิธีการกำหนด css ให้แสดงสีออกมาเป็นอีกสีนึง แต่ class นั้นเป็น whitechecker เหมือนกันครับทำให้ผมไม่สามารถกำหนดตัว css ให้เรียกใช้ผ่าน class ได้ครับ ถ้าหากว่าผมแยกชื่อ class ของตัวหมากออกมา โค้ดนั้นจะเพิ่มความยาวเกินไปมากเพราะว่าผมจะต้องเขียนแยกกันระหว่างฝั่งของสีขาว และโค้ดของฝั่ง สีดำ
นี้เป็นโค้ในการกำหนดค่า css ที่ผมทำเอาไว้ครับทำให้ตัวของ element checker ของผมนั้นมี ตัว css ติดตัวอยู่แล้วครับ ซึ่งผมหาทางอื่นนอกจากการใช้งาน javascript ในการเข้าไปแก้ไขตัว css ให้ตรงตามได้ครับ ซึ่งจากในกระทู้บนผมได้ทดลองเอาตัว class แล้วกำหนดด้วย important ไปใช้ในการกำหนด css ถึงในหน้าจอนั้นจะเห็นว่าตัวของ element มันเปลี่ยนไปครั แต่ตัว style ของ element ไม่เปลี่ยนครับพอทำการลบ class ทิ้งก็กลับไปเหมือนเดิมครับ นี้คือโค้ดที่ผมเอาไว้ reset position
โค้ด javascript สำหรับการ add class
ซึ่งผลลัพธืก็เป็นไปตาม quote ด้านล่างครับ
โค้ด: เลือกทั้งหมด
let checker = document.createElement('div')
checker.style=`
top:auto;
left:auto;
margin: 1%;
width: 10%;
height: 10%;
border-radius: 50%;
position: absolute;
border: 4px solid #52188F;
cursor: pointer;
background-color: #9551DB;`;
checker.className='whitechecker'
checker.id='whitechecker_'+boxI.id
boxI.appendChild(checker);
โค้ด: เลือกทั้งหมด
.reset-position{
top: auto !important;
left: auto !important;
}
โค้ด: เลือกทั้งหมด
pidele = document.getElementById(piid);
console.log(piid)
pidclass=pidele.className;
console.log(pidclass);
pidele.classList.add('reset-position');
ewqolf เขียน: ↑02/02/2023 12:14 pm ผมได้ทดลองใช้งานตัวของการสร้าง class css ขึ้นมาเป็น class สำหรับการ reset position ครับซึ่งเมื่อผมทำการใส่ class เข้าไปแล้วในจอนั้นตัวหมากนั้นถูก reset จริงครับ แต่ว่าไปดูใน style แล้วตัว position นั้นยังเหมือนเดิมอยู่ครับ
1675314394115.gifclass css ที่กำหนดใน styleโค้ด: เลือกทั้งหมด
style="top: 321.75px; left: 229.781px; margin: 1%; width: 10%; height: 10%; border-radius: 50%; position: absolute; border: 4px solid rgb(82, 24, 143); cursor: pointer; background-color: rgb(149, 81, 219);"
ตัว position นั้นถูกย้ายไปอยู่ตรงที่ผมกำหนดไว้จริงๆครับ แต่ว่าใน style นั้นยังเป็นการกำหนดพื้นที่ที่ผมได้ทำการวางเมาส์ครับ ทำให้พอเมื่อผมทำการลบ class reset-position นั้นออกตัว position นั้นก็ถูกนำกลับไปไว้ที่อยู๋ตาม style ครับไม่อยู่ที่กำหนดใน class css จากนั้นผมก็เลยลองใช้วิธีการเอา ตัว class ของตัวหมากนั้นมา กำหนดค่า เป็นโค้ด: เลือกทั้งหมด
.reset-position{ top: auto !important; left: auto !important; }
ซึ่งตัว whitechecker นั้นเป็นตัว class ที่ติดตัวมันน้องอยู่แล้วครับแล้วผมได้ลองใช้ดูโค้ด: เลือกทั้งหมด
.whitechecker{ top:auto !important; left:auto !important; }
1675314749824.gif
เนื่องจากว่าผมใช้วิธีการลากตัวหมาก draggable ไปมาเพื่อเดินครับแต่ว่าพอใช้ class ตัวที่กำหนดไว้ .whitechecker นั้นระหว่างการลากนั้นตัวหมากของเราไม่ตามเมาส์มาด้วยครับมันถูก fix ไว้ที่ อยู่ของมันเลยครับจนผมทำการวางมันจะย้ายไปเพราะว่าผมเขียนให้ตัวหมากนั้นเปลี่ยน parent ครับ
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ มารู้จักกับ Procedural Style และแบบ OOP Style กันเถอะ!
โดย putcharaporn_tan » 06/08/2015 1:36 pm » ใน PHP Knowledge - 0 ตอบกลับ
- 2317 แสดง
-
โพสต์ล่าสุด โดย putcharaporn_tan
06/08/2015 1:36 pm
-
-
-
โพสต์ใหม่ css ใส่เงาให้กรอบรูปภาพ พื้นหลังของภาพ style
โดย M034 » 05/04/2016 3:32 pm » ใน CSS Knowledge - 0 ตอบกลับ
- 3386 แสดง
-
โพสต์ล่าสุด โดย M034
05/04/2016 3:32 pm
-
-
-
โพสต์ใหม่ MEMPHIS STYLE กราฟิกที่เรียบง่ายช่วยให้งานโดดเด่น
โดย noppadonsk » 04/12/2019 3:58 pm » ใน Graphic design - 0 ตอบกลับ
- 2138 แสดง
-
โพสต์ล่าสุด โดย noppadonsk
04/12/2019 3:58 pm
-
-
- 8 ตอบกลับ
- 1932 แสดง
-
โพสต์ล่าสุด โดย ewqolf
01/02/2023 4:14 pm
-
-
โพสต์ใหม่ ปัญหาการเปลี่ยนชือ style ใน phpBB เปลี่ยนไม่ได้
โดย pnut » 10/10/2016 11:43 pm » ใน Programming - PHP - 2 ตอบกลับ
- 499 แสดง
-
โพสต์ล่าสุด โดย pnut
11/10/2016 12:11 am
-
-
- 0 ตอบกลับ
- 2117 แสดง
-
โพสต์ล่าสุด โดย abdkode
10/01/2019 7:11 pm
-
-
โพสต์ใหม่ การเขียน Style ของ php ในแบบ Joomla
โดย Patipat » 05/08/2019 5:34 pm » ใน Joomla Developing Knowledge - 0 ตอบกลับ
- 1100 แสดง
-
โพสต์ล่าสุด โดย Patipat
05/08/2019 5:34 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 86