Je veux changer les valeurs de x, y, largeur, hauteur. Mais pour chaque ligne avec des valeurs différentes.

Je n'ai pas accès au code source pour définir l'ID ou la classe. Comment puis-je manipuler les valeurs avec css, jquery ou js? Des idées?

<rect x="0" y="0" width="36" height="3"></rect>
<rect x="17" y="8" width="19" height="3"></rect>
<rect x="0" y="16" width="36" height="3"></rect>

Merci d'avance

0
Ronja 19 oct. 2020 à 12:36

2 réponses

Meilleure réponse

Vous pouvez utiliser le sélecteur d'attribut, par exemple

$("rect[x=0][y=0]")

Voir https://api.jquery.com/category/selectors/attribute-selectors/ pour plus d'informations

Voici un exemple:

$("div[data-x]").css("color", "red")
$("div[data-x=0]").css("font-style", "italic")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div data-x="0" data-y="0">div 0x0</div>
<div data-x="100" data-y="100">div 100x100</div>
1
freedomn-m 19 oct. 2020 à 09:55

Exemple de travail: Dans cet exemple, j'ai multiplié tous les attribute pour 4

function changeFunc(){
var elementsLength = $('div').length;
console.log(elementsLength);
for(var index = 1; index <= elementsLength; index++){
      var nthRect = $('div:nth-of-type('+index+')');
      nthRect.attr('width',nthRect.attr('width') * 4);
      nthRect.attr('height',nthRect.attr('height') * 4);
      nthRect.attr('x',nthRect.attr('x') * 4);
      nthRect.attr('y',nthRect.attr('y') * 4);
      nthRect.css("width",nthRect.attr("width"));
      nthRect.css("height",nthRect.attr("height"));
      

    }
}

$( document ).ready(function() {
  var elementsLength = $('div').length;
    for(var index = 1; index <= elementsLength; index++){
      var nthRect = $('div:nth-of-type('+index+')');
      nthRect.css("width",nthRect.attr("width"));
      nthRect.css("height",nthRect.attr("height"));
    }
    setTimeout(changeFunc,1000)
    

});
    
div{
 background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div x="0" y="0" width="36" height="3"></div>
    <div x="17" y="8" width="19" height="3"></div>
    <div x="0" y="16" width="36" height="3"></div>
0
ThomasRyan 19 oct. 2020 à 10:04