R�cup�rer la width d'une table pour d�finir max-width sur �l�ments suivants

**boteha** · 01/04/2015, 22h09

Bonjour,

J'ai une table dont la largeur d�pend du contenu.

Je veux r�cup�rer la width effective de la table et l'affecter comme valeur max-width � certains �l�ments plus bas dans la page.

Chose infaisable en CSS, sauf trucs tordus.

Je me dis qu'une minuscvule fonction javascript peut faire l'affaire mais � vrai dire je connais tr�s mal javascript.

Pouvez-vous m'orienter vers une bonne source ou peut-�tre me donner les deux lignes de code ?

Merci d'avance.

**-Rpass-** · 02/04/2015, 10h19

Bonjour,

Pour r�cup�rer une propri�t� css en JQuery par exemple, avec cette m�thode

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var width = $(element).css("width")

Puis pour ajouter un style � un �l�ment c'est la m�me m�thode :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

$(element).css("max-width", width)

**boteha** · 02/04/2015, 11h23

Merci beaucoup.

Je profite du week-end allong� pour mes tests, je te tiens au courant.

**boteha** · 05/04/2015, 21h49

Bonjour,

J'ai ajout� dans le HEAD de ma page html :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
 
<script type="text/javascript">
<!--
var width = $(table.compcab).css("width")
$(ul.bul).css("max-width", width)
//-->
</script>

Tu devines que l'�l�ment dont je veut le width est <tabla class="compcab"> pour l'appliquer � <ul class="bul">

Ca ne donne rien du tout...

Qu'en penses-tu ?

**dmganges** · 06/04/2015, 06h37

Bonjour,
je suis d�butant en JS, mais j'ai eu un besoin semblable :
HTML :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
<body>
	<div id="DivCanvas">
		<!-- <canvas id="canvas" width=”800” height=”600”></canvas> En fait canvas est créé en javascript dans Astro.js sinon PB proportions -->
		<img src="./images/doudou.bmp" id="doudou"/>
	</div>
 
	<div id="AutreDivFlotant">
		<p>Le Div s'élargie au fur et à messure qu'on ajoute du texte...</p>
		<textarea id="textarea" name="Message"></textarea>
	</div>
</body>

CSS :

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#DivCanvas {
	width: 800px;
	height: 800px;
}
#AutreDivFlotant {
	position: fixed; top: 2px; right: 4px;
	float: right;
	width: auto;
	height: 800px;
	border: 1px solid blue;
}
canvas {
	border: 1px solid black;
	background-color: #FCFAE1;
}

JS :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
var DivFloat = document.getElementById('AutreDivFlotant');
var WidthDivFloat = document.getElementById('AutreDivFlotant').offsetWidth;
alert ("WidthDivFloat="+ WidthDivFloat);
DivFloat.setAttribute('width-max', WidthDivFloat);
alert ("Taille du Div flottant="+ document.getElementById('AutreDivFlotant').offsetWidth );

[EDIT 06:50] Et en largeur, le textarea ne va plus au del� de la longueur du texte

On doit pouvoir faire la m�me chose sur le Width d'une table...
Mais sous toutes r�serves en attendant l'avis d'experts...

**paulolol** · 06/04/2015, 09h30

Bonjour,

Le code que t'a donn� Rpass est du JQuery. Il faut donc importer la librairie si tu veux que ce code fonctionne.

Ensuite, voici des morceaux de code :
- Pour r�cup�rer la width de ton objet :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var width = document.getElementByClass('compcab').style.width;

Le getElementByClass n'est pas toujours bien vu, donc si c'est pour un exam, tu devrais ajouter un attribut id="compcab" � ton table, puis utilise getElementById('compcab') � la place de getElementByClass.

-Pour d�finir le max-width d'un objet :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementByClass('bul').style.maxWidth = width;

ou encore :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
 
var bul = document.getElementByClass('bul');
bul.style.maxWidth = width;

ce qui te permet d'�viter de r��crire le long document.get...style... si tu as besoins de faire d'autres ajouts de style sur ce m�me objet.
Ici encore, il serait mieux de mettre un id � ton ul afin de pouvoir utiliser le getElementById. Mais bon, �a c'est toi qui voit.

J'esp�re avoir pu t'aider

R�cup�rer la width d'une table pour d�finir max-width sur �l�ments suivants

JavaScript

Vue hybride

Discussions similaires

Partager

Partager