Changer la taille d'un div avec onclick
tidave
Messages postés
31
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour a tous
en fait tout est dans le titre,
je voudrais qu'en cliquant sur un, que je puisse pouvoir changer la taille d'un div
Ar exemple
j'ai la div "exemple" qui fait 300px de hauteur, je voudrais qu'en cliquant sur le lien, "changer taille" que la hauteur du div passe a 500px
Merci de m'aider
A bientôt
en fait tout est dans le titre,
je voudrais qu'en cliquant sur un, que je puisse pouvoir changer la taille d'un div
Ar exemple
j'ai la div "exemple" qui fait 300px de hauteur, je voudrais qu'en cliquant sur le lien, "changer taille" que la hauteur du div passe a 500px
Merci de m'aider
A bientôt
A voir également:
- Changer la taille d'un div avec onclick
- Changer dns - Guide
- Comment réduire la taille d'un fichier - Guide
- Changer carte graphique - Guide
- Reduire taille image - Guide
- Changer wifi chromecast - Guide
4 réponses
Bonjour,
Il faut utiliser du javascript pour changer la taille de ta div.
1- Identifie ton composant DIV avec un identifiant comme suit:
2- Définie une fonction javascript 'changeSize' chargée de changer la taille d'un élément de ta page. Cette fonction prendra pour paramètre l'identifiant de l'élément à modifier, ainsi que la taille souhaitée:
3- Sur un évènement d'une autre DIV, appelle la fonction 'changeSize' sur l'autre DIV en lui donnant pour paramètre l'identifiant de l'autre DIV, ainsi que la taille:
Exemple non testé, uniquement pour expliquer comment faire. A toi de jouer.
Il faut utiliser du javascript pour changer la taille de ta div.
1- Identifie ton composant DIV avec un identifiant comme suit:
<div id="target"> Contenu target </div>
2- Définie une fonction javascript 'changeSize' chargée de changer la taille d'un élément de ta page. Cette fonction prendra pour paramètre l'identifiant de l'élément à modifier, ainsi que la taille souhaitée:
<script language="javascript">
function changeSize (_divId_, _newSize_){
if ( document.getElementById(_divId_) != null ){
document.getElementById(_divId_).style.width = _newSize;
}
}
</script>
3- Sur un évènement d'une autre DIV, appelle la fonction 'changeSize' sur l'autre DIV en lui donnant pour paramètre l'identifiant de l'autre DIV, ainsi que la taille:
<div id="source" onclick="javascript:changeSize('target',500);">
Clic ici pour changer la taille !
</div>
Exemple non testé, uniquement pour expliquer comment faire. A toi de jouer.
Bonjour le code proposer par kij82 a plusieurs erreur il manquer le underscor sur le newsize et width et height sont des string et nom des int bref il faut penser a rajouter le + "px"
du coup voici une correction :
<script language="javascript">
function changeSize (_divId_, _newSize_){
if ( document.getElementById(_divId_) != null ){
document.getElementById(_divId_).style.width = _newSize_ +"px";
}
}
</script>
et une evolution :
<script language="javascript">
function changeSize (divId, newSizex,newSizey){
if ( document.getElementById(divId) != null ){
document.getElementById(divId).style.width = newSizex +"px";
document.getElementById(divId).style.height= newSizey +"px";
}
}
</script>
du coup voici une correction :
<script language="javascript">
function changeSize (_divId_, _newSize_){
if ( document.getElementById(_divId_) != null ){
document.getElementById(_divId_).style.width = _newSize_ +"px";
}
}
</script>
et une evolution :
<script language="javascript">
function changeSize (divId, newSizex,newSizey){
if ( document.getElementById(divId) != null ){
document.getElementById(divId).style.width = newSizex +"px";
document.getElementById(divId).style.height= newSizey +"px";
}
}
</script>
en jquery ce serait plus simple
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
#change {
width:100%;
height:300px;
background-color:#FFFF99;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<script>
$(document).ready (function(){
$("#achanger").toggle(function(){
$("#change").css("height", "500px");
},function(){
$("#change").css("height", "300px");
});
})
</script>
<div id="change"></div>
<button id="achanger">click ici</button>
</body>
</html>
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
#change {
width:100%;
height:300px;
background-color:#FFFF99;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<script>
$(document).ready (function(){
$("#achanger").toggle(function(){
$("#change").css("height", "500px");
},function(){
$("#change").css("height", "300px");
});
})
</script>
<div id="change"></div>
<button id="achanger">click ici</button>
</body>
</html>
Salut
MErci pour ta reponse rapide, mais ça ne fonctionne pas
pourtant le code a l'air ok
bizarre quand meme
J'utilise ça :
avec une div "exemple"
j'appelle
<a onclick="grand('exemple');">agrandir</a>
ou
<a onclick="petit('exemple');">rapetisser</a>
ça fonctionne impect
Ce que je veux fair ec'est utiliser un sule lien
quand je clique dessus ça agrandit si c'etait petit et ça rapetisse si c'etait grand
Merci de m'aider
MErci pour ta reponse rapide, mais ça ne fonctionne pas
pourtant le code a l'air ok
bizarre quand meme
J'utilise ça :
<script language="javascript" type="text/javascript">
function petit(ob)
{
document.getElementById(ob).style.width="10"+'px';
}
function grand(ob)
{
document.getElementById(ob).style.width="200"+'px';
}
</script>
avec une div "exemple"
j'appelle
<a onclick="grand('exemple');">agrandir</a>
ou
<a onclick="petit('exemple');">rapetisser</a>
ça fonctionne impect
Ce que je veux fair ec'est utiliser un sule lien
quand je clique dessus ça agrandit si c'etait petit et ça rapetisse si c'etait grand
Merci de m'aider