วิธีการเพิ่ม css ให้กับ class โดยใช้ js

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: วิธีการเพิ่ม css ให้กับ class โดยใช้ js

วิธีการเพิ่ม css ให้กับ class โดยใช้ js

โดย Ittichai_chupol » 13/11/2019 6:41 pm

การที่จะทำให้เว็บไซต์ของเรานั้นมีความสวยก็จำเป็นต้องใช้ css มาเป็นตัวช่วยสำหรับการปรับแต่ง สงเสริมความสวยงามเพื่อให้ตความรู้สึกที่อยากจะใช้งานแก่ผู้ที่เข้ามาใช้งานด้วย ซึ่งโดยปกติเราจะเขียน css ขึ้นมาใช้งานได้เลย และจะจะทำการปรับแก่ไข หรือ เพิ่มลูกเล่น เฉพาะกรณี ให้ css เข้าไปไม่ได้เว้นแต่จะมีแค่การทำเป็น responsive เท่านั้น ที่จะสามารถปรับ เพิ่ม css ในกรณีของ อุปกรณ๊ที่มีอัตราส่วนของการแสดงผลที่แตกต่าง
ในการปรับแก้ไขผลลัพธ์รูปแบบของ css นั้น จะผูกกับ class id และ element โดยจะชื่อของ class id และ element มาเป็นตัวช่วยระบุตำแหน่งเพื่อปรับเปลี่ยน
แต่ส่วนใหญ่ก็ทำได้แค่ในกณีที่อุปกรณ์ต่างขนาดเท่านั้น

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

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

$('.submita').click(function(){  //สร้างฟั่งชั้น js โดยจะทำงานเมื่อมีการ คลิกที่ปุ่ม ที่ class ชื่อว่า submita
var blockid = $('#blockid').val();  //สร้างตัวเพื่อเก็บค่า ของ id ชื่อว่า blockid ที่อยู่ element 
 $('#'+blockid+' #shw_nameply').css("display", "none");  // เพิ่ม css display : none ให้กับ element ที่มี id ชื่อว่า shw_nameply โดยอยู่ภายใต้ class ที่มี id blockid 
}
                });
บทเรียน css เพิ่มเติม
https://www.mindphp.com/%E0%B8%9A%E0%B8 ... 9-css.html

ข้างบน