11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Manipulation programmatique des balises body et html

Bonjour.

Je suis en train de bosser en ce moment sur une petite classe qui permet de mettre dans un site HTML un background en flash.

et, ( comme bien souvent malheuresement ) Bah IE6 , il est pas bien sympathique.

En fait je cherche a passer une des methode css qui permette de simuler un position:fixed sous IE, en javascript.
(http://forum.alsacreations.com/faq/faq-67-Position-fixed-sur-Internet-Explorer.html)

( j'utilise mootools dans le cas present pour simplifier la synthaxe, mais en js "traditionel" le prb est le meme )

donc,pour l'exemple, je souhaite passer le css suivant en js:


body {
  overflow: auto;
position:absolute;
}
#maBalise{
  width: 300,
   height: 400
}



en js:

$(maBalise).setStyles({
  width: 300,
   height: 400
 });


var oBody = document.body;
oBody.setStyles({
  overflow: auto;
position:absolute;
 });




En gros voila l'idée, sauf que si je souhaite modifier les attributs de <body> ou <html> sous IE 6 , mon body ne possede pas de style ( qui me dit le debbuggueur )


Donc est ce que quelqu'un aurait une idée pour que je puisse manipuler de facon programmatique mon body et mon html ( leur appliquer des styles / ou des classes .. )

( ps: j'ai essayé aussi des addClass avec des styles en dur, mais pareil, body ou html ne possede pas de tel propriété )


Merci d'avance
Modifié par dvbxyz (07 Nov 2007 - 20:35)
Salut dvbxyz,

var oBody = [b]$([/b]document.body[b])[/b];
oBody.setStyles({
  overflow: auto;
position:absolute;
 });
setStyles n'existe pas pour les objets non étendus
dvbxyz a écrit :
sous IE 6 , mon body ne possede pas de style
Fais bien attention quand tu accèdes à document.body que ce soit après son chargement par le navigateur. document.body.style existe bien quand l'élément body est disponible.
oui oui, je ma page est bien chargée..
Bon je met en dessous qques lignes de codes en plus pour recituer dans le contexte:

<script type="text/javascript">
var Flash_bg = new Class({
    initialize: function(){
		window.addEvent('resize', function(){		
			this.caller.setFlashSize();		
		});
  
    },
	getWin_width:function(){
		return (window.getWidth()+"px");
	},
	getWin_height:function(){
		return (window.getHeight()+"px");
	}
	
	
});

var F_bg_fixe = Flash_bg.extend({

    initialize: function(monFlash,monSite){
		this.parent();	   
		var monFlashBg		 = $(monFlash);		
		var monSiteContenaire = $(monSite);
		var oBody = document.body;
		var oHtml = document.getElementsByTagName('html')[0]
		
		this.monFlashBg = monFlashBg;
		this.oBody = oBody;
		this.oHtml = oHtml;		
		window.caller = this;
	   
	    monFlashBg.setStyles({
		   'position': 'fixed',
		   'zIndex':1
	   });	   
	    monSiteContenaire.setStyles({
		    'zIndex':2
	   });
	   this.setFlashSize();
		
		
    },
	
	setFlashSize:function(){
		this.monFlashBg.setStyles({
			'width': this.getWin_width(),
			'height': this.getWin_height(),
			'position':'fixed'
		 });
// C ICI QUE J'AI L'ERREUR //
		 this.oBody.setStyles({
			'width': this.getWin_width(),
			'height': this.getWin_height(),
			'position':'absolute'
		 });
			
	
		 
	}
});

	
	
function init(){
	var flashScreen = new F_bg_fixe('flash_bg','site_contenaire');
}
</script>


Et la fonction est lancé au load de la page
Ze Nenex a écrit :
Salut dvbxyz,

var oBody = [b]$([/b]document.body[b])[/b] // <<< LA;
oBody.setStyles({
  overflow: auto;
position:absolute;
 });
setStyles n'existe pas pour les objets non étendus
Comme dans le framework prototype, la fonction $ ne fait pas que renvoyer un élément du DOM, elle l'étend.
Sujet clos
Aller à