[JavaScript] <object>.style.float eigenschap wijzigen met JS - Softwareontwikkeling

woensdag 24 november 2004 11:29

Acties:

Webdeveloper

Topicstarter

Hallo!

Middels JavaScript probeer ik de "float" eigenschap van een afbeelding te wijzigen"

code:

1 2	var img = document.createElement('IMG'); img.style.float = 'left';

Als ik dat doe (in ieder geval in Mozilla), dan krijg ik een foutmelding:

Error ``SyntaxError: missing name after . operator'' [xs]

Waarschijnlijk wordt dit veroorzaakt, omdat float ook een JavaScript keyword is voor het definieren van een floating point variabele.

Nu vraag ik mij dus af, hoe ik dit style-property DAN moet aanpassen.

Zoeken op "style.float" in google levert louter pagina's op met als gevonden string: "style = 'float:xxx'".... ik kan google op geen enkele wijze duidelijk maken, dat ik echt letterlijk zoek op de string "style.float".

Naja ... ik hoop dat iemand me verder kan helpen. Alvast dank!

woensdag 24 november 2004 11:33

Acties:

André

Analytics dude

Gebruik eens Float met een hoofdletter

Werkt ook niet.

[edit]
Ik deed een wilde gok en het werkte ook nog

:

code:

1	img.style.styleFloat = "left";

[ Voor 70% gewijzigd door André op 24-11-2004 11:42 ]

woensdag 24 november 2004 11:43

Acties:

gvanh

Webdeveloper

Topicstarter

Nee, het is nogal vaag .... volgens mijn "JavaScript Bible" zou het moeten zijn: "styleFloat". Dat maakt dan dus:

code:

1	img.style.styleFloat = 'right';

Je kan daarna prachtig zeggen ...

code:

1	alert (img.style.styleFloat);

Je krijgt dan inderdaad "right" in de alert te zien ... maar helaas wordt het niet in de html toegevoegd, als ik de HTML bekijk dan wordt de float eigenschap niet aan de style='xxx' toegevoegd.

Raar he?

woensdag 24 november 2004 11:48

Acties:

André

Analytics dude

Ik heb het net lokaal getest en het word zeker aan de HTML toegevoeg, mijn plaatje floatte mooi naar rechts:

code:

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      function Init()
      { 
        var img = document.createElement('IMG');
        img.src = "fm.gif";
        img.style.styleFloat = "right";
        document.body.appendChild(img);
      }
    </script>
  </head>
  <body onload="Init()">
  </body>
</html>

woensdag 24 november 2004 12:03

Acties:

Rickets

Finger and a shift

gvanh schreef op woensdag 24 november 2004 @ 11:43:
Je krijgt dan inderdaad "right" in de alert te zien ... maar helaas wordt het niet in de html toegevoegd, als ik de HTML bekijk dan wordt de float eigenschap niet aan de style='xxx' toegevoegd.

Raar he?

Javascript past de HTML-broncode niet aan, dus het is niet zo raar dat je het niet ziet. Je hebt hiervoor een DOM-inspector nodig (zit bij de developer tools van Firefox bv.)
Bovendien werkt styleFloat niet in Mozilla, hiervoor heb je cssFloat nodig.

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

woensdag 24 november 2004 12:06

Acties:

Cyphax

Moderator LNX

Bovendien werkt styleFloat niet in Mozilla, hiervoor heb je cssFloat nodig.

Fijn, weer incompatibiliteit tussen die 2.
Als dat niet werkt, misschien kun je dan setAttribute gebruiken?
Andre:
img.style.styleFloat = "right";
setAttribute:
img.setAttribute("style", "float: right");

[ Voor 34% gewijzigd door Cyphax op 24-11-2004 12:06 ]

Saved by the buoyancy of citrus

woensdag 24 november 2004 12:53

Acties:

gvanh

Webdeveloper

Topicstarter

@Rickets:

Aha!

Die cssFloat, daar zat het hem inderdaad in... vandaar dat styleFloat het niet deed! Je moet het maar weten ... is dan toch weer het devies!

Daarnaast overigens even de volgende code:

code:

var div = document.createElement('DIV');
var img = document.createElement('IMG');
img.setAttribute("src", "plaatje.png");
if (document.all) {
  img.style.styleFloat = "right";
} else {
  img.style.cssFloat = "right";
}
div.appendChild(img);
alert(div.innerHTML);

Deze code maakt dus een DIV object en een IMG object. Het IMG object wordt toegevoegd aan de DIV. Vervolgens wordt de innerHTML van de DIV getoond.

Als ik dat (in Mozilla) doe, dan krijg ik keurig de volledige HTML voor de image te zien, inclusief " style='float:right;' ".

Op deze manier kun je dus wel degelijk kijken hoe de HTML van zelfgemaakte objecten eruit komt te zien. (En daarmee dus controleren of de attributes die je in JavaScript wijzigt, wel goed worden overgenomen.)

Dat wilde ik nog even melden.

[ Voor 12% gewijzigd door gvanh op 24-11-2004 12:54 ]