วิธีการได้รับขอบ, ช่องว่าง, ความสูง, ชายแดน ฯลฯ ใน div คุณอาจบอกว่าคุณสามารถรับได้โดยตรงด้วย document.getElementById ("id") แต่สิ่งที่คุณพูดสามารถรับแอตทริบิวต์ที่เขียนโดยตรงในฉลากและแอตทริบิวต์ที่อยู่นอกรูปแบบฉลากไม่สามารถรับได้ (เช่นแอตทริบิวต์ในไฟล์ CSS) วิธีการต่อไปนี้สามารถรับได้
การเรนเดอร์อินสแตนซ์มีดังนี้:
JS ไม่สามารถรับแอตทริบิวต์โดยตรงใน CSS เมื่อได้รับแอตทริบิวต์ CSS ดังนั้นคุณต้องใช้วิธีหนึ่งในการทำเช่นนี้
GetStyle (OBJ, attr) วิธีการเรียกคำอธิบาย: OBJ เป็นวัตถุ, attr เป็นความเข้ากันได้ของชื่อแอตทริบิวต์จะต้องเข้ากันได้กับการเขียนของ JS (อ้างอิง: JS สามารถควบคุมสไตล์ของสไตล์)
รหัส JS
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น getStyle (obj, attr) {
var ie =!+"/v1";
iftr == "BackgroundPosition") {// ie6 ~ 8 ไม่เข้ากันกับการเขียนพื้นหลังเพื่อระบุพื้นหลัง positionx/y
ถ้า (เช่น) {{
ส่งคืน obj.currentstyle.backgroundpositionx +" +obj.currentstyle.backRoundPositiony;
-
-
if (obj.currentstyle) {
ส่งคืน obj.currentstyle [attr];
-
อื่น {
ส่งคืน document.defaultView.getComputedStyle (OBJ, NULL) [attr];
-
-
รหัสทดสอบอินสแตนซ์แบบเต็ม:
รหัส HTML
คัดลอกรหัสรหัสดังนี้:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<title> js รับค่าแอตทริบิวต์ CSS ในคลาสขององค์ประกอบที่แน่นอน </title>
<style>
#box1 {มาร์จิ้น: 5px;
A {Border: 1PX Solid #CCC; 12px;}
A: Hover {Color: #FF0000;
</style>
</head>
<body>
<div id = "box1"> css ของ Box1#box1 {margin: 5px;
<a href = "JavaScript:;"
<a href = "JavaScript:;"
<a href = "JavaScript:;"
<script>
// รับค่าแอตทริบิวต์ในชั้นเรียน
var divs = document.getElementById ("Box1");
ฟังก์ชั่น getStyle (obj, attr) {
var ie =!+"/v1";
iftr == "BackgroundPosition") {// ie6 ~ 8 ไม่เข้ากันกับการเขียนพื้นหลังเพื่อระบุพื้นหลัง positionx/y
ถ้า (เช่น) {{
ส่งคืน obj.currentstyle.backgroundpositionx +" +obj.currentstyle.backRoundPositiony;
-
-
if (obj.currentstyle) {
ส่งคืน obj.currentstyle [attr];
-
อื่น {
ส่งคืน document.defaultView.getComputedStyle (OBJ, NULL) [attr];
-
-
ฟังก์ชั่น getcss (typ) {
การแจ้งเตือน (getStyle (divs, typ));
-
</script>
</body>
</html>