✔ Layerbreite aus JavaScript Variable ermitteln?

B

BitMan

Erfahrenes Mitglied
Hi All,

ich möchte die Größe eines DIV Layers mit JavaScript bestimmen.
Wie übergebe ich diesen Wert dann an den DIV-Layer?

Beispiel JavaScript:
Code: 
function GetSize()
{
return document.body.clientWidth;
}

Beispiel DIV-Style im Header
Code: 
#text_body {
position:absolute;
width:GetSize(); // geht nicht!	
z-index:9999;
}

Merci für jede Hilfe....
cu s00n,
BitMan
 
Sollte dein 2. Codeschnipsel css sein, dann kannst du darin logischerweise kein JavaScript verwenden.

Du müsstest die Breite des div per JavaScript ändern.
zB
Javascript: 
document.getElementById("div").style.width = getSize();

Beispielsweise so
HTML: 
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        div
        {
            border: 1px solid black;
            width: 50px;
            height: 100px;            
        }
    </style>
    <script language="javascript">
        function setWidth(elem)
        {
            elem.style.width = "100px";
        }
    </script>
</head>
<body>
<div onclick="setWidth(this);">lorem ipsum</div>
</body>



Durch klicken auf das div wird in diesem Beispiel die Breite auf 100px gesetzt.

lg Masda
 
hmmm... sieht interessant aus, ich nehme an es gibt auch eine Methode die beim ersten auftauchen funktioniert? OnLoad? Oder bezieht sich die dann nur auf den Body-Tag? Ich müsste die Größe des DIV nur beim Laden beeinflussen!


Hmmm.... Versucht aber entweder total daneben oder was ich will geht nicht.
Habe links und rechts je ein DIV von 165 px breite. In der MItte soll nun ein Div das für Textausgaben den Rest des Schirmes füllt, abz. ein wenig Rand zu den äußeren Divs...

Nach Deinem Beispiel dachte ich mal so:
Code: 
<div id="text_body" onload="SetSize(this);">
Das ist mein Beispiel-Text mit dem ich darstellen will, das der Text nicht &uuml;ber die Banner r&uuml;bergehen wird, egal wie lang der Text auch sein mag!
</div>
 
Zuletzt bearbeitet:
Also :)

ein <div> Tag hat kein onload Attribut, deshalb musst du das, sofern du es beim Laden der Seite schon anpassen willst im body Tag aufrufen.

hab dir hier noch ein Beispiel gebastelt, um die Breite des div auf die Fenstergröße zu bringen ;)
HTML: 
<head>
    <style type="text/css">
        div
        {
            border: 1px solid black;         
            height: 100px;            
        }
    </style>
    <script language="javascript">
        function setWidth(elemID)
        {
            document.getElementById("div").style.width = document.body.clientWidth + "px";
        }
    </script>
</head>
<body onload="setWidth('div');">
<div id="div">lorem ipsum</div>
</body>

Nach diesem Beispiel wird die Breite des div's exakt auf die Breite von body angepasst.

Solltest du noch rechts und links etwas Rand brauchen, könntest du zB folgenden Code in die Funktion einbauen. Natürlich kannst du auch einfach einen fixen Pixelwert von "document.body.clientWidth" abziehen.

Javascript: 
aussenrand = document.getElementById("randdiv_links").clientWidth;
aussenrand += document.getElementById("randdiv_rechts").clientWidth;
aussenrand += 100; // 100 = gewünschter Außenabstand * 2 (da rechts und links)
document.getElementById("div").style.width = document.body.clientWidth - aussenrand + "px";

lg Masda


PS: du darfst nicht vergessen, vor der Zuweisung noch "px" an die Breite zu hängen.
 
Klasse... Nun geht es...

Kannst mir eine gute Online-Referenz empfehlen, wo mit Kurzbeispielen solche Tricks beschreiben werden?

Wie verhält sich das bei anderen Browsern als dem IE?
 
Also dieses Beispiel müsste laut selfhtml in allen gängigen Browsern funktionieren.

bzgl der Referenz(en):
selfhtml
developer.mozilla.org


Ich verwende eigentlich nur selfhtml, aber letztere ist auch empfehlenswert. Sicher gibt es noch hunderte anderer Referenzen, aber da dürftest du durch google bzw die Forumssuche sicher noch einige mehr finden ;)

lg Masda
 
Zuletzt bearbeitet:
Biergamasda hat gesagt.:
Also dieses Beispiel müsste laut selfhtml in allen gängigen Browsern funktionieren.

bzgl der Referenz(en):
selfhtml
developer.mozilla.org


Ich verwende eigentlich nur selfhtml, aber letztere ist auch empfehlenswert. Sicher gibt es noch hunderte anderer Referenzen, aber da dürftest du durch google bzw die Forumssuche sicher noch einige mehr finden ;)

lg Masda
Zum Vergrößern anklicken....

thx, damit komm ich weiter...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück