Modifier une règle dans une class css

**feelwatt** · 18/03/2017, 16h10

Bonjour,
Suite à la discussion avec NoSmoking qui m'a bien aidé pour optimiser les scripts:
> "Remplacer "backgroundColor" par une variable "
https://www.developpez.net/forums/d1...olor-variable/

Je recherchais comment modifier une règle dans une class

Par exemple.
Il y a une class:

Code :

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

1
2
3
4
5
6
<style type="text/css">
.pic #imgsection32 {
	margin-top:-69px;margin-left:0px;height:369px;}
.pic:hover #imgsection32 { 
	margin-top:-662px;margin-left:-482px;height:1500px;}
</style>

Et là, je me demande comment intervenir uniquement sur margin-top,
sans passez par un

Code :

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

 getElementById.style.marginTop= xxx+'px';

Car cela va l'écrire 'en dur'.
Et le :hover ne fonctionnera plus.

**badaze** · 19/03/2017, 18h04

Salut,

Tu peux essayer comme suit. Attention. Le code n'est pas fait pour répondre à ton problème spécifique. C'est seulement pour te montrer ce qu'il est possible de faire. A toi de l'adapter.

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
 
<html>
<head>
<style type="text/css">
p.tutu       {color:blue;font-size:15pt}
.toto        {font-family:verdana;font-size:10pt}
.toto:hover  {  background-color: yellow;font-size:15pt}
.titi        {font-family:courier}
.titi:hover  {  background-color: green;}
</style>
<script>
 function changeCSS(className, anElement, aValue) {
 var cssR =  document.styleSheets[0].cssRules;
 
 for (var i=0;i<cssR.length;i++) {
  var myCSS = cssR[i].cssText;
  if (myCSS.match("^"+className)) {
 
    var arr     = myCSS.match(/\{(.+)\}/);
    var arr2    = arr[1].split(';');
 
    var modifie = false;
    var arr2A   = new Array();
    for (j=0;j<arr2.length;j++) {
 
   var x = arr2[j];
   var arr3 = x.split(':');
   if (arr3[0].trim() == anElement.trim()) {
    arr2A[j] =  anElement+':'+aValue;
    modifie  = true;
   } else {
    arr2A[j] = arr2[j];
   } 
    }
    // Si modifie = false on ajoute
    if (!modifie) {
   arr2A[arr2A.length] = anElement+':'+aValue;
    }
    // on reconstitue 
    arr2R = className+' {'+arr2A.join(';')+'}';
    //alert(arr2R); 
    document.styleSheets[0].deleteRule(i);
    document.styleSheets[0].insertRule(arr2R,i);
 
    //alert(document.styleSheets[0].cssRules[2].cssText);
  }
 }
 
 }
</script>
</head>
<body>
<script>
//alert(document.styleSheets[0].cssRules[0].cssText);
</script>
class = tutu :
<p class="tutu">abcdefgh</p>
<hr/>
class = tutu :
<p class="tutu">ijklmnopq</p>
<hr/>
class = toto :<br/>
<a class="toto" href="">123456789</a>
<hr/>
class = titi :<br/>
<a class="titi" href="">123456789</a>
<br/>
<input type="button" value="Change couleur class toto:hover" onclick="changeCSS('.toto:hover','color','red')"/><br />
<input type="button" value="Change couleur class p.tutu en vert" onclick="changeCSS('p.tutu','color','green')"/><br />
</body>
</html>

**danielhagnoul** · 20/03/2017, 01h32

changeCSS fonctionne si l'on change le style de ".toto:hover" mais pas si l'on change le style de ".toto".

Exemple :

Code HTML :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
    .toto {
      font-family: verdana;
      font-size: 2rem;
    }
    .toto:hover {
      background-color: yellow;
      font-size: 3rem;
    }
  </style>
  <script>
    'use strict';
    
    function changeCSS( className, anElement, aValue ){
      let
        cssR =  document.styleSheets[ 0 ].cssRules,
        myCSS, modifie, arrOLd, arrNew, arrTemp;
        
      for ( let [ i, item ] of Array.from( cssR ).entries() ){
        myCSS = item.cssText;
        
        if ( myCSS.match( "^" + className ) ){
          arrOLd = ( myCSS.match( /\{(.+)\}/ ) )[ 1 ].split(';'),
          modifie = false,
          arrNew = [];
          
          for ( let [ j, jtem ] of arrOLd.entries() ){
            arrTemp = jtem.split(':');
            
            if ( arrTemp[ 0 ].trim() == anElement.trim() ){
              arrNew[ j ] = anElement + ':' + aValue;
              modifie = true;
            } else {
              arrNew[ j ] = jtem;
            } 
          }
          
          if ( ! modifie ){
            arrNew[ arrNew.length ] = anElement + ':' + aValue;
          }
          
          document.styleSheets[ 0 ].deleteRule( i );
          document.styleSheets[ 0 ].insertRule( className + ' {' + arrNew.join( ';' ) + '}', i );
        }
      }
    }
 
    document.addEventListener( 'DOMContentLoaded', ev => {
      
      
    }, false );
    
    window.addEventListener( 'load', ev => {
      
 
    }, false );
  </script>
</head>
<body>
  <main>
    <div>
      <button onclick="changeCSS( '.toto', 'font-size', '1rem' )">Change font-size de toto</button>
    </div>
    <div>
      <a class="toto" href="">123456789</a>
    </div>
  </main>
</body>
</html>

**badaze** · 20/03/2017, 02h47

Oui. Je sais. Tout comme je ne prends que la première occurrence de stylesheets alors qu'il pourrait y en avoir plusieurs. Comme je l'ai indiqué c'est uniquement pour montrer que c'est faisable.

**danielhagnoul** · 20/03/2017, 12h59

Envoyé par badaze

Oui. Je sais. Tout comme je ne prends que la première occurrence de stylesheets alors qu'il pourrait y en avoir plusieurs. Comme je l'ai indiqué c'est uniquement pour montrer que c'est faisable.

Oui, il faut commencer par rechercher dans quelle occurrence se trouve la règle CSS à modifier.

@feelwatt : lorsqu'un style ":hover" doit être modifié en JS, je crois que la meilleure solution c'est de réaliser l'effet ":hover" en JS à l'aide de deux gestionnaires d'événement : un pour l'événement "mouseenter" et l'autre pour l'événement "mouseleave".

Modifier une règle dans une class css

JavaScript

Vue hybride

Discussions similaires

Partager

Partager