สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ตำแหน่งช่องควรกำหนดด้วย 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
ภาพประจำตัวสมาชิก
ewqolf
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

โพสต์ที่ยังไม่ได้อ่าน โดย ewqolf »

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
ผมทดลองลบ class และ add class ใหม่เข้าไปแล้วแต่ตัว style css นั้นไม่ได้เข้าไปที่ element ครับ
image_2023-01-26_132220686.png
image_2023-01-26_132220686.png (2.73 KiB) Viewed 1338 times
image_2023-01-26_131855024.png
image_2023-01-26_131855024.png (4.02 KiB) Viewed 1338 times
image_2023-01-26_131929641.png
image_2023-01-26_131929641.png (4.3 KiB) Viewed 1338 times
image_2023-01-26_132138542.png
image_2023-01-26_132138542.png (2.48 KiB) Viewed 1338 times
image_2023-01-26_132303563.png
image_2023-01-26_132303563.png (2.25 KiB) Viewed 1338 times
ผมได้ลองวิธีการทั้งหมดนี้ซึ่งก็เป็นของพี่ไปแล้วแต่ว่าตัว css นั้นไม่ถูก reset ตามที่กำหนดใน css ครับซึ่งผมได้ทำการเช็คแล้วว่าชื่อ class นั้นตรงอย่างแน่นอนครับ
1674714275565.gif
1674714275565.gif (32.9 KiB) Viewed 1337 times
แนบไฟล์
image_2023-01-26_132449069.png
image_2023-01-26_132449069.png (2.25 KiB) Viewed 1337 times
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ลงโค้ดในคำถาม ควรลงเป็นข้อความ เพื่อความสามารถของคนที่จะช่วยเอาโค้ดไม่ลองเช็คปัญหา
และการตัดโค้ดมาลงควรลงที่เกี่ยวข้องกับคำถามมาให้ครบ

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
ภาพประจำตัวสมาชิก
ewqolf
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

โพสต์ที่ยังไม่ได้อ่าน โดย ewqolf »

mindphp เขียน: 27/01/2023 12:06 am ลงโค้ดในคำถาม ควรลงเป็นข้อความ เพื่อความสามารถของคนที่จะช่วยเอาโค้ดไม่ลองเช็คปัญหา
และการตัดโค้ดมาลงควรลงที่เกี่ยวข้องกับคำถามมาให้ครบ

selector ไม่ได้เรียกมาจาก jQuery
และ
ในโค้ดที่ยกมา ดูไม่ออกมามี class อะไรอยู่ ถ้าจะ remove ด้วย method นั้นดูให้ชัวร์ก่อนว่า selector ที่เลือก element มามีอะไรอยู่ในนั้น
ทำความเข้าใน object ก้อนที่เลือกมาก่อนครับ ว่ามีองค์ประกอบอะไรบ้าง
เช็คดูแล้วครับว่ามีข้อมูลซึ่งผมใช้ตัว selector ออกมาแล้วใช้ jquery มันก็ทำงานได้ครับและผมลองทำแยกเป็นขั้นตอนๆแล้วก็มีการลบชื่อ class และ ใส่ชื่อ class ใหม่ไปจริงๆครับ แต่ว่าตัว style ก็ยังไม่เปลี่ยนครับผม
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

จาก 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
ภาพประจำตัวสมาชิก
ewqolf
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

โพสต์ที่ยังไม่ได้อ่าน โดย ewqolf »

mindphp เขียน: 27/01/2023 10:13 pm จาก Code ตัวอย่าง
ในโค้ดที่ยกมา ดูไม่ออกมามี class อะไรอยู่ ถ้าจะ remove ด้วย method นั้นดูให้ชัวร์ก่อนว่า selector ที่เลือก element มามีอะไรอยู่ในนั้น
ลงโค้ดในคำถาม ควรลงเป็นข้อความ เพื่อความสามารถของคนที่จะช่วยเอาโค้ดไม่ลองเช็คปัญหา
และการตัดโค้ดมาลงควรลงที่เกี่ยวข้องกับคำถามมาให้ครบ
ช่วยลงโค้ด ของ html, css class, และ JQuery ที่เข้าไปเปลี่ยน class มัน แล้วไม่เปลี่ยนมาดูหน่อยครับ
โค้ดใน css

โค้ด: เลือกทั้งหมด

.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;
}
HTML ชื่อ class และ ID

โค้ด: เลือกทั้งหมด

class = "whitechecker ui-draggable ui-draggable-handle ui-draggable-disabled"
id = "whitechecker box 3 5"
image_2023-01-30_091311845.png
image_2023-01-30_091311845.png (11.09 KiB) Viewed 1172 times
javascript/jquery

โค้ด: เลือกทั้งหมด

pidele = document.getElementById(piid);
console.log(piid)
pidclass=pidele.className;
console.log(pidclass);
$(pidele).removeClass().addClass(pidclass);
ผลลัพธ์ในการ Log ค่า class และ ID
image_2023-01-30_091210352.png
image_2023-01-30_091210352.png (3.64 KiB) Viewed 1172 times
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
ภาพประจำตัวสมาชิก
MBMoo
PHP VIP Members
PHP VIP Members
โพสต์: 25602
ลงทะเบียนเมื่อ: 04/06/2020 10:05 am

Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

โพสต์ที่ยังไม่ได้อ่าน โดย MBMoo »

1. id ไม่ควรเว้นวรรค
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
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

โพสต์ที่ยังไม่ได้อ่าน โดย ewqolf »

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
1. เดี้ยวผมจะลองแก้ไขดูครับ
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
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

โพสต์ที่ยังไม่ได้อ่าน โดย ewqolf »

ผมได้ทดลองใช้งานตัวของการสร้าง class css ขึ้นมาเป็น class สำหรับการ reset position ครับซึ่งเมื่อผมทำการใส่ class เข้าไปแล้วในจอนั้นตัวหมากนั้นถูก reset จริงครับ แต่ว่าไปดูใน style แล้วตัว position นั้นยังเหมือนเดิมอยู่ครับ
1675314394115.gif
1675314394115.gif (17 KiB) Viewed 1021 times

โค้ด: เลือกทั้งหมด

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);"
class css ที่กำหนดใน style

โค้ด: เลือกทั้งหมด

.reset-position{
	top: auto !important;
	left: auto !important;
}
ตัว position นั้นถูกย้ายไปอยู่ตรงที่ผมกำหนดไว้จริงๆครับ แต่ว่าใน style นั้นยังเป็นการกำหนดพื้นที่ที่ผมได้ทำการวางเมาส์ครับ ทำให้พอเมื่อผมทำการลบ class reset-position นั้นออกตัว position นั้นก็ถูกนำกลับไปไว้ที่อยู๋ตาม style ครับไม่อยู่ที่กำหนดใน class css จากนั้นผมก็เลยลองใช้วิธีการเอา ตัว class ของตัวหมากนั้นมา กำหนดค่า เป็น

โค้ด: เลือกทั้งหมด

.whitechecker{
	top:auto !important;
	left:auto !important;
}
ซึ่งตัว whitechecker นั้นเป็นตัว class ที่ติดตัวมันน้องอยู่แล้วครับแล้วผมได้ลองใช้ดู
1675314749824.gif
1675314749824.gif (30.99 KiB) Viewed 1021 times
เนื่องจากว่าผมใช้วิธีการลากตัวหมาก draggable ไปมาเพื่อเดินครับแต่ว่าพอใช้ class ตัวที่กำหนดไว้ .whitechecker นั้นระหว่างการลากนั้นตัวหมากของเราไม่ตามเมาส์มาด้วยครับมันถูก fix ไว้ที่ อยู่ของมันเลยครับจนผมทำการวางมันจะย้ายไปเพราะว่าผมเขียนให้ตัวหมากนั้นเปลี่ยน parent ครับ
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
ภาพประจำตัวสมาชิก
ewqolf
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

Re: สอบถามเรื่องการเอา style จาก style มาใส่ใน element หลายรอบครับ

โพสต์ที่ยังไม่ได้อ่าน โดย ewqolf »

ผมทราบสาเหตุที่ทำไมตัว 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 ของตัวหมากออกมา โค้ดนั้นจะเพิ่มความยาวเกินไปมากเพราะว่าผมจะต้องเขียนแยกกันระหว่างฝั่งของสีขาว และโค้ดของฝั่ง สีดำ

โค้ด: เลือกทั้งหมด

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);
นี้เป็นโค้ในการกำหนดค่า css ที่ผมทำเอาไว้ครับทำให้ตัวของ element checker ของผมนั้นมี ตัว css ติดตัวอยู่แล้วครับ ซึ่งผมหาทางอื่นนอกจากการใช้งาน javascript ในการเข้าไปแก้ไขตัว css ให้ตรงตามได้ครับ ซึ่งจากในกระทู้บนผมได้ทดลองเอาตัว class แล้วกำหนดด้วย important ไปใช้ในการกำหนด css ถึงในหน้าจอนั้นจะเห็นว่าตัวของ element มันเปลี่ยนไปครั แต่ตัว style ของ element ไม่เปลี่ยนครับพอทำการลบ class ทิ้งก็กลับไปเหมือนเดิมครับ นี้คือโค้ดที่ผมเอาไว้ reset position

โค้ด: เลือกทั้งหมด

.reset-position{
	top: auto !important;
	left: auto !important;
}
โค้ด javascript สำหรับการ add class

โค้ด: เลือกทั้งหมด

pidele = document.getElementById(piid);
console.log(piid)
pidclass=pidele.className;
console.log(pidclass);
pidele.classList.add('reset-position');
ซึ่งผลลัพธืก็เป็นไปตาม quote ด้านล่างครับ
ewqolf เขียน: 02/02/2023 12:14 pm ผมได้ทดลองใช้งานตัวของการสร้าง class css ขึ้นมาเป็น class สำหรับการ reset position ครับซึ่งเมื่อผมทำการใส่ class เข้าไปแล้วในจอนั้นตัวหมากนั้นถูก reset จริงครับ แต่ว่าไปดูใน style แล้วตัว position นั้นยังเหมือนเดิมอยู่ครับ
1675314394115.gif

โค้ด: เลือกทั้งหมด

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);"
class css ที่กำหนดใน style

โค้ด: เลือกทั้งหมด

.reset-position{
	top: auto !important;
	left: auto !important;
}
ตัว position นั้นถูกย้ายไปอยู่ตรงที่ผมกำหนดไว้จริงๆครับ แต่ว่าใน style นั้นยังเป็นการกำหนดพื้นที่ที่ผมได้ทำการวางเมาส์ครับ ทำให้พอเมื่อผมทำการลบ class reset-position นั้นออกตัว position นั้นก็ถูกนำกลับไปไว้ที่อยู๋ตาม style ครับไม่อยู่ที่กำหนดใน class css จากนั้นผมก็เลยลองใช้วิธีการเอา ตัว class ของตัวหมากนั้นมา กำหนดค่า เป็น

โค้ด: เลือกทั้งหมด

.whitechecker{
	top:auto !important;
	left:auto !important;
}
ซึ่งตัว whitechecker นั้นเป็นตัว class ที่ติดตัวมันน้องอยู่แล้วครับแล้วผมได้ลองใช้ดู
1675314749824.gif
เนื่องจากว่าผมใช้วิธีการลากตัวหมาก draggable ไปมาเพื่อเดินครับแต่ว่าพอใช้ class ตัวที่กำหนดไว้ .whitechecker นั้นระหว่างการลากนั้นตัวหมากของเราไม่ตามเมาส์มาด้วยครับมันถูก fix ไว้ที่ อยู่ของมันเลยครับจนผมทำการวางมันจะย้ายไปเพราะว่าผมเขียนให้ตัวหมากนั้นเปลี่ยน parent ครับ
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 71