รหัสพื้นฐาน:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เอกสาร </title> <style> div {color: yellow; } </style> </head> <body> <div> นี่คือ div </div> </body> </html>1. รับมันโดยใช้ Element.style attribute
<script> var div = document.getElementsByTagname ("div") [0]; console.log (div.style.color); // "" console.log (div.style.backgroundcolor); // สีแดง </script>แอตทริบิวต์ element.style สามารถรับสไตล์อินไลน์ไม่สามารถรับสไตล์ในแท็ก <style> และไม่สามารถรับสไตล์ภายนอกได้
เนื่องจาก Element.style เป็นคุณลักษณะขององค์ประกอบเราจึงสามารถกำหนดแอตทริบิวต์ใหม่เพื่อแทนที่การแสดงผลขององค์ประกอบ
<script> var div = document.getElementsByTagname ("div") [0]; div.style ['พื้นหลังสี'] = "สีเขียว"; console.log (div.style.backgroundcolor); // กรีน </script>2. รับสไตล์ผ่าน getComputedStyle และ currentstyle
สภาพแวดล้อมการใช้งานของ GetComputedStyle คือ Chrome/Safari/Firefox IE 9,10,11
<script> var div = document.getElementsByTagname ("div") [0]; var styleobj = window.getComputedStyle (div, null); console.log (styleobj.backgroundcolor); // red console.log (styleobj.color); // สีเหลือง </script>CurrentStyle สามารถรองรับได้อย่างสมบูรณ์แบบใน IE, Chrome ไม่รองรับ FF ไม่รองรับ
<script> var div = document.getElementsByTagname ("div") [0]; var styleobj = div.currentstyle; console.log (styleobj.backgroundcolor); // red console.log (styleobj.color); // สีเหลือง </script>3. ความแตกต่างระหว่าง Ele.Style และ GetComputedStyle หรือ CurrentStyle
3.1ele.style เป็นการอ่าน-เขียนในขณะที่ getComputedStyle และ currentstyle เป็นแบบอ่านอย่างเดียว
3.2 Ele.style สามารถรับสไตล์ CSS ได้ในคุณสมบัติสไตล์ในบรรทัดเท่านั้นและ GetComputedStyle และ CurrentStyle ยังสามารถรับค่าเริ่มต้นอื่น ๆ ได้
3.3 สิ่งที่ Ele.style ได้รับสไตล์ในแอตทริบิวต์สไตล์ไม่จำเป็นต้องเป็นสไตล์สุดท้ายในขณะที่อีกสองคนได้รับสไตล์ CSS สุดท้ายขององค์ประกอบ
4. รับการเขียนเข้ากันได้สไตล์
<script> // รับสไตล์ที่ไม่ใช่บรรทัด (สไตล์ในแท็กสไตล์หรือสไตล์ในไฟล์ลิงค์ css), obj คือองค์ประกอบ, attr คือฟังก์ชั่นชื่อสไตล์ getstyle (obj, attr) {// สำหรับเช่น (obj.currentstyle) {return obj.currentstyle // เนื่องจาก Attt ที่ส่งผ่านโดยฟังก์ชั่นเป็นสตริงคุณต้องใช้ [] เพื่อรับค่า} else {// สำหรับ non-ie window.getComputedStyle (obj, false) [attr]; }} /* รับหรือตั้งค่าแอตทริบิวต์ CSS* / ฟังก์ชัน css (obj, attr, value) {ถ้า (arguments.length == 2) {return getStyle (obj, attr); } else {obj.style [attr] = value; }} </script>5. window.getComputedstyle (ele [, pseudoelt]);
หากพารามิเตอร์ที่สองเป็นโมฆะหรือละเว้นให้รับวัตถุ cssstyledeclaration ที่เป็น ele
ถ้าเป็นระดับเทียมจะได้รับวัตถุ CSSSTYLEDECLARATION ของระดับหลอก
<style> div {width: 200px; ความสูง: 200px; พื้นหลังสี:#fc9; ขนาดตัวอักษร: 20px; TEXT-ALIGN: CENTER; } div: หลังจาก {เนื้อหา: "นี่คือหลังจาก"; แสดง: บล็อก; ความกว้าง: 100px; ความสูง: 100px; พื้นหลังสี:#F93; มาร์จิ้น: 0 อัตโนมัติ; ระดับความสูง: 50px; } </style> <body> <div id = 'mydiv'> นี่คือ div </div> <อินพุต id = 'btn' type = "ปุ่ม" value = 'getStyle'/> <script> var btn = document.QuerySelector ('#btn'); btn.onclick = function () {var div = document.QuerySelector ('#mydiv'); var styleobj = window.getComputedStyle (div, 'After'); console.log (styleobj ['width']); } </script> </body>6. GetPropertyValue ได้รับค่าคุณสมบัติที่ระบุในวัตถุ cssstyledeclaration
<script> var div = document.getElementsByTagname ("div") [0]; var styleobj = window.getComputedStyle (div, null); console.log (styleobj.getPropertyValue ("พื้นหลังสี")); </script>PropertyName ใน GetPropertyValue (PropertyName); ไม่สามารถแสดงออกอูฐได้
obj.currentstyle ['margin-left'] ทำงาน
obj.currentstyle ['marginleft'] ทำงาน
window.getComputedStyle (obj, null) ['margin-left'] ทำงานได้
window.getComputedStyle (obj, null) ['marginleft'] ทำงานได้
window.getComputedStyle (obj, null) .getPropertyValue ('margin-left') ถูกต้อง
window.getComputedStyle (obj, null) .getPropertyValue ('marginleft') ไม่ถูกต้อง
obj.currentstyle.width ถูกต้อง
obj.currentstyle.background-color ไม่ถูกต้อง
obj.currentstyle.backgroundcolor ทำงาน
window.getComputedStyle (obj, null) .width ถูกต้อง
window.getComputedStyle (obj, null). background-color ไม่ถูกต้อง
window.getComputeStyle (obj, null). backgroundcolor ทำงาน
โดยสรุปแอตทริบิวต์ที่มี "-" ไม่สามารถชี้ให้เห็นได้โดยตรงดังนั้นจึงมีวิธี getPropertyValue ในการจัดการ แต่ [] สามารถใช้เพื่อแทนที่ getPropertyValue
7.DefaultView
ในรหัสการสาธิตออนไลน์จำนวนมาก GetComputedStyle เรียกผ่าน Document.defaultView Object ในกรณีส่วนใหญ่ไม่จำเป็นต้องมีการเรียกโดยตรงผ่านวัตถุหน้าต่าง แต่มีสถานการณ์ที่คุณต้องใช้ DefaultView ซึ่งก็คือการเข้าถึงสไตล์ภายในเฟรมย่อยบน firefox3.6 (iframe)
วิธีการใช้งานอย่างง่ายข้างต้นในการรับรูปแบบ (แนะนำ) ของ JS คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น