มีปัญหาความเข้ากันได้มากมายเสมอเพื่อให้ได้รูปแบบการคำนวณขององค์ประกอบ HTML และมีความแตกต่างระหว่างเบราว์เซอร์ Firefox และ WebKit (Chrome, Safari) สนับสนุนวิธีมาตรฐาน W3C: GetComputedStyle () ในขณะที่ IE6/7/8 ไม่รองรับวิธีมาตรฐาน แต่มีคุณสมบัติส่วนตัวที่จะนำไปใช้: CurrentStyle, IE9 และ Opera Support ทั้งคู่ ด้วยวิธีการและแอตทริบิวต์ทั้งสองเหล่านี้ข้อกำหนดส่วนใหญ่สามารถตอบสนองได้โดยทั่วไป
การคัดลอกรหัสมีดังนี้:
var getStyle = function (elem, type) {
กลับ 'getComputedStyle' ในหน้าต่าง? getComputedstyle (elem, null) [type]: elem.currentstyle [type];
-
อย่างไรก็ตามการใช้ CurrentStyle สำหรับความกว้างและความสูงแบบปรับตัวไม่สามารถรับค่าที่คำนวณได้ดังนั้นจึงสามารถส่งคืนอัตโนมัติและ GetComputedStyle () สามารถส่งคืนค่าที่คำนวณได้ มีหลายวิธีในการแก้ปัญหานี้ สิ่งที่ฉันคิดไว้ก่อนหน้านี้คือการลบค่าการขยายโดยใช้ ClientWidth/ClientHeight เพื่อให้สามารถรับความกว้างและความสูงที่คำนวณได้ในเบราว์เซอร์ที่ไม่สนับสนุนวิธีมาตรฐาน ไม่กี่วันที่ผ่านมาฉันเห็น Situ Zhengmei ใช้วิธีอื่นโดยใช้วิธี getBoundingClientRect () เพื่อให้ได้ตำแหน่งขององค์ประกอบในหน้าและจากนั้นลบซ้ายคือความกว้างด้านล่างลบคือความสูง ฉันทำการเปลี่ยนแปลงเล็กน้อยในรหัสของเขาและรหัสสุดท้ายมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var getStyle = function (elem, style) {
กลับ 'getComputedStyle' ในหน้าต่าง?
GetComputedStyle (Elem, Null) [Style]:
การทำงาน(){
style = style.replace (//-(/w)/g, ฟังก์ชั่น ($, $ 1) {
ส่งคืน $ 1.Touppercase ();
-
var val = elem.currentstyle [สไตล์];
if (val === 'auto' && (style === "width" || style === "ความสูง")) {
var rect = elem.getBoundingClientRect ();
if (style === "width") {
return rect.right - rect.left + 'px';
}อื่น{
return rect.bottom - rect.top + 'px';
-
-
กลับมาวาล;
-
-
// เรียกวิธีนี้
var test = document.getElementById ('ทดสอบ')
// รับความกว้างที่คำนวณได้
twidth = getStyle (ทดสอบ 'ความกว้าง');
ปัญหาใหม่หากความกว้างหรือความสูงขององค์ประกอบใช้หน่วย EM หรือ % ค่าที่ส่งคืนโดย getComputedStyle () จะเปลี่ยน EM หรือ % เป็นหน่วย PX โดยอัตโนมัติและ CurrentStyle จะไม่ หากขนาดตัวอักษรใช้ EM เป็นหน่วยการส่งคืน 0EM ภายใต้โอเปร่านั้นน่ากลัวจริงๆ!
ต่อมาฉันพบปัญหาความเข้ากันได้ที่ไม่คาดคิดในการใช้งานของฉัน วันนี้ฉันปรับรหัสต้นฉบับและจัดการกับปัญหาความเข้ากันได้ทั่วไป
ใน JavaScript, "-" (Scribing หรือ Hyphen) หมายถึงเครื่องหมายลบในขณะที่อยู่ใน CSS คุณสมบัติหลายสไตล์มีสัญลักษณ์นี้เช่น padding-left, font-size ฯลฯ ดังนั้นหากรหัสต่อไปนี้ปรากฏใน JavaScript มันจะเป็นข้อผิดพลาด:
การคัดลอกรหัสมีดังนี้: elem.style.margin-left = "20px";
วิธีที่ถูกต้องในการเขียนควรเป็น:
การคัดลอกรหัสมีดังนี้: elem.style.marginleft = "20px";
ที่นี่คุณต้องลบคะแนนกลางของ CSS และใช้ประโยชน์จากตัวอักษรที่ตามมาด้วยคะแนนกลางซึ่งเป็นที่รู้จักกันทั่วไปว่าวิธีการเขียน "สไตล์อูฐ" ไม่ว่าจะเป็นการใช้ JavaScript เพื่อตั้งค่าหรือรับองค์ประกอบสไตล์ CSS ควรเป็นสไตล์อูฐ อย่างไรก็ตามมือใหม่จำนวนมากที่คุ้นเคยกับ CSS แต่ไม่คุ้นเคยกับ JavaScript จะทำผิดพลาดระดับต่ำนี้เสมอ การใช้การใช้งานขั้นสูงของการแทนที่สามารถแทนที่คะแนนกลางในแอตทริบิวต์ CSS ด้วยสไตล์อูฐ
การคัดลอกรหัสมีดังนี้: var newprop = prop.replace (//-(/w)/g, ฟังก์ชั่น ($, $ 1) {
ส่งคืน $ 1.Touppercase ();
-
สำหรับลอยมันเป็นคำที่สงวนไว้ใน JavaScript มีทางเลือกอื่นในการตั้งค่าหรือรับค่าลอยขององค์ประกอบใน JavaScript มันคือ CSSFLOAT ในเบราว์เซอร์มาตรฐานและ Stylefloat ใน IE6/7/8
หากไม่มีค่าที่ชัดเจนสำหรับด้านบนขวาล่างและซ้ายเบราว์เซอร์บางตัวจะส่งคืนอัตโนมัติเมื่อได้รับค่าเหล่านี้ แม้ว่ามูลค่าของอัตโนมัติจะเป็นแอตทริบิวต์ CSS ตามกฎหมาย แต่ก็ไม่ได้เป็นผลลัพธ์ที่เราต้องการ แต่ควรเป็น 0PX
ใน IE6/7/8 เพื่อตั้งค่าความโปร่งใสขององค์ประกอบตัวกรองเช่น: ตัวกรอง: alpha (opacity = 60) สำหรับเบราว์เซอร์มาตรฐานเพียงแค่ตั้งค่าความทึบโดยตรงและทั้งสองวิธีการเขียน IE9 สนับสนุนฉันได้ทำการประมวลผลความเข้ากันได้เพื่อให้ได้ความโปร่งใสขององค์ประกอบ ตราบใดที่คุณใช้ความทึบแสงคุณจะได้รับค่าความโปร่งใสขององค์ประกอบเบราว์เซอร์ทั้งหมด
ได้รับความกว้างและความสูงขององค์ประกอบใน IE6/7/8 ได้รับการแนะนำในบทความก่อนหน้าดังนั้นฉันจะไม่ทำซ้ำที่นี่ อีกสิ่งที่ควรทราบคือถ้ารูปแบบขององค์ประกอบถูกเขียนแบบอินไลน์โดยใช้สไตล์หรือหากคุณลักษณะสไตล์ได้รับการตั้งค่าโดยใช้ JavaScript คุณสามารถใช้วิธีการต่อไปนี้เพื่อรับสไตล์ที่คำนวณได้ขององค์ประกอบ:
การคัดลอกรหัสมีดังนี้:
var height = elem.style.height;
วิธีนี้เร็วกว่าการอ่านค่าคุณสมบัติใน GetComputedStyle หรือ CurrentStyle และควรใช้ก่อน แน่นอนว่าสิ่งที่จำเป็นต้องมีคือสไตล์ที่ตั้งค่าผ่านการเขียนแบบอินไลน์ (โดยใช้การตั้งค่า JavaScript ก็คือการตั้งค่าสไตล์อินไลน์ด้วย) รหัสสุดท้ายที่ดีที่สุดมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var getStyle = function (elem, p) {
var rpos = /^(ซ้าย | ขวา | ด้านบน | ด้านล่าง) $ /,
ecma = "getComputedStyle" ในหน้าต่าง
// แปลงคะแนนกลางเป็นรูปแบบอูฐเช่น: padding-left => paddingleft
p = p.replace (//-(/w)/g, ฟังก์ชั่น ($, $ 1) {
ส่งคืน $ 1.Touppercase ();
-
// กระบวนการลอยตัว
p = p === "ลอย"? (ECMA? "CSSFLOAT": "StyleFloat"): P;
return !! elem.style [p]?
Elem.style [P]:
ECMA?
การทำงาน(){
var val = getComputedStyle (elem, null) [p];
// จัดการกับสถานการณ์ที่ด้านบนขวาล่างและซ้ายเป็นอัตโนมัติ
if (rpos.test (p) && val === "auto") {
กลับ "0px";
-
กลับมาวาล;
-
การทำงาน(){
var <a href = "http://wirelesscasinogames.com"> wirelesscasinogames.com </a> val = elem.currentstyle [p];
// รับความกว้างและความสูงขององค์ประกอบใน IE6/7/8
if ((p === "width" || p === "ความสูง") && val === "auto") {
var rect = elem.getBoundingClientRect ();
return (p === "width"? rect.right - rect.left: rect.bottom - rect.top) "px";
-
// รับความโปร่งใสขององค์ประกอบใน IE6/7/8
if (p === "ความทึบ") {
var filter = elem.currentstyle.filter;
ถ้า ( /opacity/.test(filter)) {
val = filter.match (// d /) [0] / 100;
return (val === 1 || val === 0)? val.tofixed (0): val.tofixed (1);
-
อื่นถ้า (val === ไม่ได้กำหนด) {
กลับ "1";
-
-
// จัดการกับสถานการณ์ที่ด้านบนขวาล่างและซ้ายเป็นอัตโนมัติ
if (rpos.test (p) && val === "auto") {
กลับ "0px";
-
กลับมาวาล;
-
-
นี่คือตัวอย่างการโทร:
การคัดลอกรหัสมีดังนี้:
<style>
.กล่อง{
ความกว้าง: 500px;
ความสูง: 200px;
ความเป็นมา:#000;
ตัวกรอง: อัลฟ่า (ความทึบ = 60);
ความทึบ: 0.6;
-
</style>
<div id = "box"> </div>
<script>
var box = document.getElementById ("box");
การแจ้งเตือน (getStyle (กล่อง, "width")); // "500px"
การแจ้งเตือน (getStyle (กล่อง, "พื้นหลังสี")); // "rgb (0, 0, 0)" / "#000"
การแจ้งเตือน (getStyle (กล่อง, "ความทึบ")); // "0.6"
การแจ้งเตือน (getStyle (กล่อง, "float")); // "ไม่มี"
</script>