Page 1 of 1

วิธีการ ปรับเปลี่ยน class ของ css ด้วย Javascript เพื่อว่าสะดวกต่อการเปลี่ยนค่า css หลายค่าพร้อมกัน

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

1 ตัวอย่างโคดส่วน html โดยจะเป็นส่วนทีจะแสดงผลลัพธ์ลัพธืให้ผู้ใช้งานได้เห็น โดยส่วนที่จะปรับเปลี่ยนก็คือ ส่วนของ textbox

Code: Select all

<body>
<center>
        <h3>Border black</h3>

        <div>
            <label for="fname"></label>
            <input type="text" id="fname" name="firstname"                 placeholder="Your name..">
            <input type="submit" id="btn_test" value="Submit">
        </div>
</center>
    </body>
2.ตัวอย่างโคด css ใช้สำหรับตกแต่ง โดย ในส่ววนี้เราจะใช้ คลาส main มาเป็นตัวใช้สำหรับเปลี่ยนค่า textbox

Code: Select all


    <style>
        .main {
            font-size: 120%;
            color: blue;
            border: 2px solid blue;
        }
        input[type=submit] {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border-radius: 4px;
            border: 2px solid ;
        }
        input[type=submit]:hover {
            background-color: #45a049;
        }

        div {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
            width: 200px;
        }
    </style>
    
3.ตัวอย่างโคด JQuery โดยจะนำมาว่างไว้ในส่วนล่างของ html

Code: Select all

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  //เรียกใช้งาน library javascript
    <script>
        $(document).ready(function () {
            $("#btn_test").click(function () { //ตรวจสอบว่า มีการกดปุ่มที่มี id ชื่อว่า  btn_test หรือไม
                $("#fname").toggleClass("main");  //เรียกค่ามาจาก css จาก Class ชื่อว่า main
                $("h3").html("Border blue");  //เปลี่ยนชื่อ
            });
        });
    </script>
ผลลัพธ์ที่ได้
ezgif.com-video-to-gif (6).gif
ezgif.com-video-to-gif (6).gif (16.25 KiB) Viewed 320 times
บทความที่เกี่ยวข้อง

วิธีการการใช้ jquery เข้ามาปรับแก้ไขการแสดงของรูปภาพ เพื่อขยายและขยับตำแหน่ง ของ รูปภาพ
วิธีการนำค่าจาก attribute ที่อยู่ใน element หนึ่ง ไปใส่ให้กับ attribute ที่อยู่ในอีก element หนึ่ง
การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox