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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

by Ittichai_chupol » 28/11/2019 6:22 pm

สำหรับการที่จะทำให้เว็บไซต์มีความสวยงาน จะต้องขึ้นอยู่กับความเหมาะสมกับการทำงานของเว็บไซค์นั้นว่าเป็นเว็บไซต์เกี่ยวกับอะไร โดยการพัฒนาเว็บไซต์หรือระบบนั้นสิ่งที่จำเป้นเลยก็คือความรู้และทักษะในการใช้งานภาษาคอมพิวเตอร์ต่างๆ ทั้ง 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 321 times
บทความที่เกี่ยวข้อง

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

Top