Tôi làm cách nào để truy cập các thuộc tính kiểu trên các đối tượng javascript đang sử dụng các trang mẫu ngoài?

Question

Tôi có một style sheet bên ngoài với điều này trong đó:

.box { 
padding-left:30px; 
background-color: #BBFF88; 
border-width: 0; 
overflow: hidden; 
width: 400px; 
height: 150px; 
} 

Sau đó tôi có điều này:

<div id="0" class="box" style="position: absolute; top: 20px; left: 20px;"> 

Khi tôi sau đó cố gắng truy cập vào độ rộng của div:

alert(document.getElementById("0").style.width); 

Hộp cảnh báo trống xuất hiện. Làm cách nào để truy cập thuộc tính chiều rộng được xác định trong bảng định kiểu của tôi?

LƯU Ý: Màn hình div có độ rộng chính xác.

Answer 1

Bạn nên sử dụng window.getComputedStyle để nhận giá trị đó. Tôi khuyên bạn nên chống lại việc sử dụng offsetWidth hoặc clientWidth nếu bạn đang tìm giá trị CSS vì những giá trị đó trả về chiều rộng bao gồm phần đệm và các phép tính khác.

Sử dụng getComputedStyle, mã của bạn sẽ là:

var e = document.getElementById('0'); 
var w = document.defaultView.getComputedStyle(e,null).getPropertyValue("width"); 

Các tài liệu này được đưa ra tại MDC: window.getComputedStyle

Answer 2

offsetWidth hiển thị chiều rộng thực tế của div của bạn:

alert(document.getElementById("0").offsetWidth); 

rộng này có thể khác với những gì bạn đã thiết lập trong css của bạn, mặc dù. Cách jQuery sẽ được (tôi thực sự không muốn đề cập đến tất cả các thời gian, nhưng đó là những gì tất cả các thư viện đang có cho):

$("#0").width(); // should return 400 
$("#0").offsetWidth(); // should return 400 as well 
$("#0").css("width"); // returns the string 400px 

Answer 3

Tôi hy vọng điều này là hữu ích:

 function changecss(theClass,element,value) { 
//Last Updated on June 23, 2009 
//documentation for this script at 
//http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html 
var cssRules; 

var added = false; 
for (var S = 0; S < document.styleSheets.length; S++){ 

if (document.styleSheets[S]['rules']) { 
    cssRules = 'rules'; 
} else if (document.styleSheets[S]['cssRules']) { 
    cssRules = 'cssRules'; 
} else { 
    //no rules found... browser unknown 
} 

    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) { 
    if (document.styleSheets[S][cssRules][R].selectorText == theClass) { 
    if(document.styleSheets[S][cssRules][R].style[element]){ 
    document.styleSheets[S][cssRules][R].style[element] = value; 
    added=true; 
    break; 
    } 
    } 
    } 
    if(!added){ 
    if(document.styleSheets[S].insertRule){ 
      document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length); 
     } else if (document.styleSheets[S].addRule) { 
      document.styleSheets[S].addRule(theClass,element+': '+value+';'); 
     } 
    } 
} 
} 

Nó được lấy từ here.

Answer 4

Những câu trả lời hầu hết là đúng, nhưng sẽ làm người đứng đầu của bạn trong khi bạn cố gắng sử dụng chúng như chúng phụ thuộc vào chế độ hiển thị của trình duyệt (còn gọi là chế độ nghiêm ngặt/quirks, trình duyệt vender, v.v.) - câu trả lời cuối cùng là tốt nhất ... sử dụng jquery.