얼마 전, LJW가 작성한 TouchsLider.js 회전식 코드에 적응 형 화면 크기 기능을 추가했을 때 문제가 발생했습니다. 어떤 방법을 사용하든 IMG 태그의 높이와 너비를 얻을 수 없습니다. 결국, 당신은 그림의 높이와 너비의 비율 만 설정할 수 있습니다. 오늘 시간이있는 동안 테스트하기 위해 몇 가지 데모를 썼고 그 이유를 찾았습니다. 자세히 설명하겠습니다. 문제가 있으면 사진을 찍으십시오 ~~~
우선, 높이와 너비를 얻는 방법은 내가 아는 한 다음과 같습니다.
obj.style.width (높이);
obj.offsetwidth (offestheight);
obj.clientWidth (clientHeight);
GetComputedStyle 및 CurrentStyle;
obj.naturalwidth (NaturalHeight)
내러티브의 단순성을 위해, 여기에 그 예로는 그 밖의 너비가 있습니다.
첫 번째 방법에 대해 먼저 이야기 해 봅시다 : obj.style.width; 이 방법은 스타일 속성을 사용하여 너비가 레이블로 작성된 경우에만 값을 얻을 수 있으며, 그렇지 않으면 반환 된 값이 비어 있습니다. 다음 데모를보십시오.
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b46329a11109598-9qxv9c_fw658"> var imgw = document.getElementsByTagName ( 'IMG') [0] .style.width; 경고 (IMGW); // 리턴 값은 400px입니다. 그렇지 않으면 반환됩니다. </스크립트>
위의 방법은 태그의 스타일 속성에 너비 값을 추가하는 데만 적용됩니다. 수입 스타일 시트에 너비 값을 추가하면 (HTML 페이지의 링크 또는 스타일 태그에서 가져 오든) 값이 발생하지 않으며 반품이 비어 있지 않습니다.
그런 다음 두 번째 방법과 세 번째 방법 OBJ.offsetWidth (offesTheight)에 대해 이야기 해 봅시다. obj.clientWidth (clientHeight); 일반적으로 레이블이 패딩 값과 테두리 값을 설정하지 않으면 얻은 두 값은 동일합니다. 그러나 많은 경우에 이것은 그렇지 않습니다. 실제로 오프셋 폭은 너비 값 + 패딩 값 + 경계 값을 가져오고 ClientWidth는 너비 값 + 패딩 값을 가져옵니다. 다음 데모를 참조하십시오.
<style> img {패딩 : 20px; 테두리 : 1px solid 빨간색;} </style> <img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b46329a111098-9qxv9c_fw658"> <fw658 "> img = document.getElementsByTagName ( 'IMG') // 440px; </script>IMG 태그의 너비는 IMG 태그에 추가 된 스타일 = "너비 : 400px"입니다. 이 속성 값이 제거되면 위의 데모에서 imgoffsetwidth 및 imgclientWidth에 의해 리턴 된 값은 이미지 자체의 높이와 너비 값입니다. 당신은 그것을 시도 할 수 있습니다.
또한 GetComputedStyle과 CurrentStyle은 처리 호환성의 두 가지 방법입니다. 획득 된 값은 화면에 표시된 이미지의 높이와 너비 값에 불과합니다. IMG 태그의 패딩 및 테두리 값은 얻지 못할 것입니다. 그러나 GetComputedStyle은 Firefox/IE9/Safari/Chrome/Opera 브라우저에 적합하며 현재 스타일은 IE6/7/8에 적합합니다. 그러나 IMG 태그가 스타일 속성을 설정하지 않더라도 스타일 시트를 소개하지 않으면 getComputedStyle 만 값, 즉 이미지 자체의 높이와 너비 값을 얻을 수 있으며 현재 스타일은 자동을 반환 할 수 있습니다. 다음은 데모입니다.
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dddd92151b3051b46329a11109598-9qxv9c_fw658"> functionstyle (el, name) {if (window. window.getComputedStyle (el, null) [이름]; } else {return el.currentStyle [이름]; }} var div = document.getElementsByTagName ( 'IMG') [0]; 경고 (getStyle (div, 'width'); </스크립트>IMG 태그에서 스타일 속성을 제거한 다음 테스트 할 수 있습니다.
마지막으로, html5에서 요소의 높이와 너비를 얻는 새로 추가 된 방법 인 obj.naturalwidth (NaturalHeight) 메소드가 있지만 Firefox/IE9/Safari/Chrome/Opera Browser에만 적용 할 수 있습니다. 다음은 각 브라우저에 대한 데모입니다.
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522ddd92151b3051b46329a11109598-9qxv9c_fw658"> document.addeventlistener (domcontent.) {function getImgnaturalStyle (IMG, Callback) {var nwidth, nheight if (img.naturalwidth) {// modern browser nwidth = img.naturalwidth nheight = img.naturealheight} else {// image function () {indage.width, image.height)} return [nwidth, nheight]} var img = getElementsByTagName ( 'IMG'); </스크립트>IE6/7/8 브라우저 image.src는 IMG 이미지가 완전히로드 된 후에 만 얻는다는 점에 유의해야합니다. 그렇지 않으면 오류 가보고됩니다.
이미지의 완전한 로딩에 관해서는, 지난번에 발생한 문제가 이미지 높이를 얻을 수없는 문제를 해결합니다.
document.adeventListener ( "domcontentLoaded", function () {// 이유는 우리 코드가 그러한 환경에서 작성 되었기 때문입니다. 현재 IMG 태그가로드되었으며, 즉, DOM 구조 만 완전히로드되지 않았으므로, 획득 된 값은 모두 0이지만, 획득 된 환경에서 쓸 수 있습니다.다시 말해, 이미지의 높이와 너비를 얻는 위의 방법은 이미지가 완전히로드되었다는 전제를 기반으로해야합니다.
좋아, 내 능력으로, 나는 이것 만 이해할 수있다. 잘못된 것이 있으면 사진을 찍으십시오 ~~
IMG 사진의 높이와 너비를 얻는 JS의 위의 간단한 예는 내가 공유 한 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.