Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Не корректная работа getComputedStyle (https://javascript.ru/forum/events/29521-ne-korrektnaya-rabota-getcomputedstyle.html)

nuclear_kote 01.07.2012 20:34

Не корректная работа getComputedStyle
 
Создал такой диалог:

<div id='dialog' style="position:fixed; left:50; top:50; border: 1px solid; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8); z-index:1000; ">
            <div style="padding: 10px; background: #FFFFFF;">
                <div class="content" id="cont" style="overflow:auto;padding: 5px;height:100%;">HELLO WORLD</div>
                <div style="text-align:right;width:100%;"><img src='s.png' id='res' style="cursor: nwse-resize;"/></div>
            </div>
        </div>

Создал для него скрипт для изменения размеров Как пример кода:
var res = document.getElementById('res');
           res.ondragstart = function() { 
                    return false; 
            };
            res.onmousedown = function (e) {
               var d = document.getElementById('dialog');
               var computedStyle = d.currentStyle || window.getComputedStyle(d, null);
               d.style.height = computedStyle.height;
           }


В итоге при нажатии на рез размер высота диалога скачет вниз пикселей на 20 (только после 1го нажатия) . В чем может быть причина?

cyber 01.07.2012 20:44

function getComputed (obj){
	  
	  try{ 
	   return getComputedStyle(obj, null)
	   
	   } catch(e){ 
	      
		  return obj.currentStyle;
		   }
		
		};

или
function getComputed (obj){
    if ( obj.ownerDocument && obj.ownerDocument.defaultView ) {
        return obj.ownerDocument.defaultView.getComputedStyle( obj, null );
    } else if ( obj.currentStyle ) {
        return obj.currentStyle;
    }
    return null;
}

vadim5june 01.07.2012 20:46

я бы вместо
var computedStyle = d.currentStyle || window.getComputedStyle(d, null);
d.style.height = computedStyle.height;

написал бы d.style.height=d.offsetHeight+'px';

nuclear_kote 01.07.2012 23:23

Ни один из выше указанных способов не помог. Какая то проблема с падингами. При отображении они дают почему то меньшую высоту элемента, чем при их подсчете в getComputedStyle. Возможно ли как то решить эту проблему без перебора дочерних элементов или чего нибудь подобного?

devote 01.07.2012 23:37

var box = elem.getBoundingClientRect();

cyber 02.07.2012 00:24

Цитата:

Сообщение от devote (Сообщение 185742)
var box = elem.getBoundingClientRect();

полный вариант
var Obj = {
	
  positX : function (elem){
	
	 var body, html, scrollX, scrollY, box, x = 0, y = 0;	
	 
      box = elem.getBoundingClientRect();
	 
      body = document.body;
		
      html = document.documentElement;
		scrollX = window.pageXOffset || html.scrollLeft || body && body.scrollLeft  || 0;
		
		scrollX = html.scrollLeft || body && body.scrollLeft || 0;
		
		
		
		
		x = box.left + scrollX - (html.clientLeft || body.sclientLeft || 0);
		
	
	return Math.round(x);
	},
	
	positY : function (elem){
	
       var body, html, scrollX, scrollY, box, x = 0, y = 0;	
	  
      box = elem.getBoundingClientRect();
	    body = document.body;
		  html = document.documentElement;
		
		scrollY = window.pageYOffset || html.scrollTop || body && body.scrollTop || 0;
	
		scrollY = html.scrollTop || body && body.scrollTop || 0;
		
		y = box.top + scrollY - (html.clientTop || body.sclientTop || 0);
		
		
		
	
	return Math.round(y);
      
	}
};

oneguy 02.07.2012 21:45

Цитата:

Сообщение от nuclear_kote
В итоге при нажатии на рез размер высота диалога скачет вниз пикселей на 20 (только после 1го нажатия) . В чем может быть причина?

У меня ничего не скачет (браузер FF 12). Какой у вас браузер?


Часовой пояс GMT +3, время: 14:00.