11523 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Recuperation parametre JS et feuille CSS

Bonjour a tous,
J'ai un petit souci

je suis en plain recriture de mon site web, et car je veut separer le contenu de comportement j'ai mis tout les parametres des mes <div> dans un ficher css

maintenant je peut plus recupere le parametres avec mes functions javascript

Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>letitre</title>
....
 content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script language="JavaScript" src="scroll.js" type="text/javascript"></script>

</head>

<body>
        <div id="Ltxt" > ABCDEFGHIJK.. </div>
</body>


style.css

  body, td, th { color: #000000;
    background-color: #FFFFFF;
	font-family: Century Gothic, Arial, Courier;
	font-size: 12px;
    }

  #Ltxt {
	position: absolute;
	left:10px;
	top:10px;
	width:310px;
	height:880px; 
	z-index:11; 
	clip: rect(0px,auto,370px,auto);
        padding-left: 5px;
	padding-right: 5px;
	color: #000000;
    }



scroll.js

window.onload=init;
function init(){
Ltxt_top=document.getElementById('Ltxt').style.top;		
Ltxt_top=(Ltxt_top.substring(0,Ltxt_top.indexOf('px')))*1;//and convert to num

alert(Ltxt_top);
}


le problmes c'est que j'ai rien qui est defini dans


document.getElementById('Ltxt').style.top


document.getElementById('Ltxt').style.top.length==0

alor que avant avec ma ancienne page html

<body>
    <div id="Ltxt" style="position:absolute; left:10px; top:10px;     width:310px; height:880px; z-index:11";clip: rect(0px,auto,370px,auto);"> ABCDEFGHIJK.. 
</div> 
</body>


ca marche tres bien...

quelq'un peut m'aider ??
c'est parce que style.top n'est pas XHTML ??? (la je dis une betise peut etre)

merci
Modifié par thetoad (11 May 2005 - 14:35)
Il faut utiliser : 
window.getComputedStyle(document.getElementById('Ltxt'),null).getPropertyValue('top')

sauf pour IE :
document.getElementById('Ltxt').currentStyle.top


D'où la fonction proposée par Quirksmode pour unifier tout ça :
function getStyle(el,styleProp)
{
	var x = document.getElementById(el);
	if (window.getComputedStyle)
		var y = window.getComputedStyle(x,null).getPropertyValue(styleProp);
	else if (x.currentStyle)
		var y = eval('x.currentStyle.' + styleProp);
	return y;
}

[Attention cependant, avec cette fonction les propriétés de style contenant un tiret (background-color, etc.) poseront problème sous IE (où il faudrait utiliser backgroundColor). Si tu en as besoin il faudra donc modifier la fonction (exemple).]

Les propriétés element.style.* sont destinées à contenir uniquement les valeurs pour les styles en-ligne (balise style="…"), c'est pour ça que ça marchait chez toi avant que tu n'"externalises" les CSS. Et elles sont toujours valables en XHTML bien sûr Smiley smile
djfeat a écrit :

Les propriétés element.style.* sont destinées à contenir uniquement les valeurs pour les styles en-ligne (balise style="…")


Ahh ? et depuis quand ?? !
Je me suis mal exprimé, j'aurais dû préciser "avant modification par un script quelconque". Elles sont bien entendu accessibles en lecture ET en écriture.
Nan, mais tu peux très bien accéder aux styles d'une feuille de style externe interne ou en ligne via element.style

Tout élément de style de la page est accessible comme ça. En lecture et en écriture. Pas seuleument les styles en ligne du type style=".."
Ben écoute la preuve que non, je me suis déjà cassé les dents dessus et qu'il arrive le même problème à thetoad.

En plus selon Quirksmode :
a écrit :
The style property only reflects the inline styles of an element, so if you want to read out other styles you have to resort to other means.
Merci djfeat, Olivier et Bobe pour vos reponses rapides.

en pratique mon

Ltxt_top=document.getElementById('Ltxt').style.top;


devien 

Ltxt_top=document.styleSheets('Ltxt').????


vous avez des lien avec une bonne explcation de document.styleSheets
apres je peut trouver tout seul
Smiley jap

Ciao
Salut Olivier.
ton style est entierment dans un fichier css externe ???

parceque chez moi ca marche pas ni avec firefox ni avec IE

mais je vais essaier avec la function de Quirksmode propose par djfeat...

merci Bobe je vais voir les liens pour faire une mise a jour de mon cervaux Smiley cligne

a suivre...
Modifié par thetoad (11 May 2005 - 11:00)
Okay, bah je sais pas comment je me demerdais... c'était peut être pas ça que je faisais Smiley ohwell

En effet, ça marche pas comme je pensais... je comprend pas ce que j'avais fait Smiley langue

Reste plus qu'à comprendre comme ça marche Smiley smile
Bon teste la function de Quirksmode propose par djfeat...
ca marche... super

je vais me lire l'article de Quirksmode, histoyre de mourir moins con...

merci a vous tous
Smiley jap Smiley jap Smiley jap Smiley jap Smiley jap Smiley jap Smiley jap Smiley jap
thetoad a écrit :
Bon teste la function de Quirksmode propose par djfeat...


Oui oui ^^ 2 minutes Smiley langue
Je ferais ça quand j'aurais le temps Smiley smile d'où le
Olivier a écrit :

Reste plus qu'à comprendre comme ça marche
humm
petit probleme...


getStyle('Ltxt','clip');


sous IE marche pas ca retourne un typeOf==undefined...
hummmmmmm a (I) explorer... Smiley cligne
Modifié par thetoad (11 May 2005 - 11:53)
Bon j'ai trouvee apparement IE6 n'accepte pas clip comme parametre style mais clipTop , clipLeft etc

don la function de Quirksmode

devien

  function getStyle(el,styleProp)
		{
		var x = document.getElementById(el);
		if (window.getComputedStyle)// Mozilla
			var y = window.getComputedStyle(x,null).getPropertyValue(styleProp);
		else if (x.currentStyle)// Explorer 6
			{
			if (styleProp!='clip')
				var y = eval('x.currentStyle.' + styleProp);
			else
				{
				ctop=x.currentStyle.clipTop;
				cright=x.currentStyle.clipRight;
				cbottom=x.currentStyle.clipBottom;
				cleft=x.currentStyle.clipLeft;
				y='rect('+ctop+','+cright+','+cbottom+','+cleft+')';
				}
			}
		return y;
		}



cela retourne avec comme styleProp='clip' au format mozilla rect(top,right,bottom,left)
avec virgules



salut a vous
djfeat a écrit :

[Attention cependant, avec cette fonction les propriétés de style contenant un tiret (background-color, etc.) poseront problème sous IE (où il faudrait utiliser backgroundColor). Si tu en as besoin il faudra donc modifier la fonction (exemple).]



et modifee avec la function propose dans le lien(examle) du post de djfeat
ca donne


  function getStyle(el,styleProp)
		{
		var x = document.getElementById(el);
		if (window.getComputedStyle)// Mozilla
			var y = window.getComputedStyle(x,null).getPropertyValue(styleProp);
		else if (x.currentStyle)// Explorer 6
			{
			if (styleProp!='clip')
				{
			 while (styleProp.indexOf('-') != -1)
			 	{// clear '-' and  UpperCase  first next letters : background-color => backgroundColor
           		 var letter = styleProp.charAt(styleProp.indexOf('-')+1);
            	styleProp = styleProp.replace(/-\S{1}/,letter.toUpperCase());
       				 }
				var y = eval('x.currentStyle.' + styleProp);
				}
			else
				{// Return clip style  in mozilla format : rect(top,right,bottom,left)
				ctop=x.currentStyle.clipTop;
				cright=x.currentStyle.clipRight;
				cbottom=x.currentStyle.clipBottom;
				cleft=x.currentStyle.clipLeft;
				y='rect('+ctop+','+cright+','+cbottom+','+cleft+')';
				}
			}
		return y;
		}


on as un trouc assez complet je crois

ATTENTION

dans le CSS exterieur il faut metre 
clip: rect(10px 10px 10px 10px)
et pas
clip: rect(10px,10px,10px,10px)


car mozilla accepte les 2 syntaxes mais pas exlporer

par contre un pour modifier le clip

on peut utiliser


document.getElementById('xxx').style=rect(10px,10px,10px,10px);


aussi dans IExplorer

va savoir pourquoi???

a+
Modifié par thetoad (11 May 2005 - 15:42)
Sujet clos
Aller à