รู้เบื้องต้นเกี่ยวกับความแตกต่างระหว่างสไตล์, currentstyle, getComputedstyle
มีสามวิธีในการจัดสไตล์แผ่น
สไตล์อินไลน์: เขียนไว้ในแท็ก สไตล์อินไลน์นั้นใช้ได้กับแท็กทั้งหมดเท่านั้น
แผ่นสไตล์ภายใน: เขียนไว้ใน HTML และสไตล์ภายในนั้นใช้ได้กับหน้าเว็บเท่านั้น
แผ่นสไตล์ภายนอก: หากหน้าเว็บหลายหน้าจำเป็นต้องใช้สไตล์เดียวกันให้เขียนสไตล์ในไฟล์ CSS ที่มี. css เป็นคำต่อท้ายจากนั้นอ้างอิงไฟล์ CSS ในแต่ละหน้าเว็บที่ต้องใช้สไตล์เหล่านี้ แอตทริบิวต์สไตล์ที่ใช้กันมากที่สุดคือ ใน JavaScript ค่าของ xxx สามารถรับได้ผ่าน document.getElementById (id) .style.xxxx อย่างไรก็ตามโดยไม่คาดคิดสิ่งนี้สามารถรับค่าสไตล์ที่กำหนดผ่านวิธีการฝังตัวนั่นคือค่าที่ตั้งไว้ในแอตทริบิวต์สไตล์
วิธีแก้ปัญหา: แนะนำ CurrentStyle, Runtimestyle, GetComputeStyle Style Standard Standard ซึ่งอาจระบุได้ด้วยแอตทริบิวต์สไตล์!
Runtimestyle Runtime Style! หากมันทับซ้อนกับคุณสมบัติของสไตล์คุณสมบัติของสไตล์จะถูกเขียนทับ!
Currentstyle หมายถึงการผสมผสานของสไตล์และ runtimestyle! คุณสามารถรับค่าของสไตล์ CSS ที่อ้างอิงผ่านแบบอินไลน์หรือภายนอกผ่าน CurrentStyle (เช่นเท่านั้น) ตัวอย่างเช่น: document.getElementById ("ทดสอบ"). currentstyle.top
เพื่อให้เข้ากันได้กับ FF คุณต้องได้รับการคำนวณเพื่อทำมัน
หมายเหตุ: GetComputedStyle อยู่ใน Firefox, CurrentStyle อยู่ใน IE ตัวอย่างเช่น
<style> #mydiv {width: 300px;} </style>แต่:
var mydiv = document.getElementById ('mydiv'); ถ้า (mydiv.currentstyle) {var width = mydiv.currentstyle ['width']; แจ้งเตือน ('IE:' + width); null) ['width']; Alert ('firefox:' + width);}นอกจากนี้ภายใต้ FF คุณยังสามารถรับได้ด้วยวิธีต่อไปนี้
document.defaultView.getComputedStyle (mydiv, null) .width; window.getComputedStyle (mydiv, null) .width;
นี่คือส่วนเพิ่มเติมบางส่วน:
ในขณะที่อ่านบล็อกฉันเห็น 3 คน - สไตล์, currentstyle, getComputedstyle ฉันไม่ได้พบมันเมื่อฉันเรียนมาก่อน แต่ตอนนี้ฉันได้พบมันดังนั้นฉันจึงศึกษามันเล็กน้อย ฉันค้นพบปัญหาบางอย่างอาจเป็นเพราะอายุของเวลาหรืออาจเป็นเพราะความไม่รู้ของฉัน แต่มันทำให้ฉันสับสนจริงๆ แม้ว่าเต่าหยวนมิงกล่าวว่าเขาไม่ได้แสวงหาความเข้าใจมากนักเมื่อเรียนในฐานะนักพัฒนาส่วนหน้าที่ต้องการเป็นส่วนหน้ายอดเยี่ยมเขายังคงต้องเข้าใจมันมิฉะนั้นเขาจะไม่สามารถนอนหลับได้!
มาวางรากฐานก่อน มาพูดคุยกันเกี่ยวกับรูปแบบสไตล์การเรียงลำดับสามรูปแบบ (ทั้งสามประเภทมีชื่อที่แตกต่างกันตามนิสัยของพวกเขา):
หนึ่ง. สไตล์อินไลน์: ตั้งค่าด้วยแอตทริบิวต์สไตล์ในแท็ก HTML ชอบ:
1 <p style = "สี:#f90;"> นี่คือสไตล์อินไลน์ </p>
สอง. สไตล์ฝัง: ตั้งค่าแท็ก <head> ผ่านแท็ก <style> ชอบ:
<style type = "text/css">/*นี่คือสไตล์ฝัง*/.stuff {color:#f90} </style>สาม. สไตล์ภายนอก: ตั้งค่าผ่านแท็ก <link> ชอบ:
<link rel = "stylesheet" href = "path/style.css" type = "text/css"> ================================================== .stuff {color:#f90;}แนะนำวิธีที่สาม
ตัวละครเอกสามคนด้านล่างอยู่ในสนาม
คนแรกที่เดินเข้าหาเราอย่างช้าๆคือสไตล์ มันถูกใช้ใน obj.style.attr; นักวิจารณ์ภาพยนตร์แสดงความคิดเห็นในบล็อกของเขา:
สไตล์สามารถรับสไตล์อินไลน์ขององค์ประกอบเท่านั้นและไม่สามารถหาสไตล์ภายในและภายนอกได้โดยใช้สไตล์
ฉันตรวจสอบด้วยรหัสต่อไปนี้และเป็นไปตามที่กล่าวไว้ข้างต้น ฉันใช้สามสไตล์และผลลัพธ์ที่ฉันได้รับคือคุณค่าของสไตล์อินไลน์
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ype" content = "ข้อความ/html; charset = utf-8"/> <title> type = "text/css"/> <style type = "text/css"> #stuff {width: 300px;} </style> <script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById (' console.log (odiv.style.width); //alert(odiv.style.width); - </script> </head> <body> <div id = "stuff"> </div> </body> </html>รูปแบบลิงค์ภายนอก StyleSheet.css:
1 @Charset "UTF-8"; 2 / * เอกสาร CSS * / 3 #stuff {Width: 100px;}
ผลลัพธ์คือ 400px
รูปแบบต่อไปนี้คือ CurrentStyle ซึ่งกล่าวกันว่ามีการสนับสนุน MS ที่แข็งแกร่งซึ่งหมายความว่าผู้ชายคนนี้สามารถใช้ในเบราว์เซอร์ IE เท่านั้น คนอื่นไม่ดี มันถูกใช้โดย window.currentstyle ["attr '] หรือ window.currentstyle.attr. ใน IE รับค่าแอตทริบิวต์ความกว้าง 300px ในแผ่นสไตล์ฝังซึ่งไม่สามารถส่งผ่านใน Mozilla Firefox
คนสุดท้ายมาถึง getComputedStyle ซึ่งใช้ window.getComputedStyle (ob, pseudoelt) ["attr '] หรือ window.getComputedStyle (ob, pseudoelt) .attr. ในหมู่พวกเขา pseudoelt แสดงถึง pseudoclass เช่น: ก่อน
นักวิจารณ์ภาพยนตร์แสดงความคิดเห็น:
GetComputedStyle ทำหน้าที่เหมือนกับ CurrentStyle แต่เหมาะสำหรับ FF, Opera, Safari และ Chrome
ด้วยทัศนคติที่สงสัยฉันตรวจสอบอีกครั้งและ IE7, IE8 และ IE9 รายงานข้อผิดพลาดทั้งหมด:
วัตถุไม่รองรับแอตทริบิวต์หรือวิธีการ "getComputedStyle"
ปัญหาความเข้ากันได้ของเบราว์เซอร์ ปัญหาความเข้ากันได้ของเบราว์เซอร์นั้นเป็นอาการปวดหัวสำหรับนักพัฒนาส่วนหน้าโดยเฉพาะผู้ร้าย IE6 แต่เราไม่สามารถกลัวและอยู่ห่างจากมันได้ แต่แทนที่จะจัดการกับการเคลื่อนไหวและทหารมาปิดกั้นน้ำและดิน คุณจะสนุกมากในการต่อสู้กับมันและความสำเร็จหลังจากเอาชนะมัน! - -
อีกจุดหนึ่ง: GetComputedStyle และ CurrentStyle สามารถรับค่าแอตทริบิวต์ได้เท่านั้น แต่ไม่สามารถตั้งค่าแอตทริบิวต์ได้ หากคุณต้องการตั้งค่าแอตทริบิวต์ให้ใช้ ob.style.attr
โปรดให้คำแนะนำกับฉันหากมีบางอย่างผิดพลาดขอบคุณล่วงหน้า! -