| Autor | Zpráva | ||
|---|---|---|---|
| weroro Profil |
#1 · Zasláno: 1. 4. 2013, 14:44:55
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 |
#2 · Zasláno: 1. 4. 2013, 16:02:02
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 |
#3 · Zasláno: 1. 4. 2013, 16:06:42 · Upravil/a: weroro
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 |
#4 · Zasláno: 1. 4. 2013, 16:17:47
|
||
| weroro Profil |
#5 · Zasláno: 1. 4. 2013, 16:23:51
Ďakujem a neexistuje niečo, čo by fungovalo v IE7-8? Ak nie, bohate postačí aspoň toto. :)
|
||
| Chamurappi Profil |
#6 · Zasláno: 1. 4. 2013, 16:37:33
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;
}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 |
#8 · Zasláno: 1. 4. 2013, 18:27:57
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 |
#9 · Zasláno: 1. 4. 2013, 19:31:23
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 |
#10 · Zasláno: 2. 4. 2013, 18:44:06
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')); 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);
}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 |
#12 · Zasláno: 3. 4. 2013, 09:29:56
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 |
#13 · Zasláno: 4. 4. 2013, 19:38:37
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) |
||
|
Časová prodleva: 11 let
|
|||
0