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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 5410
Joined: 19/09/2018 10:33 am

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

Post by Ittichai_chupol »

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

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


Code: Select all


 <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 ที่ชื่อว่า

Code: Select all

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

Code: Select all


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 529 times
บทความที่เกี่ยวข้อง

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

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 24743
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by 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

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests