| Autor | Zpráva | ||
|---|---|---|---|
| xlifer Profil |
#1 · Zasláno: 9. 8. 2011, 21:43:52 · Upravil/a: xlifer
Když vytvořím blok přes createElement, kterému následně přiřadím className, tak při pokusu o přečtení hodnoty stylu hlásí JS, že undefined? Lze hodnoty nějak přečíst? U klasického HTML prvku, tato metoda funguje...
<style type="text/css">
.nejakyStyl {
position: absolute;
width: 100px;
height: 200px;
color: white;
padding: 5px;
}
</style>
<script type="text/javascript">
function vlozBlok() {
blok = document.createElement("div");
blok.id = "ideckoBloku";
blok.className = "nejakyStyl";
document.body.appendChild(blok);
}
vlozBlok();
var hodnotaCss = document.getElementById("ideckoBloku");
alert(hodnotaCss.width); // tady se hlásí hodnota width jako undefined, ale ve stylu je nastavená?
</script> |
||
| DarkMeni Profil |
#2 · Zasláno: 9. 8. 2011, 21:54:56
Zkus to takto:
var hodnotaCss = document.getElementById("ideckoBloku").style;
alert(hodnotaCss.width);
|
||
| xlifer Profil |
#3 · Zasláno: 9. 8. 2011, 22:12:46
DarkMeni:
Tohle už nehází undefined, ale chodí pouze prázdná hodnota? |
||
| DarkMeni Profil |
#4 · Zasláno: 10. 8. 2011, 09:39:25 · Upravil/a: DarkMeni
Zajímavý, mě to většinou házelo auto nebo nastavenou hodnotu (používal jsem na to ještě jeden skript který to tahal z "defaultView.getComputedStyle..."), jinak jestli chceš zjistit šířku tak na to můžeš zkusit offsetWidth, ten ti ale řekne jakou šířku ten element opravdu má (někde to ignoruje rámečky ale ten, jak koukám tenhle element nemá), takže když máš ve stylech 100px ale dovnitř mu dáš obrázek který ho roztáhne na 250px tak ti nevrátí těch 100px co máš nastaveno ve stylech ale vrátí 250.
//Vypadá to pak takle:
var Width = document.getElementById("ideckoBloku").offsetWidth;
alert(Width);
|
||
| xlifer Profil |
#5 · Zasláno: 10. 8. 2011, 12:41:52 · Upravil/a: xlifer
DarkMeni:
Nejde mi pouze o šířku, ale obecně i o další attributy stylu jako např. color, padding, apod. Zkrátka vše co ma styl nastavené, tak zda je možné nebo resp. proč není možné tyto hodnoty přečíst? Pročítal jsem ješte info ohledně getElementById a nevím jestli jsem správně pochopil, že to může mít také nějaký vliv na DTD dokumentu... Vše zkouším na !doctype html public "//W3C//DTD HTML 4.01 Transitional//EN" Vím, že 4.01 není dnes už nejnovější a doporučuje se XHTML, ale to bych nechtěl řešit, pokud to nebude mít zásadní vliv na chování zmíněného problému.. |
||
| Chamurappi Profil |
#6 · Zasláno: 10. 8. 2011, 13:04:36 · Upravil/a: Chamurappi
Reaguji na xlifera:
Vlastnost element.style reprezentuje atribut style na příslušném elementu. Nemůžeš z ní vyčíst styly definované ve stylopisu.
Existují postupy, jak zjistit vypočtenou hodnotu, kterou prohlížeč skutečně používá, ale žádný nefunguje ve všech prohlížečích. Proč ji potřebuješ zjistit? Většinou to není nutné, vyplatí se vnímat CSS formátování jako výlučně výstupní činnost. „že to může mít také nějaký vliv na DTD dokumentu“ Prohlížeč nečte DTD (to je ten externí soubor na w3.org), o <!doctype> se zajímá jen za účelem zjištění režimu.
„4.01 není dnes už nejnovější a doporučuje se XHTML, ale to bych nechtěl řešit“ Opravdové XHTML nefunguje v části prohlížečů a neopravdové je pořád HTML, absolutně bez vlivu na funkčnost. |
||
| xlifer Profil |
#7 · Zasláno: 10. 8. 2011, 14:28:53 · Upravil/a: xlifer
Chamurappi:
"Existují postupy, jak zjistit vypočtenou hodnotu, kterou prohlížeč skutečně používá, ale žádný nefunguje ve všech prohlížečích. Proč ji potřebuješ zjistit? Většinou to není nutné, vyplatí se vnímat CSS formátování jako výlučně výstupní činnost. " Pokud nelze, tak se to musí brát jako fakt s tím tedy nic nuděláme. Proč jsem to chtěl? Představ si nějaký element uvnitř kódu s idečkem, který může mít různé velikosti podle obsahu, takže různě přidělené sytly jako např. blok1, bkol2, apod. Tyto bloky se snažím vycentrovat protože mají různé šířky, vyšky, padding, apod. Takže jsem si chtěl v javascriptu do funkce načíst podle idečka, které je pořád stejné, co má blok aktuálně za parametry a podle toho počítat centrování apod., takže abych nemusel mít napevno v JS definované, že např. blok1 má šířku a výšku takovou, apod. Snad jsem to napsal k pochopení... |
||
| Chamurappi Profil |
#8 · Zasláno: 10. 8. 2011, 14:31:13
Reaguji na xlifera:
Rozměry jde přeměřit pomocí zmíněných vlastností offsetWidth a offsetHeight.
Na centrování vesměs čehokoliv by mělo stačit samotné CSS. |
||
| DarkMeni Profil |
#9 · Zasláno: 10. 8. 2011, 17:31:33
Z dlouhé chvíle jsem něco napsal ale nevim jak se do bude chovat jinde než v Mozzile Firefox 3, kde mi to částečně funguje.
//Decimal
//Pro převod "rgb(rrr, ggg, bbb)" do rrggbb formátu
function Decimal(Num){return (Num < 16 ? "0" : "") + Num.toString(16);}
//cssProperty
//Kdyby bylo třeba odstranit pomlčky
function cssProperty(property){
var result = property;
if(property.indexOf("-") > -1){
var split = property.split("-");
var result = split[0];
for(var S = 1; S < split.length; S++){
var nextChar = split[S].charAt(0).toUpperCase();
result += nextChar + split[S].slice(1, split[S].length);
}
}
return result;
}
//getCurrentStyle
//Tohle by mělo umět css vlastnost přečíst
Element.prototype.getCurrentStyle = function(property, RGB){
var result = '';
if(this.currentStyle){
var property = cssProperty(property);
var result = this.currentStyle[property];
}else if(document.defaultView){
var result = document.defaultView.getComputedStyle(this, '').getPropertyValue(property);
}else if(this.style[property]){
var result = this.style[property];
}
if(RGB){
if(result.charAt(0) == '#'){
var result = result.slice(1, 8);
}
else if(result.charAt(0) == 'r'){
var value = result.slice(result.indexOf('(')+1, result.indexOf(')') );
var split = value.split(',');
var result = (Decimal(parseInt(split[0])) + Decimal(parseInt(split[1])) + Decimal(parseInt(split[2])));
}
}
return result;
}
//A použít by se dala takto:
alert(document.getElementById("ideckoBloku").getCurrentStyle("background-color", true));
Ale jediný důvod k čemu je tahle funkce vlastně dobrá je asi k zjištění barvy nebo pozadí - kdyby to bylo někdy náhodou třeba. |
||
|
Časová prodleva: 13 let
|
|||
0