JavaScript có Kiểu dáng

Question

Có thể nhận được TẤT CẢ các kiểu cho một đối tượng sử dụng JavaScript không? Một cái gì đó như:

 

main.css 
------- 
#myLayer { 
    position: absolute; 
    width: 200px; 
    height: 100px; 
    color: #0000ff; 
} 

main.js 
------- 
var ob = document.getElementById("myLayer"); 
var pos = ob.(getPosition); 
// Pos should equal "absolute" but 
// ob.style.position would equal null 
// any way to get absolute? 

 

Answer 1

Bạn đang nói về cái gọi là kiểu đã tính toán, hãy kiểm tra các bài viết về cách để có được nó:

• Get Styles on QuirksMode
• Get Computed Style
• Get the rendered style of an element

F rom bài viết cuối cùng, đây là một chức năng:

function getStyle(oElm, strCssRule){ 
    var strValue = ""; 
    if(document.defaultView && document.defaultView.getComputedStyle){ 
     strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule); 
    } 
    else if(oElm.currentStyle){ 
     strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ 
      return p1.toUpperCase(); 
     }); 
     strValue = oElm.currentStyle[strCssRule]; 
    } 
    return strValue; 
} 

Làm thế nào để sử dụng nó:

CSS:

/* Element CSS*/ 
div#container{ 
    font: 2em/2.25em Verdana, Geneva, Arial, Helvetica, sans-serif; 
} 

JS:

var elementFontSize = getStyle(document.getElementById("container"), "font-size"); 

Answer 2

Bạn có thể sử dụng:

var ob = document.getElementById("myLayer"); 
var pos = ob.style.position; 

Mỗi thuộc tính CSS đều có mô hình đối tượng riêng. Thông thường các thuộc tính css có chứa '-' được viết bằng mô hình java.

Ví dụ:

//getting background-color property 
var ob = document.getElementById("myLayer"); 
var color = ob.style.backgroundColor; 

Nếu bạn muốn để có được tất cả các thuộc tính css được định nghĩa cho một đối tượng, bạn sẽ phải liệt kê từng cái một, bởi vì ngay cả khi bạn không thiết lập thuộc tính trong style sheet của bạn, một đối tượng sẽ có nó với giá trị mặc định.

Answer 3

Polyfill để có được phong cách CSS hiện tại của nguyên tố sử dụng javascript ... Truy cập vào link để biết thêm

/** 
* @desc : polyfill for getting the current CSS style of the element 
* @param : elem - The Element for which to get the computed style. 
* @param : prop - The Property for which to get the value 
* @returns : The returned style value of the element 
**/ 
var getCurrentStyle = function (ele, prop) { 

var currStyle; 
if (!window.getComputedStyle) { 
    currStyle = ele.currentStyle[prop]; 
} else { 
    currStyle = window.getComputedStyle(ele).getPropertyValue(prop); 
} 

return currStyle; 
} 


/** How to use **/ 
var element = document.getElementById("myElement"); 
getCurrentStyle(element, "width"); // returns the width value