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作为 indexer 对jquery对象集合给出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删除属性width和height，然后使用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%');
});

Answer 2

尝试，

$('#abc > svg')
.removeAttr('width height')
.css({"height":"100%","width":"100%"});

Answer 3

我认为这就足够了

$('#abc > svg').css({"height":"100%","width":"100%"});

Answer 4

$("#abc svg").css({"width":"100%" , "height":"100%" });

Answer 5

您可以使用 .each() 循环浏览svg div中的#abc元素以及 .attr() 来更改width和height属性：

$('#abc svg').each(function() {
    $(this).attr('width', '100%');
    $(this).attr('height', '100%');
});

<强> Fiddle Demo

Answer 6

您正在应用高度百分比，这将仅适用于ie，但对于其他浏览器，您需要确保它的父div设置为某个固定高度（以像素为单位）。

例如。为了使这项工作只需添加以下css：

html,body{height: 100%;}

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

6 个答案: