更改没有“id=”和“class=”的相同标签的值以及不同的值

Question

我想更改 x、y、宽度、高度的值。但是对于具有不同值的每一行。我无权访问源代码来设置 id 或类。如何使用 css、jquery 或 js 操作这些值？有任何想法吗？<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>先感谢您

Answer 1

您可以使用属性选择器，例如

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

这是一个例子：

$("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>

Answer 2

工作示例：在这个示例中，我将每个attribute乘以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>