CSS mit javascript auslesen
|
|
 |
|
| Seiten:
1, 2 ›
|
|
gerisitin
|
 Verfasst am: 26.02.2012 um: 22:55 Uhr
|
Cw Posting Dude
CwID: 85510
Beiträge: 111
|
Guten Abend,
ich bin mir gerade mittels Java-Script ein kleines Windows 7 Gadget am basteln.
Ich versuche jetzt bereits seit mehreren Tagen zu erreichen, dass der Benutzer die Größe vom Gadget anpassen kann.
Also quasi was man im normalen browser mit "Strg und + " oder "Strg und -" einstellt, will ich in meinem gadget erreichen.
Ich habe mir überlegt zu diesem Zwecke mir von allen html-elementen folgende Attribute auslesen zu lassen: width, height, padding, margin, und Textgröße. Danach wollte ich diese mit einer benutzereingabe multiplizieren sodass das Verhältnis gleich bleibt.
Allerdings bekomme ich das auslesen der Daten nicht hin und bin auch im Internet noch nicht aufs richtige Thema gestoßen.
Die Werte versuche ich mittels Schleifen und getElementsByTagName(tag) zu ermitteln.
Folgendes klappt aber leider nicht:
document.getElementsByTagName(tag).style.width
Mit getElementByID klappt das ganze ohne Probleme. Allerdings müßte dann jedes Html - Element eine ID erhalten.
Womit ich meinen Ansatz mit den Schleifen vergessen kann und ich jedes Element von "Hand" abrufen müßte.
Also habe ich weitergesucht und bin auf folgendes gestoßen:
var alteBreite = document.getElementsByTagName('div')[1].getAttribute("st yle");
Ergebnis wenn direkt im html diklariert wurde --> width: 500px;
Ergebnis bei externen Css -Datei --> null
Erzielt also auch noch nicht das gewünshcte Ergebnis da alle daten in einer externen css liegen. Und "width:" stört bei dem anderen Ergebnis auch gewaltig.
Also noch ma kurz gesagt bin ich auf der suche nach dem Pendant zu
var alteBreite = document.getElementsByID(ID).style.width
nur mit
document.getElementsByTagName.
Eine andere Idee mit der ich das realisieren könnte, wäre mir natürlich genauso recht.
Vielen Dank.
|
|
|
|
|
e-kochbuch
|
Verfasst am: 07.03.2012 um: 22:31 Uhr
|
Cw's Alleinunterhalter
CwID: 168588
Beiträge: 305
|
Hallo! :)
Eigentlich ist dein Ansatz mit
document.getElementsByTagName(tag).style.width
richtig und müsste gehen, ABER:
Der Befehl sagt es eigentlich schon getElementsByTagName - d.h. es wird ein Array zurückgegeben den du mit einer for-Schleife durchlaufen musst. Denke mal, dass das der Fehler ist.
document.getElementsByTagName('div')[1].getAttribute("st yle")
bezieht sich tatsächlich nur auf das Attribut style im <div>-Tag. Und dieser ist ja nicht vorhanden, wenn du mit einem Stylesheet arbeitest.
Gruß Luk
|
|
|
|
|
Don-Joschi
|
Verfasst am: 08.03.2012 um: 03:01 Uhr
|
Cw Aufsteiger
CwID: 125703
Beiträge: 60
|
Danke, für die Tips, find ich echt super, das Umsetzen bereitet aber trotzdem einige Probleme.
|
|
|
|
|
tuts4you
|
Verfasst am: 08.03.2012 um: 08:41 Uhr
|
Cw Guru
CwID: 164600
Beiträge: 648
|
Weiss nicht ob Thread noch aktuell aber wenn man auf solche Threads schon antwortet:
var alteBreite = document.getElementsByTagName('div')[0].style.width;
müsste eigentlich funktionieren.
|
|
|
|
|
e-kochbuch
|
Verfasst am: 08.03.2012 um: 15:58 Uhr
|
Cw's Alleinunterhalter
CwID: 168588
Beiträge: 305
|
Oder die dynamische Variante:
var alteBreite = document.getElementsByTagName('div');
for (var i = 0; i <= alteBreite.length; i++)
{// so greifst du nacheinander auf jedes einzelne div zu
alert(alteBreite(i).style.width);
}
Keine Garantie, dass es geht. Aber ich denk schon :)
WICHTIG: Verwende in der Zeile mit dem alert bitte eckige Klammern um das i! Also [ und ].
Wenn ich das hier so eingebe, dann wird das von der Forensoftware immer durch <i> ersetzt (=HTML für FETT).
Letzte Änderung am: 08.03.2012 um: 16:03 Uhr durch: e-kochbuch
|
|
|
|
|
tuts4you
|
Verfasst am: 08.03.2012 um: 16:00 Uhr
|
Cw Guru
CwID: 164600
Beiträge: 648
|
@e-kochbuch: ne so gehts nicht. Meines war nur ein anstuper in die richtige richtung da er ja schon von Schleiffen gesprochen hat. Folgendes wäre richtig:
for (var ind = 0; ind <= alteBreite.length; ind++)
{
alert(alteBreite[ind].style.width);
}
Edit: Der Editor wirft den Index anscheinend raus :S Somit hast du wahrscheinlich ebenfalls die richtige Lösung angegeben ;) Sorry
Schau doch mal vorbei bei http://tuts4you.de :)
Letzte Änderung am: 08.03.2012 um: 16:04 Uhr durch: tuts4you
|
|
|
|
|
e-kochbuch
|
Verfasst am: 08.03.2012 um: 16:04 Uhr
|
Cw's Alleinunterhalter
CwID: 168588
Beiträge: 305
|
Nein, habe ich nicht 
Der wird von der Foren-SW durch <i> ersetzt. (BBCode für HTML Fett)
Bei dir ist das selbe.
Habe meinen Post oben übrigens schon editiert^^
Aber Danke für dein Adlerauge :)
|
|
|
|
|
gerisitin
|
Verfasst am: 08.03.2012 um: 19:15 Uhr
|
Cw Posting Dude
CwID: 85510
Beiträge: 111
|
Also klappt immer noch nciht so wirklich habe immer noch probleme beim auslesen der Daten.
Alert öffnet sich zwar ist allerdings leer.
Was ist nun an folgender Datei falsch?
Ich kriege immer noch nicht die Breite ausgelesen.
<html>
<head>
<title>Test</title>
<style type="text/css">
.normal { font-style:normal }
#test{
background-color: red;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
function klick1(zahl) {
var alteBreite = document.getElementsByTagName('div');
for (var i = 0; i <= alteBreite.length; i++)
{// so greifst du nacheinander auf jedes einzelne div zu
alert(alteBreite .style.width);
}
}
function klick3(zahl) {
var alteBreite = document.getElementsByTagName('div')[0];
alert(alteBreite.style.width);
}
</script>
</head>
<body>
<p><a href="javascript:klick1(2)">3</a></p>
<p><a href="javascript:klick3(2)">3</a></p>
<div id="test"></div>
</body>
</html>
|
|
|
|
|
e-kochbuch
|
Verfasst am: 08.03.2012 um: 19:37 Uhr
|
Cw's Alleinunterhalter
CwID: 168588
Beiträge: 305
|
Schau dir mal http://forum.de.selfhtml.org/archiv/2011/1/t202959/ und http://help.dottoro.com/ljawilqu.php an.
getComputedStyle ist dein Freund. Ich habs probiert - das klappt.
Musst es dir halt noch etwas anpassen.
Letzte Änderung am: 08.03.2012 um: 19:38 Uhr durch: e-kochbuch
|
|
|
|
|
gerisitin
|
Verfasst am: 09.03.2012 um: 19:09 Uhr
|
Cw Posting Dude
CwID: 85510
Beiträge: 111
|
Ja wunderbar. Du hast recht getComputedStyle ist mein Freund. GetComputedStyle war sozusagen das fehlende Puzzelstück.
Hier noch mal mein Code bis jetzt. (Momentan noch etwas unübersichtlich und an der ein oder anderen Stelle könnte man auch eleganter Schreiben aber fürs erste funktionierts und vielleicht hilfts ja sonst noch wem)
<html>
<head>
<title>Test</title>
<style type="text/css">
.normal { font-style:normal }
*{
font-size: 20px;
}
#test{
background-color: red;
padding: 10px;
width: 100px;
height: 100px;
font-size: 10px;
}
#test2{
background-color: blue;
width: 50px;
height: 100px;
}
#test3{
background-color: yellow;
width: 50px;
height: 100px;
margin: 25px;
}
</style>
<script type="text/javascript">
function klick(multiplikator)
{
//Popertyindex = www.w3.org/TR/1998/REC-CSS2-1998051...
var tags = new Array('body', 'div', 'p', 'img', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'table', 'th', 'tr', 'td', 'a', 'span', 'input', 'button', 'hr');
for (var tag=0; tag<tags.length; tag++)
{
var i = 0;
while(document.getElementsByTagName(tags[tag]) )
{
/*********************
** BREITE ÄNDERN **
*********************/
var elem = document.getElementsByTagName(tags[tag]);
var alteBreite = window.getComputedStyle(elem,null).getPropertyValue("width" );
//px wird entfernt Alternativ: alteBreite = alteBreite.replace(/\D/g, "");
alteBreite = alteBreite.replace(/[^0-9]/g, "");
var neueBreite = alteBreite * multiplikator;
//px wieder anhängen
neueBreite = neueBreite+'px';
document.getElementsByTagName(tags[tag]).style.width = neueBreite;
/*********************
** HÖHE ÄNDERN **
*********************/
var elem = document.getElementsByTagName(tags[tag]);
var alteHoehe = window.getComputedStyle(elem,null).getPropertyValue("height" ;);
//px wird entfernt Alternativ: alteHoehe = alteHoehe.replace(/\D/g, "");
alteHoehe = alteHoehe.replace(/[^0-9]/g, "");
var neueHoehe = alteHoehe * multiplikator;
//px wieder anhängen
neueHoehe = neueHoehe+'px';
document.getElementsByTagName(tags[tag]).style.height = neueHoehe;
/*********************
** MARGIN ÄNDERN **
*********************/
var elem = document.getElementsByTagName(tags[tag]);
var alteMarginTop = window.getComputedStyle(elem,null).getPropertyValue("margin-top& quot;);
var alteMarginBottom = window.getComputedStyle(elem,null).getPropertyValue("margin-bott om");
var alteMarginLeft = window.getComputedStyle(elem,null).getPropertyValue("margin-left ");
var alteMarginRight = window.getComputedStyle(elem,null).getPropertyValue("margin-righ t");
//px wird entfernt Alternativ: alteMargin = alteMargin.replace(/\D/g, "");
alteMarginTop = alteMarginTop.replace(/[^0-9]/g, "");
alteMarginBottom = alteMarginBottom.replace(/[^0-9]/g, "");
alteMarginLeft = alteMarginLeft.replace(/[^0-9]/g, "");
alteMarginRight = alteMarginRight.replace(/[^0-9]/g, "");
var neueMarginTop = alteMarginTop * multiplikator;
var neueMarginBottom = alteMarginBottom * multiplikator;
var neueMarginLeft = alteMarginLeft * multiplikator;
var neueMarginRight = alteMarginRight * multiplikator;
//px wieder anhängen
neueMargin = neueMarginTop+'px '+neueMarginBottom+'px '+neueMarginLeft+'px '+neueMarginRight+'px';
document.getElementsByTagName(tags[tag]).style.margin = neueMargin;
/**********************
** PADDING ÄNDERN **
**********************/
var elem = document.getElementsByTagName(tags[tag]);
var altePaddingTop = window.getComputedStyle(elem,null).getPropertyValue("padding-top ");
var altePaddingBottom = window.getComputedStyle(elem,null).getPropertyValue("padding-bot tom");
var altePaddingLeft = window.getComputedStyle(elem,null).getPropertyValue("padding-lef t");
var altePaddingRight = window.getComputedStyle(elem,null).getPropertyValue("padding-rig ht");
//px wird entfernt Alternativ: altePadding = altePadding.replace(/\D/g, "");
altePaddingTop = altePaddingTop.replace(/[^0-9]/g, "");
altePaddingBottom = altePaddingBottom.replace(/[^0-9]/g, "");
altePaddingLeft = altePaddingLeft.replace(/[^0-9]/g, "");
altePaddingRight = altePaddingRight.replace(/[^0-9]/g, "");
var neuePaddingTop = altePaddingTop * multiplikator;
var neuePaddingBottom = altePaddingBottom * multiplikator;
var neuePaddingLeft = altePaddingLeft * multiplikator;
var neuePaddingRight = altePaddingRight * multiplikator;
//px wieder anhängen
neuePadding = neuePaddingTop+'px '+neuePaddingBottom+'px '+neuePaddingLeft+'px '+neuePaddingRight+'px';
document.getElementsByTagName(tags[tag]).style.padding = neuePadding;
/**********************
** FONTSIZE ÄNDERN **
**********************/
var elem = document.getElementsByTagName(tags[tag]);
var alteFontsize = window.getComputedStyle(elem,null).getPropertyValue("font-size&q uot;);
//px wird entfernt Alternativ: alteFontsize = alteFontsize.replace(/\D/g, "");
alteFontsize = alteFontsize.replace(/[^0-9]/g, "");
var neueFontsize = alteFontsize * multiplikator;
//px wieder anhängen
neueFontsize = neueFontsize+'px';
document.getElementsByTagName(tags[tag]).style.fontSize = neueFontsize;
i++;
}
}
}
</script>
</head>
<body>
<a href="javascript:klick(2)">3</a>
<div id="test">text</div>
<p id="test2"></p>
<div id="test3">123</div>
</body>
</html>
Vielen Dank für eure Hilfe
Letzte Änderung am: 09.03.2012 um: 19:10 Uhr durch: gerisitin
|
|
|
|
|
|
| Seiten:
1, 2 ›
|
|
 |
Folgende User sind hier gerade aktiv:
-
| ANZEIGE
|
