มันง่ายที่จะแก้ไขรูปแบบองค์ประกอบ แต่ค่อนข้างยุ่งยากในการอ่านค่า
JavaScript ไม่สามารถอ่านคุณสมบัติสไตล์อิลิเมนต์ใด ๆ (elem.style) ที่มาจาก css (ภายใน / ภายนอก) เว้นแต่คุณจะใช้การเรียกเมธอดในตัว getComputedStyle ใน javascript
getComputedStyle (องค์ประกอบ [หลอก])
องค์ประกอบ:องค์ประกอบที่จะอ่านค่าสำหรับ
หลอก:องค์ประกอบหลอกหากจำเป็นเช่น :: ก่อน สตริงว่างหรือไม่มีอาร์กิวเมนต์หมายถึงองค์ประกอบเอง
ผลที่ได้คือวัตถุที่มีคุณสมบัติสไตล์เช่น elem.style แต่ตอนนี้เกี่ยวกับการเรียน CSS ทั้งหมด
ตัวอย่างเช่นสไตล์ที่นี่ไม่เห็นระยะขอบ:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
ดังนั้นปรับเปลี่ยนรหัสจาวาสคริปต์ของคุณเพื่อรวม getComputedStyle ขององค์ประกอบที่คุณต้องการรับความกว้าง / ความสูงหรือคุณลักษณะอื่น ๆ
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
คำนวณและแก้ไขค่า
มีสองแนวคิดใน CSS:
ค่าลักษณะที่คำนวณได้คือค่าหลังจากใช้กฎ CSS ทั้งหมดและการสืบทอด CSS เป็นผลมาจากการเรียงซ้อน CSS มันดูเหมือนความสูง: 1em หรือขนาดตัวอักษร: 125%
ค่าสไตล์ที่ได้รับการแก้ไขคือค่าสุดท้ายที่ใช้กับองค์ประกอบ ค่าเช่น 1em หรือ 125% สัมพันธ์กัน เบราว์เซอร์ใช้ค่าที่คำนวณและทำให้ทุกหน่วยคงที่และแน่นอนเช่น: height: 20px หรือ font-size: 16px สำหรับคุณสมบัติทางเรขาคณิตที่ได้รับการแก้ไขอาจมีจุดลอยตัวเช่นความกว้าง: 50.5px
เมื่อนานมาแล้ว getComputedStyle ถูกสร้างขึ้นเพื่อรับค่าจากการคำนวณ แต่กลับกลายเป็นว่าค่าที่ได้รับการแก้ไขนั้นสะดวกกว่าและมาตรฐานเปลี่ยนไป
ดังนั้นทุกวันนี้ getComputedStyle จึงส่งกลับค่าที่แก้ไขแล้วของคุณสมบัติ
โปรดทราบ:
getComputedStyle ต้องการชื่อคุณสมบัติแบบเต็ม
คุณควรขอคุณสมบัติที่แน่นอนที่คุณต้องการเช่น paddingLeft หรือความสูงหรือความกว้างเสมอ มิฉะนั้นจะไม่รับประกันผลลัพธ์ที่ถูกต้อง
ตัวอย่างเช่นหากมีคุณสมบัติ paddingLeft / paddingTop แล้วเราควรได้รับ getComputedStyle (elem) .padding อย่างไร ไม่มีอะไรหรืออาจจะเป็น "สร้าง" คุณค่าจากการรู้จัก paddings? ไม่มีกฎมาตรฐานที่นี่
มีความไม่สอดคล้องกันอื่น ๆ ตัวอย่างเช่นเบราว์เซอร์บางตัว (Chrome) แสดง 10px ในเอกสารด้านล่างและเบราว์เซอร์บางตัว (Firefox) - อย่า:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
สำหรับข้อมูลเพิ่มเติมhttps://javascript.info/styles-and-classes