วิธีการกำหนด css ให้กับ คลาสแบบ !important โดยใช้งาน JQuery

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ittichai_chupol
PHP VIP Members
PHP VIP Members
โพสต์: 5410
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

วิธีการกำหนด css ให้กับ คลาสแบบ !important โดยใช้งาน JQuery

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

สำหรับการที่จะทำให้เว็บไซต์มีความสวยงาน จะต้องขึ้นอยู่กับความเหมาะสมกับการทำงานของเว็บไซค์นั้นว่าเป็นเว็บไซต์เกี่ยวกับอะไร โดยการพัฒนาเว็บไซต์หรือระบบนั้นสิ่งที่จำเป้นเลยก็คือความรู้และทักษะในการใช้งานภาษาคอมพิวเตอร์ต่างๆ ทั้ง HTML PHP JAVASCRIPT มาร่วมกันทำงานเพื่อให้เว็บไซต์ที่พัฒนาขึ้นมาตอบสนองความต้องการของผู้ใช้งานได้อย่างมีประสิทธิภาพ
ซึงทั้งนี้ถ้าหากต้องการปรับผลลัพธ์การแสดงรูปแบบของ css ในบางกรณี ก็อาจจะต้องใช้งาน javascript เข้ามาช่วยดัวอย่างนี้ การเพิ่ม หรือปรับเปลี่ยนค่า css โดย ใช้งาน javascript ซึ่ง โดยทั้งไปอาจจะเป๋นการเปลี่ยนเพียงแค่ ค่าบางตัว แต่ถ้าหากต้องการปรับค่าใหม่หลายๆค่า และ หลายๆตำแหน่งนั้น บางครั่งเราอาจจะสร้าง css ไว้ แล้วค่อยเรียกใช้งาน โดยใช้แค่ชื่อ class หรือ id เท่านั้น เพื่อจะลดจำนวนโคดลงมา โดยวิธีการก็มีดังนี้

จากตัวอย่างจะเป็นการทำงานร่วมกัยนระหว่าง Javascript กับ jquery มาทำงานปรับเปลีี่ยนตำแหน่งของ คลาส โดยใช้ ฟังชั่น และ id มาเป็นต้องเชือมหา
ซึ่งจะเป็นการทำงานโดยที่จะเปลี่ยนตำแหน่งโดย เดิมที่จะอยู่ด้านซ้าย แต่เมือมีการเลือกข้อมูล แล้ว จะย้ายมาที่ตำแหน่งกลาง


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


 <select id="forum" name="mark_forum" class="mark_forum_box" onchange="otherdetail2()">
   <option value="0" selected="selected">{L_ALL_FORUMS_PAPID}</option>
                {S_FORUM_OPTIONS}
</select>  


โดยจะใช้งานฟังชั่น javascript ที่ชื่อว่า

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

otherdetail2()
เป็นตัวใช้งาน

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


function otherdetail2(e) {
    document.getElementById('otherdetail2').style.display = 'block';
    jQuery('.rapid_box').attr('style', 'float: none !important');
}


ผลลัพธ์ที่ได้
ezgif.com-video-to-gif (14).gif
ezgif.com-video-to-gif (14).gif (58.01 KiB) Viewed 2045 times
บทความที่เกี่ยวข้อง

การใช้ .attr() jquery เพื่อดึงค่าจาก attribute ของ element หรือกำหนดค่าให้กับ attribute]
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก
วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript
[url=viewtopic.php?f=73&t=59322]วิธีการทำเมนู dropdows แบบไม่มีพื้นหลัง[/url
ขอให้วันนี้เป็นวันที่ดี
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41131
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: วิธีการกำหนด css ให้กับ คลาสแบบ !important โดยใช้งาน JQuery

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

ใส่ url ผิดวิธี
ติดตาม 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
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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