[DOM] Recuperer Recharger CSS

**zi_omnislasher** · 16/09/2008, 15h18

Bonjour j'ai effectue une rapide recherche sur les forums et je n'ai pas trouve de topic sur le sujet qui me turlupine...

En fait j'aimerai transporter tout le style (enfin je suppose) d'un objet DOM a un autre.

J'explique plus en detail.

Mon but est de realiser une scroll table qui marcherai dans la plupart des browsers internet, du moins ceux que jQuery supporte.

Mon code se base donc sur jquery.

Pour avoir la scrollbar verticale avec le header fixe et compatible ds tous les browsers, plutot que d'utiliser des styles bidons qui buggent pour x ou y raisons (cf la -moz-vertical-scrollbar qui me donnait des lignes immobiles l'autre jour)... je recherche les dimensions de chacune de mes colonnes en largeur, et je pose mon header et mon body ds des divs separes.
Ensuite j'ajuste les dimensions des colonnes grace aux dimensions mesurees precedemment, et finalement j'ajuste la taille du div qui entoure le body.

En theorie ca doit pouvoir marcher,mais j'ai un petit probleme.

Lorsque je detruit la structure initiale de la table les styles partent completement en cacahuete...
Je voudrais donc recuperer les styles de thead/tbody/tfoot, et des lignes associees puis les transporter sur les nouveaux thead/tbody/tfoot qui sont dans des divs separes, avant de reajuster les largeurs des colonnes.

Quelqu'un verrait il comment faire ?

pour l'instant j'ai fait une fonction get/set css pour jquery ds le style ci-dessous.

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
 
      /**
	 * returns the whole css array of the first element...
	 *
	 * @param {Integer} i
	 */
	$.fn.getCss = function(){
		var cssArray = [];
		var i=0;
		if( this.size()>0){
			var tmp = this.get(0).style;
 
			for (var style in tmp) {
				var value = this.css(style);
				cssArray[style] = value;
			}
		}
		console.log(cssArray.length);
		return cssArray;
	}
	/**
	 * returns the element at pos i...
	 *
	 * @param {Integer} i
	 */
	$.fn.setCss = function( cssArray ){
		return this.each(function(){
			for( var style in cssArray ){
				try {
					$(this).css(style, cssArray[style]);
				} 
				catch (e) {
				}
			}
		}); 
	}

Mais les resultats ne sont pas satisfaisants... (le console.log c parce que c'est en cours de debug...).

Pour vous donner une idee du code voila ma fonction actuelle pour creer le scroll (c pas fini):

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
 
		this.buildscroll = function(){
				var tmphtml='';
				var styles = {
					table:this.getCss()
				};
				if(this.thead().size()>0){
					$.extend( styles , 
					{
						thead: this.thead().getCss(),
//						thead_tr: this.thead().rows().getCss(),
						thead_tr: this.thead().rows().at(0).cells().getCss()
					});
				}
				if(this.tbody().size()>0){
					$.extend( styles , 
					{
						tbody: this.tbody().getCss(),
//						tbody_tr: this.tbody().rows().getCss(),
						tbody_tr: this.tbody().rows().at(0).cells().getCss()
					});
				}
				if(this.tfoot().size()>0){
					$.extend( styles , 
					{
						tfoot: this.tfoot().getCss(),
						tfoot_tr: this.tfoot().rows().getCss(),
						tfoot_td: this.tfoot().cells().getCss()
					});
				}
 
				//1. get column sizes:
				var titlerow = this.thead().find('.titlerow');
				var titlerow_cells = titlerow.cells();
				var col_widths = [];
				var width = this.width(); 
 
				for(var i=0; i<titlerow_cells.size();i++){
					col_widths[i]= titlerow_cells.at(i).outerWidth(true);
				}
 
				//2. Save then remove head & body, put a new body.
				var tbody=this.tbody().clone();
				var thead=this.thead().clone();
				this.thead().remove();
				tmphtml = 	'<tbody style="width:100%;height:100%;border-collapse:collapse;" class="control wrap">'
								+'<tr style="width:100%;height:100%;border-collapse:collapse;" class="control wrap">'
									+'<td style="width:100%;height:100%;border-collapse:collapse;" class="control wrap"> '
									+'</td>'
								+'</tr>'
							+'</tbody>';
				this.tbody().replaceWith(tmphtml);
 
				//3. Set back header and body in 2 different divs.
 
				this.find('td.control.wrap')
				.append(	'<div class="thead wrap control" style="margin:0px;width:100%;height:auto;border-collapse:collapse;">'
								+ 	'<table class="thead wrap control" style="width:100%;height:auto;border-collapse:collapse;">'
								+   '</table>'
							+ '</div>');
				this.find('table.thead.control.wrap').html(thead);
				this.css('border-collapse','collapse');
				this.thead().rows().cells().setCss(styles.thead_td);
				this.thead().rows().setCss(styles.thead_tr);
				this.thead().setCss(styles.thead);
 
				this.find('td.control.wrap')
				.append(	'<div class="tbody wrap control" style="margin:0px;width:100%;height:auto;border-collapse:collapse;">'
							+ 	'<table class="tbody wrap control" style="width:100%;height:auto;border-collapse:collapse;">'
							+   '</table>'
							+ '</div>');
 
				this.find('table.tbody.control.wrap').html(tbody);
				this.css('border-collapse','collapse');
				this.tbody().setCss(styles.tbody);
				this.tbody().rows().setCss(styles.tbody_tr);
				this.tbody().rows().cells().setCss(styles.tbody_td);
 
...

Normalement le but de la manip c d'avoir wrappe le tbody et le thead de la table initiale dans 2 divs separes... en gardant les styles de la table initiale...

Voila alors je pensais a une autre solution qui ne marcherait surement pas, ce serait peutetre de recharger le css apres la modification si c possible? A moins que ce soit fait automatiquement ?

Quelqu'un comprend le probleme...?

Merci d'avance.

**le_chomeur** · 16/09/2008, 15h28

as tu regardé du coté de getComputedStyle et currentStyle pour récupérer les style ?

**zi_omnislasher** · 17/09/2008, 03h03

Merci pour ta reponse.

Le fait est que la fonction css de jQuery wrappe deja les fonctions getComputedStyle et currentStyle...

Pour reference je poste le code de jquery:

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
	css: function( elem, name, force ) {
		if ( name == "width" || name == "height" ) {
			var val, props = { position: "absolute", visibility: "hidden", display:"block" }, which = name == "width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ];
 
			function getWH() {
				val = name == "width" ? elem.offsetWidth : elem.offsetHeight;
				var padding = 0, border = 0;
				jQuery.each( which, function() {
					padding += parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0;
					border += parseFloat(jQuery.curCSS( elem, "border" + this + "Width", true)) || 0;
				});
				val -= Math.round(padding + border);
			}
 
			if ( jQuery(elem).is(":visible") )
				getWH();
			else
				jQuery.swap( elem, props, getWH );
 
			return Math.max(0, val);
		}
 
		return jQuery.curCSS( elem, name, force );
	},
 
	curCSS: function( elem, name, force ) {
		var ret, style = elem.style;
 
		// A helper method for determining if an element's values are broken
		function color( elem ) {
			if ( !jQuery.browser.safari )
				return false;
 
			// defaultView is cached
			var ret = defaultView.getComputedStyle( elem, null );
			return !ret || ret.getPropertyValue("color") == "";
		}
 
		// We need to handle opacity special in IE
		if ( name == "opacity" && jQuery.browser.msie ) {
			ret = jQuery.attr( style, "opacity" );
 
			return ret == "" ?
				"1" :
				ret;
		}
		// Opera sometimes will give the wrong display answer, this fixes it, see #2037
		if ( jQuery.browser.opera && name == "display" ) {
			var save = style.outline;
			style.outline = "0 solid black";
			style.outline = save;
		}
 
		// Make sure we're using the right name for getting the float value
		if ( name.match( /float/i ) )
			name = styleFloat;
 
		if ( !force && style && style[ name ] )
			ret = style[ name ];
 
		else if ( defaultView.getComputedStyle ) {
 
			// Only "float" is needed here
			if ( name.match( /float/i ) )
				name = "float";
 
			name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
 
			var computedStyle = defaultView.getComputedStyle( elem, null );
 
			if ( computedStyle && !color( elem ) )
				ret = computedStyle.getPropertyValue( name );
 
			// If the element isn't reporting its values properly in Safari
			// then some display: none elements are involved
			else {
				var swap = [], stack = [], a = elem, i = 0;
 
				// Locate all of the parent display: none elements
				for ( ; a && color(a); a = a.parentNode )
					stack.unshift(a);
 
				// Go through and make them visible, but in reverse
				// (It would be better if we knew the exact display type that they had)
				for ( ; i < stack.length; i++ )
					if ( color( stack[ i ] ) ) {
						swap[ i ] = stack[ i ].style.display;
						stack[ i ].style.display = "block";
					}
 
				// Since we flip the display style, we have to handle that
				// one special, otherwise get the value
				ret = name == "display" && swap[ stack.length - 1 ] != null ?
					"none" :
					( computedStyle && computedStyle.getPropertyValue( name ) ) || "";
 
				// Finally, revert the display styles back
				for ( i = 0; i < swap.length; i++ )
					if ( swap[ i ] != null )
						stack[ i ].style.display = swap[ i ];
			}
 
			// We should always get a number back from opacity
			if ( name == "opacity" && ret == "" )
				ret = "1";
 
		} else if ( elem.currentStyle ) {
			var camelCase = name.replace(/\-(\w)/g, function(all, letter){
				return letter.toUpperCase();
			});
 
			ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
 
			// From the awesome hack by Dean Edwards
			// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
 
			// If we're not dealing with a regular pixel number
			// but a number that has a weird ending, we need to convert it to pixels
			if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
				// Remember the original values
				var left = style.left, rsLeft = elem.runtimeStyle.left;
 
				// Put in the new values to get a computed value out
				elem.runtimeStyle.left = elem.currentStyle.left;
				style.left = ret || 0;
				ret = style.pixelLeft + "px";
 
				// Revert the changed values
				style.left = left;
				elem.runtimeStyle.left = rsLeft;
			}
		}
 
		return ret;
	}

Comme tu as vu dans mon code, je recupere bien les styles par l'intermediaire de ces fonctions..., et je les remet aussi par cet intermediaire...

EDIT:

Probleme resolu.
En realite le probleme ne venait pas de mon script, mais du CSS associe a ma table de test.
Quelque part on pourrait dire qu'il vient du script puisque la page devient tres sensible aux problemes eventuels des styles...Alors que le but est d'etre completement transparent...

Le CSS definissait la couleur de fond blanche a la fois pour les lignes du tbody et du thead, apres avoir definit la couleur de fond grise pour la table
J'ignore pourquoi mais au cours d'un chargement normal de la page, la table s'affichait correctement. Neanmoins lorsque je recuperais le style, je mettais la ligne de thead en blanc du coup...

Je comprend l'erreur maintenant, mais je ne comprends pas pourquoi ca s'affiche correctement en general...

voila le style de ma table

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
 
<style>
    table {
        text-align: left;
        font-size: 12px;
        font-family: verdana;
        background: #c0c0c0;
    }
 
    table thead tr,
    table tfoot tr {
        background: #c0c0c0; //apres correction
        //avant correction: background: #f0f0f0;
    }
 
    table tbody tr {
        background: #f0f0f0;
    }
 
    td, th {
        border: 1px solid white;
    }
</style>

Encore un mystere de canard...

A la limite une tite explication me ferait plaisir sur ce point.

[DOM] Recuperer Recharger CSS

JavaScript

Discussions similaires

Partager

Partager