Nhận rộng biên giới từ một div với đồng bằng javascript

Question

tôi có phong cách này áp dụng cho một div

div#content { 
border: 1px solid skyblue; 
} 

và tôi muốn để có thể cảnh báo độ rộng của biên giới, tôi đã cố gắng với điều này:

window.alert(document.getElementById("content").style.borderWidth); 

tôi nghe nói rằng phụ thuộc của trình duyệt có thể bạn có thể giúp tôi tôi đang sử dụng Firefox 18

Answer 1

Theo W3Schools, khách sạn này được hỗ trợ bởi các trình duyệt chính. Vì vậy bạn không nên gặp khó khăn trong việc sử dụng nó.

Tuy nhiên, việc sử dụng khung JavaScript như jQuery sẽ luôn giúp bạn không lo lắng về các vấn đề tầm thường như thế này.

Answer 2

Vui lòng thử dưới đây javascript:

alert($("#content").css("border-left-width")); //using jquery. 

hoặc

alert(getComputedStyle(document.getElementById('content'),null).getPropertyValue('border-left-width'));//without jquery. 

getComputedStyle (phần tử, giả)

yếu tố: Yếu tố để có được một phong cách cho

giả: Một bộ chọn giả như 'hover' hoặc null nếu không cần thiết.

tham khảo link: http://javascript.info/tutorial/styles-and-classes-getcomputedstyle

Answer 3

Tôi có thể là quá muộn nhưng khi bạn không bao giờ đánh dấu nó như là trả lời, tôi nghĩ tôi có thể cung cấp cho nó một thử.

Nếu vấn đề của bạn là tính tương thích giữa trình duyệt, tôi sẽ tạo một phương pháp tùy chỉnh mà tôi có thể sử dụng trong hầu hết mọi trình duyệt (có nghĩa là quay lại những điều cơ bản).

Tôi thực sự đào rất nhiều để làm điều này. Tôi sử dụng một số mã từ jQuery vì tôi không muốn sử dụng jQuery nhưng vẫn có khả năng tương thích ngược mà jQuery thực hiện.

Chức năng này giải quyết câu hỏi của bạn và ở dưới cùng có một số ví dụ về cách sử dụng nó.

Chức năng này sử dụng "mô-đun mô-đun" thông qua chức năng ngay lập tức sẽ chạy ngay khi tập lệnh tải tạo phương thức KHÔNG PHẢI theo phạm vi toàn cục nhưng mở rộng chức năng của nó thông qua chức năng để thực hiện những gì bạn muốn.

// I give it a name but it can also be anonymous 
(function preloadedFunctions(){ 
    // Preseted methods. 
    if(window.getComputedStyle){ 
     window.getComputedStylePropertyValue = function(element, prop){ 
      var computedStyle = window.getComputedStyle(element, null); 
      if(!computedStyle) return null; 
      if(computedStyle.getPropertyValue) { 
       return computedStyle.getPropertyValue(prop); 
      } else if (computedStyle.getAttribute) { 
       return computedStyle.getAttribute(prop); 
      } else if(computedStyle[prop]) { 
       return computedStyle[prop]; 
      }; 
     }; 
    } 
    // jQuery JavaScript Library v1.9.0 
    // http://www.minhacienda.gov.co/portal/pls/portal/PORTAL.wwsbr_imt_services.GenericView?p_docname=6240612.JS&p_type=DOC&p_viewservice=VAHWSTH&p_searchstring= 
    // For IE8 or less 
    else if (document.documentElement.currentStyle) { 
     var rnumnonpx = new RegExp("^(" + core_pnum + ")(?!px)[a-z%]+$", "i"), 
     rposition = /^(top|right|bottom|left)$/, 
     core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source; 
     window.getComputedStylePropertyValue = function(element, prop){ 
      var left, rsLeft, 
      ret = element.currentStyle && element.currentStyle[ prop ], 
      style = element.style; 

      if (ret == null && style && style[ prop ]) { 
       ret = style[ prop ]; 
      } 
      if (rnumnonpx.test(ret) && !rposition.test(prop)) { 
       left = style.left; 
       rsLeft = element.runtimeStyle && element.runtimeStyle.left; 
       if (rsLeft) { 
        element.runtimeStyle.left = element.currentStyle.left; 
       } 
       style.left = prop === "fontSize" ? "1em" : ret; 
       ret = style.pixelLeft + "px"; 
       style.left = left; 
       if (rsLeft) { 
        element.runtimeStyle.left = rsLeft; 
       } 
      } 
      return ret === "" ? "auto" : ret; 
     }; 
    }; 
})(); 

tức

1.-

var borderWidth = getComputedStylePropertyValue(document.getElementsByTagName("div")[0], "border-width"); 
console.log(borderWidth); 

2.-

var div = document.getElementById("someID"); 
console.log(getComputedStylePropertyValue(div, "border-width")); 

Answer 4

Câu hỏi rất cũ, nhưng dù sao ...

Giải pháp này là đơn giản javascript và cũng nên hoạt động trong các trình duyệt cũ hơn.
Nó đo kích thước của phần tử, với và không có đường viền.

Ví dụ sau sẽ hoạt động chính xác nếu các đường viền quanh phần tử có cùng kích thước. Nếu không, quy trình không thay đổi nhiều, bạn chỉ cần đặt đường viền bằng 0, từng cái một.

var ele=document.getElementById("content"); 
// measures the element width, WITH borders 
var w=ele.offsetWidth; 
var cssBackup=ele.style.cssText; 
// sets the borders to zero 
ele.style.border="0px"; 
// computes the border size 
var bord=(w-ele.offsetWidth)/2; 
// resets the css 
ele.style.cssText=cssBackup; 
alert(bord);