"Резиновость" элементов js?

Question

[Spegulo]

Есть ли способ определить, что размер какого-либо элемента страницы задан в %? в DOM как я понимаю, хранятся уже вычисленные значения, автоматически пересчитываемые при ресайзе.



Можно поставить вопрос иначе: можно ли каким либо образом изменять такие автоматически вычисленные размеры без потери «резиновости»?

Answer 1

[MyraJKee]

Зачем резиновому элементу проставлять размеры?
Резиновым он будет до тех пор пока его размеры определены в процентах. Поэтому собственно, для того чтобы элемент остался резиновым, размеры нужно задвать в %.

Comments

[Spegulo]

с помощью js я не могу узнать размеры элемента в % (или могу?). В DOM они уже в px. Мне хотелось бы иметь возможность подкорректировать размеры элемента после ресайза, когда в DOM опять px значения. Как браузер определяет, что элемент резиновый, если везде в DOM прописаны фактические размеры?

[MyraJKee]

Ну прежде всего html элементы бывают блочными и инлайновыми. Блочные по умолчанию занимают 100% ширины. Поэтому если вы уверены что не задавали в стилях ширину элемента, то она скорее всего будет 100%. Это по ходу касается не всех блочных элементов. Например таблица не растягивается на 100%, а скорее сжимается по содержимому.
Таблицы сейчас не будем обсуждать. Будем считать что вы пользуетесь div. Для того чтобы узнать резиновый ли див, нужно проверить:

1. Проставлена ли в аттрибутах style.width
2. Проставлено ли в css element.width

Вот например содрал откуда-то.

function getStyle(el, style) { 
   if(!document.getElementById) return;
  
    var value = el.style[toCamelCase(style)];
  
   if(!value)
     if(document.defaultView)
       value = document.defaultView.
          getComputedStyle(el, "").getPropertyValue(style);
    
     else if(el.currentStyle)
       value = el.currentStyle[toCamelCase(style)];
   
    return value;
 }

 function setStyle(objId, style, value) {
   document.getElementById(objId).style[style] = value;
 }

 function toCamelCase( sInput ) {
   var oStringList = sInput.split('-');
   if(oStringList.length == 1)  
     return oStringList[0];
   var ret = sInput.indexOf("-") == 0 ?
       oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1) : oStringList[0];
   for(var i = 1, len = oStringList.length; i < len; i++){
     var s = oStringList[i];
     ret += s.charAt(0).toUpperCase() + s.substring(1)
   }
   return ret;
 }

 function increaseWidth(addToWidth, whichDiv){
   var theDiv = document.getElementById(whichDiv);
   var currWidth = parseInt(getStyle(theDiv, "width"));
   var newWidth = currWidth + parseInt(addToWidth);
   setStyle(whichDiv, "width", newWidth + "px");
 }

[MyraJKee]

Хотя если задано в css, то ширина все равно в пикселях возвращается…

[MyraJKee]

Короче вам надо знать что если вы для блочного элемента не проставляли ширину в css или в аттрибутах, то он резиновый по умолчанию

[Zitrix]

getOverrideStyle хром с оперой не планируют реализовать-таки?

[Zitrix]

*фокс с оперой, опечатался

Answer 2

[web4_0]

document.getElementById(«element»).style.width

Comments

[MyraJKee]

Угу, а если ширина задана в css?

Answer 3

[Григорий]

Если я правильно понял, то:
находим ширину окна браузера (ШБрх) в пикселях, принимаем величину за 100%. ШБрх/100=величина_процента_в_пикселях (ВП). Находим ширину нужного элемента в пикселях (ШЭ).
ШЭ/ВП=процентное_отношение_ширины_элемента_к_ширине_окна.
Недавно такое делал — под рукой готового кода нет, но скажу что на JQuery делаеться на раз-два.