เพื่ออำนวยความสะดวกในการสอบถามในอนาคตฉันได้อ่านข้อมูลบางอย่างและสรุปวิธีการต่อไปนี้ มัน จำกัด เฉพาะ JS พื้นเมือง หากมีสถานที่ที่ผิดพลาดโปรดชี้ให้เห็น! ฉันแค่หวังว่าทุกคนจะโอเคหลังจากอ่านมัน!
1. คุณสามารถอ่านและเขียนสไตล์ CSS ขององค์ประกอบเอกสารผ่านวัตถุสไตล์ของวัตถุ DOM Node (เช่นวัตถุ CSSSTYLEDECLARATION)
ตัวอย่างเช่น: var elm = document.getElementById ('ทดสอบ');
Elm.style.color = 'Black';
2. อ่านและเขียนแอตทริบิวต์สไตล์โดยตรงผ่าน getAttribute (), setAttribute () และ removeAttribute () ของวัตถุองค์ประกอบ
ตัวอย่างเช่น: Elm.setAttribute ('Style', 'Color: Red; Line-Height: 30px');
3. ผ่านคุณสมบัติ CSSTEXT ของวัตถุ CSSSTYLEDECLARATION, SETPROPERTY (), RemoveProperty และวิธีอื่น ๆ
ชอบ:
elm.style.csstext = 'สี: สีแดง; จุดสูง: 30px'; elm.style.removeproperty ('color'); elm.style.setProperty ('สี', 'สีเขียว', 'สำคัญ'); elm.style.csstext = ''; // ล้างการประกาศทั้งหมดของกฎนี้อย่างรวดเร็วการประกาศสไตล์ส่วนหนึ่งของกฎ CSS แต่ละตัว (ส่วนที่อยู่ในวงเล็บปีกกา) เป็นวัตถุ CSSSTYLEDECLARATION คุณสมบัติและวิธีการของมัน:
คุณสมบัติ:
1.CSSTEXT: ข้อความการประกาศสไตล์ทั้งหมดของกฎปัจจุบัน คุณสมบัตินี้สามารถอ่านและเขียนและสามารถใช้เพื่อตั้งค่ากฎปัจจุบัน
2. ความยาว: กฎปัจจุบันมีการประกาศกี่ครั้ง?
3.ParentRule: กฎที่มีกฎปัจจุบันคุณสมบัติ ParentRule ของอินเตอร์เฟส CSSRULE เดียวกัน
วิธี:
1. เมธอด getPropertyPriority () ส่งคืนลำดับความสำคัญที่ระบุ หากมีมันเป็น "สำคัญ" มิฉะนั้นจะเป็นสตริงที่ว่างเปล่า
2. วิธี getPropertyValue ส่งคืนค่าประกาศที่ระบุ;
3. เมธอดรายการ (ดัชนี) ส่งคืนชื่อแอตทริบิวต์ของตำแหน่งที่ระบุและโดยทั่วไปจะโดยตรงมากขึ้นโดยใช้ไวยากรณ์ [ดัชนี];
4. วิธีการลบข้อมูลใช้เพื่อลบคุณสมบัติ CSS และส่งคืนค่าที่ถูกลบ
5.SetProperty วิธีใช้เพื่อตั้งค่าแอตทริบิวต์ CSS ที่ระบุและไม่มีค่าส่งคืน
4. ใช้เอกสารชื่อ Stylesheets เพื่อส่งคืนวัตถุสไตล์ชีททั้งหมด (นั่นคือแผ่นสไตล์ทั้งหมด) ในหน้าปัจจุบัน มันเป็นวัตถุอาร์เรย์คลาสแบบอ่านอย่างเดียวและองค์ประกอบของมันคือวัตถุ CSSSTYLESHEET (สืบทอดมาจากวัตถุสไตล์ชีท) วิธีการคุณสมบัติของวัตถุนี้มีดังนี้:
คุณสมบัติ:
1. วัตถุอาเรย์คลาส CSSrules องค์ประกอบคือกฎ CSS CSSTYLERULE วัตถุในแผ่นสไตล์; IE9 เป็นกฎต่อไปนี้
2. แอตทริบิวต์ปิดใช้งานใช้เพื่อเปิดหรือปิดแผ่นสไตล์ที่มีค่าของจริงหรือปิดใช้งาน
3. คุณสมบัติ OwnerNode ส่งคืนโหนด DOM ซึ่งวัตถุสไตล์ชีทตั้งอยู่โดยปกติแล้ว <Link> หรือ <Systle> สำหรับสไตล์ชีทที่อ้างอิงโดยสไตล์ชีทอื่น ๆ คุณสมบัตินี้เป็นโมฆะ
4. เนื่องจากคำสั่ง @IMPORT ของ CSS ช่วยให้แผ่นสไตล์อื่น ๆ ถูกโหลดในแผ่นสไตล์คุณสมบัติ ParentStylesheet จึงมีคุณสมบัติ ParentStylesheet ซึ่งส่งคืนแผ่นสไตล์ที่มีแผ่นสไตล์ปัจจุบัน หากสไตล์ชีทปัจจุบันเป็นสไตล์ชีทระดับบนสุดคุณสมบัติจะส่งคืนค่าว่าง
5. แอตทริบิวต์ประเภทส่งคืนค่าประเภทของวัตถุสไตล์ชีทมักจะเป็นข้อความ/css;
6. แอตทริบิวต์ชื่อเรื่องส่งคืนค่าชื่อเรื่องของวัตถุสไตล์ชีท;
7. แอตทริบิวต์ HREF เป็นแอตทริบิวต์แบบอ่านอย่างเดียวซึ่งส่งคืนที่อยู่สไตล์ชีทของการเชื่อมต่อวัตถุสไตล์ชีท สำหรับโหนดสไตล์ฝังตัวคุณสมบัตินี้มีค่าเท่ากับโมฆะ
8. แอตทริบิวต์สื่อระบุว่าแผ่นสไตล์นี้ใช้สำหรับหน้าจอพิมพ์หรือทั้งสองอย่าง (ทั้งหมด) แอตทริบิวต์นี้เป็นแบบอ่านอย่างเดียวและค่าเริ่มต้นคือหน้าจอ
วิธีการ: deleterule () ลบกฎออกจากแผ่นสไตล์, insertrule () แทรกกฎใหม่ลงในแผ่นสไตล์และ IE9 นั้นเพิ่มเข้ามา () และ removerule ();
ชอบ:
document.stylesheets [0] .insertrule ('#ทดสอบ: โฮเวอร์ {สี: สีขาว;}', 0); document.stylesheets [0] .deleterule (0); // ลบกฎแรกในเอกสารสไตล์แผ่นงาน Stylesheets [0] .cssrules [1] .SelecTortext; // ส่งคืนเอกสารสตริงตัวเลือก Stylesheets [0] .cssrules [1] .csstext; // ส่งคืนสตริงกฎรวมถึง selector document.stylesheets [0] .cssrules [1] .csstext; // ส่งคืนสตริงการประกาศสไตล์ทั้งหมดสำหรับกฎปัจจุบัน5. ใช้วิธี getComputedStyle ของวัตถุหน้าต่าง พารามิเตอร์แรกคือวัตถุองค์ประกอบและพารามิเตอร์ที่สองสามารถเป็นโมฆะสตริงเปล่าหรือสตริงปลอม-องค์ประกอบ วิธีนี้ส่งคืนวัตถุ csstyledeclaration แบบอ่านอย่างเดียวที่แสดงถึงรูปแบบการคำนวณ มันแสดงถึงข้อมูลสไตล์สุดท้ายที่ใช้จริงกับองค์ประกอบที่ระบุนั่นคือผลลัพธ์หลังจากการซ้อนทับของกฎ CSS ต่างๆ
ตัวอย่างเช่น: var color = window.getComputedStyle (elm, ': ก่อน'). สี;
var color = window.getComputedStyle (elm, ': ก่อน'). getPropertyValue ('color');
หรือ: var color = window.getComputedStyle (elm, null) .color;
ความแตกต่างระหว่างวัตถุ CSSSTYLEDECLARATION ที่แสดงถึงสไตล์ที่คำนวณและวัตถุ CSSSTYLEDECLARATION ที่แสดงถึงสไตล์อินไลน์:
1. คุณสมบัติของรูปแบบการคำนวณเป็นแบบอ่านอย่างเดียว
2. คำนวณค่าของสไตล์เป็นค่าสัมบูรณ์ หน่วยสัมพัทธ์เช่นเปอร์เซ็นต์และคะแนนทั้งหมดจะถูกแปลงเป็นค่าสัมบูรณ์ของสตริงเสริม 'px' แอตทริบิวต์ที่มีค่าคือสีจะถูกส่งคืนในรูปแบบของ "RGB (#,#,#)" หรือ "RGBA (#,#,#,#,#)";
3. อย่าคำนวณแอตทริบิวต์สารประกอบ แต่ขึ้นอยู่กับคุณลักษณะพื้นฐานที่สุดเท่านั้นเช่นการไม่สอบถามระยะขอบ แต่สอบถาม Margintop เพียงอย่างเดียว ฯลฯ ;
4. คุณสมบัติ CSSTEXT ไม่ได้กำหนดไว้ในวัตถุสไตล์
5. รูปแบบการคำนวณก็หลอกลวงเช่นกัน เมื่อใช้งานคุณจะต้องให้ความสนใจกับค่าการส่งคืนเมื่อสอบถามแอตทริบิวต์บางอย่าง ตัวอย่างเช่นการสืบค้นแบบอักษรครอบครัว;
6. วิธี getComputedStyle ไม่ได้รับการสนับสนุนด้านล่าง IE9 วัตถุองค์ประกอบของ IE มีแอตทริบิวต์ CurrentStyle;
6. เพิ่มแผ่นสไตล์โดยตรง
1. สร้างแท็ก <style> เพื่อเพิ่มแผ่นสไตล์ในตัว
var style1 = document.createelement ('style'); style1.innerhtml = 'body {color: red} #top: hover {พื้นหลังสี: สีแดง; สี: สีขาว;}'; document.head.appendchild (style1);2. อีกวิธีหนึ่งคือการเพิ่มสไตล์ชีทภายนอกนั่นคือเพิ่มโหนดลิงก์ในเอกสารและชี้แอตทริบิวต์ HREF ไปยัง URL ของสไตล์ชีทภายนอก
var link1 = document.createElement ('link'); link1.setAttribute ('rel', 'stylesheet'); link1.setAttribute ('type', 'text/css'); link1.setattribute ('href', 'reset-min.css');7. วิธีการ window.matchmedia ใช้เพื่อตรวจสอบคำสั่ง MediaQuery ของ CSS เบราว์เซอร์รุ่นล่าสุด (รวมถึง IE 10+) รองรับวิธีนี้ สำหรับเบราว์เซอร์เก่าที่ไม่รองรับวิธีนี้คุณสามารถใช้ไลบรารีฟังก์ชั่นของบุคคลที่สาม MatchMedia.js;
นี่คือตัวอย่างของคำสั่ง MediaQuery:
@media All and (Max-Device-Width: 700px) {body {background: #ff0;}}วิธีการ window.matchmedia ยอมรับสตริงคำสั่ง MediaQuery เป็นพารามิเตอร์และส่งคืนวัตถุ MediaQueryList วัตถุนี้มีคุณสมบัติสองประการต่อไปนี้:
สื่อ: ส่งคืนสตริงคำสั่ง MediaQuery แบบสอบถาม
การจับคู่: ส่งคืนค่าบูลีนที่ระบุว่าสภาพแวดล้อมปัจจุบันตรงกับคำสั่ง Query หรือไม่
var result = window.matchmedia ('(สูงสุด-ความกว้าง: 700px)'); if (result.matches) {console.log ('ความกว้างของหน้าน้อยกว่าหรือเท่ากับ 700px'); } else {console.log ('ความกว้างของหน้ามากกว่า 700px'); -วัตถุ MediaQueryList ที่ส่งคืนโดย Window.MatchMedia มีสองวิธีในการฟังเหตุการณ์: วิธีการ addListener และวิธีการ RemoveListener หากผลลัพธ์การสืบค้น MediaQuery เปลี่ยนแปลงฟังก์ชันการโทรกลับที่ระบุจะเรียกว่า;
var mql = window.matchmedia ("(ความกว้างสูงสุด: 700px)"); mql.addlistener (mqcallback); // ระบุฟังก์ชั่นการโทรกลับ mqcallback (mqcallback); // ฟังก์ชั่นฟังก์ชั่นการโทรกลับ mqcallback (mql) {ถ้า (mql.matches) {// ความกว้างน้อยกว่าหรือเท่ากับ 700 พิกเซลการอ้างอิงถึงบทความนี้:
MDN: https://developer.mozilla.org/zh-cn/docs/web/api
Ruan Yifeng JavaScript อ้างอิง: http://javascript.ruanyifeng.com/dom/css.html
คู่มือ JavaScript ที่มีสิทธิ์รุ่นที่หก
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น