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