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