javascript - 更改复制到变量中的 dom 元素的 attr 值

Question

我有一个 dom。

 <div id="abc">
  <svg width="240" height="200"></svg>
  <svg width="240" height="200"></svg>
  <svg width="240" height="200"></svg>
 </div>

我正在将其复制到变量中。

var target = document.getElementById('abc');

现在我想将所有 svg 标签的宽度/高度更改为 100% 而不是 240/200。我该怎么做。这就是我尝试过的......

    var $elem = $('<div>').html(target);
    var $img = $elem.find('svg');
    for (i = 0; i < $img.length; i++) {
        console.log($img[i]);
        $img[i].css('height', '100%');
        $img[i].css('width', '100%');
    }

Answer 1

您正在尝试在 DOM 对象上调用 css，因为 jquery 对象集合上的 indexer 给出 DOM 对象，您应该使用 eq()获取 jQuery 对象来调用 css

var $elem = $('<div>').html(target);
var $img = $elem.find('svg');
for (i = 0; i < $img.length; i++) {
    console.log($img[i]);
    $img.eq(i).css('height', '100%');
    $img.eq(i).css('width', '100%');
}

编辑:根据评论。

使用css会影响元素的style属性。您可能需要 attr 而不是 css 来设置高度和宽度属性。

$img.eq(i).attr('height', '100%');
$img.eq(i).attr('width', '100%');

或者尝试使用removeAttr删除属性宽度和高度，然后使用css()

$img.eq(i).removeAttr('height');
$img.eq(i).removeAttr('width');
$img.eq(i).css('height', '100%');
$img.eq(i).css('width', '100%');

建议:正如 Rajaprabhu Aravindasamy 指出的那样，使用每个更直接的解决方案。

$img.each(function() {      
    $(this).css('height', '100%');
    $(this).css('width', '100%');
});