มีสี่วิธีในการใช้ CSS เพื่อควบคุมเพจ ได้แก่ สไตล์อินไลน์ (สไตล์อินไลน์) สไตล์อินไลน์ สไตล์ลิงก์ และสไตล์ที่นำเข้า
สไตล์อินไลน์ (สไตล์อินไลน์) ถูกเขียนในแอตทริบิวต์ style ในแท็ก html เช่น <div></div>
สไตล์อินไลน์เขียนไว้ในแท็กสไตล์ เช่น <style type="text/css">div{width:100px; height:100px}</style>
ประเภทของลิงค์คือการใช้แท็กลิงค์เพื่อแนะนำไฟล์ css เช่น <link href="test.css" type="text/css" rel="stylesheet" />
วิธีการนำเข้าคือการใช้การนำเข้าเพื่อแนะนำไฟล์ css เช่น @import url("test.css")
หากคุณต้องการใช้ JavaScript เพื่อรับข้อมูลสไตล์ขององค์ประกอบ สิ่งแรกที่นึกถึงควรเป็นแอตทริบิวต์สไตล์ขององค์ประกอบ อย่างไรก็ตาม คุณลักษณะ style ขององค์ประกอบแสดงถึงสไตล์อินไลน์ขององค์ประกอบเท่านั้น หากส่วนหนึ่งของข้อมูลสไตล์ขององค์ประกอบถูกเขียนในรูปแบบอินไลน์และบางส่วนถูกเขียนในไฟล์ CSS ภายนอก ข้อมูลสไตล์ที่สมบูรณ์ขององค์ประกอบจะไม่สามารถ ได้รับผ่านแอตทริบิวต์ style ดังนั้น คุณจึงจำเป็นต้องใช้สไตล์จากการคำนวณขององค์ประกอบเพื่อรับข้อมูลสไตล์ขององค์ประกอบ
ใช้เมธอด getComputedStyle ของออบเจ็กต์หน้าต่างเพื่อรับสไตล์จากการคำนวณขององค์ประกอบ วิธีนี้มี 2 พารามิเตอร์ พารามิเตอร์แรกคือองค์ประกอบที่จะรับสไตล์จากการคำนวณ พารามิเตอร์ตัวที่สองอาจเป็นค่าว่าง สตริงว่าง หรือหลอก คลาส (เช่น: before,:after) จำเป็นต้องมีทั้งสองพารามิเตอร์
ลองยกตัวอย่าง
<style type="text/css">
#testDiv{
เส้นขอบ: 1px สีแดงทึบ;
ความกว้าง: 100px;
ความสูง: 100px;
สี: สีแดง;
-
</สไตล์>
<div id="testDiv"></div>
var testDiv = document.getElementById("testDiv");
var computedStyle = window.getComputedStyle(testDiv, "");
ความกว้าง var = computedStyle.width; //100px
var height = computedStyle.height; //100px
var color = computedStyle.color; //rgb(255, 0, 0)
[/รหัส]
หมายเหตุ: คุณลักษณะสีที่ได้รับทั้งหมดจะถูกส่งกลับในรูปแบบ rgb(#,#,#)
ในขณะนี้ หากคุณใช้ testDiv.style เพื่อรับข้อมูลสไตล์ testDiv.style.width จะว่างเปล่าอย่างแน่นอน
เมธอด getComputedStyle ไม่ได้ถูกนำมาใช้ใน IE8 และเวอร์ชันก่อนหน้า แต่แต่ละองค์ประกอบใน IE มีคุณสมบัติ currentStyle ของตัวเอง
มาดูเรื่องทั่วไปกันดีกว่า
คัดลอกรหัสรหัสดังต่อไปนี้:
var testDiv = document.getElementById("testDiv");
var styleInfo = window.getComputedStyle ? window.getComputedStyle(testDiv, "") : testDiv.currentStyle;
ความกว้าง var = styleInfo.width; //100px;
ความสูง var = styleInfo.height;
var color = styleInfo.color; // rgb (255, 0, 0)
สุดท้ายนี้ โปรดทราบว่าสไตล์ที่คำนวณได้ขององค์ประกอบเป็นแบบอ่านอย่างเดียว หากคุณต้องการกำหนดสไตล์ขององค์ประกอบ คุณต้องใช้แอตทริบิวต์ style ขององค์ประกอบ (นี่คือจุดประสงค์ที่แท้จริงของแอตทริบิวต์ style ขององค์ประกอบ) .