ซึงทั้งนี้ถ้าหากต้องการปรับผลลัพธ์การแสดงรูปแบบของ css ในอุปกรณืที่มีมีขนาดไม่เปลี่ยนแปลง ก็สามารถที่จะทำได้เช่นกัน แต่จะต้องใ้ช้ javascript เข้ามาช่วยดัวอย่างนี้ การเพิ่ม css โดย ใช้งาน javascript ซึ่ง โดยทั้งไปอาจจะเป๋นการเปลี่ยนเพียงแค่ ค่าบางตัว แต่ถ้าหากต้องการปรับค่าใหม่หลายๆค่า และ หลายๆตำแหน่งนั้น บางครั่งเราอาจจะสร้าง css ไว้ แล้วค่อยเรียกใช้งาน โดยใช้แค่ชื่อ class หรือ id เท่านั้น เพื่อจะลดจำนวนโคดลงมา โดยวิธีการก็มีดังนี้
1 ตัวอย่างโคดส่วน html โดยจะเป็นส่วนทีจะแสดงผลลัพธ์ลัพธืให้ผู้ใช้งานได้เห็น โดยส่วนที่จะปรับเปลี่ยนก็คือ ส่วนของ textbox
โค้ด: เลือกทั้งหมด
<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>
โค้ด: เลือกทั้งหมด
<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>
โค้ด: เลือกทั้งหมด
<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>
บทความที่เกี่ยวข้อง
วิธีการการใช้ jquery เข้ามาปรับแก้ไขการแสดงของรูปภาพ เพื่อขยายและขยับตำแหน่ง ของ รูปภาพ
วิธีการนำค่าจาก attribute ที่อยู่ใน element หนึ่ง ไปใส่ให้กับ attribute ที่อยู่ในอีก element หนึ่ง
การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox