Autor Zpráva
weroro
Profil
Zdravím,

dá sa prosím nejakým spôsobom pomocou JS, zistiť hodnota padding, ktorú zadám nejakému elementu pomocou CSS?
Vytvoril som si script (kaskádové menu), kde skrývam pomocou zmeny height daného elementu nejaký obsah. Problém je ten, že ak zadám danému obsahu (obalu, s ktorým pracujem v JS), nejaký padding, tak mi scrollHeight vráti síce "výšku" toho DIVu, ale nezapočíta do toho ten padding a tak tú hodnotu musím do JS zadávať zvlášť a to mi príde nepohodlné. Keď tam ten padding nezadám, tak ako náhle bude height 0px, stále vidno kus obsahu lebo je tam padding a chcem ho tiež pomocou JS znížiť na 0, ale nedokážem zistiť jeho počiatočnú hodnotu, od ktorej mám odčítavať.

Mohli by ste mi prosím niekto, poradiť ako to vyriešiť?
Ďakujem za odpovede.
preca1
Profil
Zdravim,
el.style.padding.
Možná by ale bylo lepší při nulový výšce nastavit display = none.
Možná když dáš odkaz na živou ukázku, poradíme ti lepší řešení.
weroro
Profil
element.style.padding vracia prázdnu hodnotu. Na to aby mi to vrátilo nejakú hodnotu, musel by som ten padding zadať pomocou JS, ale ja som ho zadal v CSS.

display: 'none'; samozrejme používam, ale zadefinujem ho až potom ako má DIV nastavenú výšku na 0.
Je to animované (z 100px sa animovane DIV zmenší na 0px a potom zadefinujem display:'none'; - Avšak ak je tam padding, tak aj pri height:0px; má ten div stále výšku.). Nemám rád jQuery, tak si to píšem sám.


Chcem dosiahnuť toto http://jqueryui.com/accordion/
teda už som to dosiahol ale posledný krok mi to skočí a nejde plynule, lebo je tam ten padding a aj ten potrebujem, postupne zmenšiť cez JS.
Someone
Profil
getComputedStyle
weroro
Profil
Ďakujem a neexistuje niečo, čo by fungovalo v IE7-8? Ak nie, bohate postačí aspoň toto. :)
Chamurappi
Profil
Reaguji na werora:
Ano, existuje element.currentStyle.
Ale čtení přímo ze stylů mi připadá ošklivé, styly beru jako formátování výstupu, nikdy jako vstup. Ve tvém případě bych raději přidal obalující element a měnil rozměry jemu.

element.style.padding vracia prázdnu hodnotu. Na to aby mi to vrátilo nejakú hodnotu, musel by som ten padding zadať pomocou JS
Nebo do atributu style přímo v HTML.
weroro
Profil
Super, o currentStyle som nevedel. Veľmi pomohlo.
Teraz mám funkciu:
function CSShodnota(obj, atribut)
{
    var vystup = '';
    if (document.defaultView && document.defaultView.getComputedStyle)
    {
        vystup = document.defaultView.getComputedStyle(obj, '').getPropertyValue(atribut);
    }
    else if (obj.currentStyle)
    {
        atribut = atribut.replace(/\-(\w)/g, function (str, o)
        {
            return o.toUpperCase();
        });
        vystup = obj.currentStyle[atribut];
    }
    return vystup;
}
a použijem to napr. takto:
element.skutocnaVyska = parseFloat(CSShodnota(element, "height"));
if (navigator.userAgent.toUpperCase().indexOf('MSIE') != -1)
{
    element.skutocnaVyska = element.scrollHeight - (parseFloat(CSShodnota(element, "padding")) * 2);
}

Problém vyriešený.
Chamurappi
Profil
Reaguji na werora:
document.defaultView
V této vlastnosti je window. Takže getComputedStyle je vlastně globální funkce.

getPropertyValue(atribut)
Pokud se nemýlím, tak getComputedStyle vrací v podstatě stejný objekt, jaký je v currentStyle. Není důvod to nějak složitě podmínkovat…

(navigator.userAgent.toUpperCase().indexOf('MSIE') != -1)
Uf. Proč?
A proč se vlastně zajímáš konkrétně o scrollHeight?

Problém vyriešený.
Ale hnusně.
weroro
Profil
Chamurappi:
A proč se vlastně zajímáš konkrétně o scrollHeight?
Pretože iné riešenie ako v IE (7) zistiť výšku elementu, ktorá je defaulte auto (prispôsobuje sa obsahu) sa mi nepodarilo dohľadať.
Tá funkcia, ktorú som vytvoril mi totiž nevráti ako v ostatných prehliadačoch hodnotu [číslo]px ale proste iba auto.
Chamurappi
Profil
Reaguji na werora:
Obvykle se používá spíš offsetHeight.

mi totiž nevráti ako v ostatných prehliadačoch hodnotu [číslo]px ale proste iba auto
A to je důvod k testování, jestli je v userAgentovi řetězec "MSIE"? Jak spolu tyto dvě věci souvisí?
Narazíš mimochodem i v situacích, kdy bude padding uvedený v jiných jednotkách než v pixelech.

Změna výšky u obalu, který nemá ani padding, ani border, je mnohem pohodlnější. Řešil bych to tak, i kdybych si ten obal musel vyrobit skriptem.
weroro
Profil
Chamurappi:
A to je důvod k testování, jestli je v userAgentovi řetězec "MSIE"? Jak spolu tyto dvě věci souvisí?

Momentálne to mám takto (spolieham sa jednotky px):

Vezmem výšku elementu pomocou tej funkcie. (funkcia vráti [číslo]px, tak to floatnem).
element.skutocnaVyska = parseFloat(CSShodnota(element, 'height'));
IE mi avšak nevráti číslo ale iba slovo auto, tak danú hodnotu testujem ešte raz.
if(navigator.userAgent.toUpperCase().indexOf('MSIE') != -1)
{
  var pt = parseFloat(CSShodnota(element, 'paddingTop'));
  var pb = parseFloat(CSShodnota(element, 'paddingBottom'));
  element.skutocnaVyska = element.scrollHeight - (pt + pb);
}
Odpodmienkujem si IE a danú výšku zistím tak, že zmeriam scrollHeight a od tej hodnoty odčítam paddingy (Top a Bottom), ktoré si zistím pomocou tej funkcie CSShodnota().
Výsledok je rovnaký ako v ostatných prehliadačoch.

offsetHeight skúsim, možno to vráti práve lepšie číslo a nebudem musieť odčítavať.
Chamurappi
Profil
Reaguji na werora:
Momentálne to mám takto
Já pochopil, jak ten tvůj kód funguje, ale stejně nerozumím, jak spolu souvisí řetězec userAgent a podpora getComputedStyle. Proč nepodmínkuješ konkrétní jev, který ošetřuješ, ale název prohlížeče? To je přeci hloupé.

Výsledok je rovnaký ako v ostatných prehliadačoch.
Jakmile přidáš border, bude výsledek jiný a bude se lišit i v Exploreru 9, přestože ten podporuje getComputedStyle.
Z jakého důvodu vlastně tu větev, kterou teď podmínkuješ na název prohlížeče, nevykonáváš ve všech prohlížečích? Měla by v nich fungovat také. Úmyslně si do budoucna vyrábíš potenciální nekompatibilitu.

offsetHeight skúsim, možno to vráti práve lepšie číslo
Vrátí stejné, protože máš automatickou výšku. Ve scrollHeight je výška, kterou by chtěl obsah elementu zabrat, v offsetHeight výška, kterou element opravdu zabírá ve vztahu k okolí.
weroro
Profil
Chamurappi:
Pravda pravdúca. Je s tým problém v IE9-10. "Opravil" som to po svojom (vypustil som kontrolu userAgent a použil podmienené komentáre v HTML)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: