modifier css en javascript

**Nicolas74** · 21/01/2010, 16h25

Bonjour,

Comment puis-je modifier l'attribut "width" d'une classe css "description" ?

J'ai essayé ceci, mais ça ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
e.className = 'description';
e.setAttribute(width, nouvelle_valeur);

Merci
Nicolas

**SpaceFrog** · 21/01/2010, 16h26

e est reservé !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
obj.className = 'description';
obj.style.width= nouvelle_valeur +"px";

**Nicolas74** · 21/01/2010, 16h42

Je te remercie.

Cependant la partie concernée ne change pas de taille.
J'ai donc essayé d'afficher la valeur de l'attribut, mais rien ne s'affiche :
(Je précise que je n'ai pas l'habitude de développer du web

)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
alert("avant: "+w);
obj.className = 'description';
var test=100;
w= w + test;
obj.style.width= test +"px";
 alert(obj.style.width.toString());

Je dois foirer quelque part

**SpaceFrog** · 21/01/2010, 16h46

il serait utile de voir le html correspondant ...

**Nicolas74** · 21/01/2010, 16h49

Effectivement :

head:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
...
    <script language = "Javascript">
        // tree script
        var tree;
        function treeInit()
        {
            tree = new YAHOO.widget.TreeView("treeDiv1");
            // if required, add nodes here
                //var root = tree.getRoot();
                //var tmpNode = new YAHOO.widget.TextNode("mylabel", root, true);
            tree.render();
        }
        // resize script
        var w = 150; // it's where description starts horizontally (in px)
        var w_temp=151;
        var increase=1; // allows to know if size increases or dicreases
        (function resize() {
            var Dom = YAHOO.util.Dom,
                Event = YAHOO.util.Event,
                col1 = null
                col2 = null;
 
            Event.onDOMReady(function() {
                var size = parseInt(Dom.getStyle('pg', 'width'), 10);
                col1 = Dom.get('sizeIt');
                col2 = Dom.get('sizeIt2');
                var max = (size - 150);
                var resize = new YAHOO.util.Resize('sizeIt', {
                    handles: ['r'],
                    minWidth: 150,
                    maxWidth: max
                });
 
                resize.on('resize', function(ev) {
                    //var w = ev.width;
                    w = ev.width;
                    Dom.setStyle(col1, 'height', '');
                    Dom.setStyle(col2, 'width', (size - w - 6) + 'px');
 
                });
 
                //resize.resize(null, 200, 200, 0, 0, true);
                resize.resize(null, minWidth, 200, 0, 0, true);
            });
 
        })();
 
        function modifyCSS_resizing()
        {
            var obj;
 
                alert("avant: "+w);
                obj.className = 'description';
                var test=100;
                w= w + test;
                obj.style.width= test +"px";
                document.location.reload()
                alert(obj.style.width.toString());
 
            //e.setAttribute(width, "value");
        }
    </script>
...

le body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<body class="yui-skin-sam" onload="treeInit()">
    <div class="banner">
        bandeau
    </div>
    <div class="menu" id="sizeIt" onmouseup="modifyCSS_resizing()">
        <!-- TREE with entries in the registry-->
        <div id="treeDiv1">
            <ul>
                <li class="expanded">List 0
                    <ul>
                        <li class="expanded">List 0-0
                            <ul>
                                <li>item 0-0-0</li>
                                <li><a target="_new" href="www.elsewhere.com" title="go elsewhere">elsewhere</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>List 1
                    <ul>
                        <li>List 1-0
                            <ul>
                                <li yuiConfig='{"type":"DateNode","editable":true}'>02/01/2009</li>
                                <li><span>item <strong>1-1-0</strong></span></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="description" id="sizeIt2">
        contenu
    </div>
    <div class="footer">
        pied de page
    </div>
</body>

mon CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
/*
    Document   : style_div
    Created on : 19 janv. 2010, 09:21:17
    Author     : Nicolas
    Description:
        Purpose of the stylesheet follows.
*/
 
/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
 
root {
    display: block;
}
 
div {
	/*text-align:left;*/
	}
.banner {
	width:1024px;
	height:50px;
	background-color:white;
	border-width:1px;
    border-color:black;
    border-style:solid;
    }
.menu {
	float:left;
	width:150px;
	height:400px;
	background-color:white;
    border-width:1px;
    border-color:black;
    border-style:solid;
    /*for resizable split pane :*/
    overflow:hidden
	}
.description {
	float:left;
    width:874px;
	height:400px;
	background-color:white;
    border-width:1px;
    border-color:black;
    border-style:solid;
    /*for resizable split pane :*/
    overflow:auto
	}
.footer {
	clear:both;
	width:1024px;
	height:50px;
	background-color:white;
    border-width:1px;
    border-color:black;
    border-style:solid;
	}

J'utilise http://developer.yahoo.com/yui/examp...ds_resize.html
pour pouvoir agrandir/diminuer mon menu sur le côté
Le redimensionnement fonctionne, mais mon Contenu (=description) déborde sur le côté lorsque j'augmente la taille.
Je veux donc modifier ma classe description dans mon CSS.

**SpaceFrog** · 21/01/2010, 16h53

obj = ???
tu ne passes pas de paramètre à ta fonction

essaye un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function modifyCSS_resizing(objid)
        {
            var obj=document.getElementById(objid);

**Nicolas74** · 21/01/2010, 17h06

Merci,

Je vais regarder si j'arrive à faire quelque chose avec cela.

**RomainVALERI** · 21/01/2010, 17h54

J'ai l'impression qu'il y a une incompréhension dans les termes ^^

Nicolas74, laquelle de ces deux descriptions correspond le mieux à ton problème ?

1) modifier la propriété css width d'un élément (qui a pour classe css "description" (ce qui n'a, ici, strictement aucune importance))

OU

2) modifier la classe css "description" en elle-même, pour que ce changement se répercute sur tous les éléments de la page ayant cette classe ?

?

Si, comme j'en ai l'intuition, tu réponds "2", ca veut dire qu'on est en plein hors-sujet, et que je viens de vous épargner de longs moments d'arrachage de cheveux à tous les deux. J'accepte avec plaisir votre infinie gratitude.
Dans le cas contraire, si je me suis gourré, pas de problème, j'irai discrètement me glisser sous un tas de fumier...

modifier css en javascript

JavaScript

Discussions similaires

Partager

Partager