Question

所以我正在制作相框。你可以在这里找到它：http://dunnrite.co.uk/frame2。它是使用SVG构建的。我想在单击按钮时更改框架的背景颜色。我读过.addClass和.removeClass不起作用。我偶然发现了.attr，我正在尝试使用它。这是我想要改变的事情。

<rect class="border" x="77.9" y="78.7" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="1100" height="600"/>

按钮......

 <button type="button" id="button">Click Me!</button>

CSS ......

.border {
fill:#1E3868;

}

.red {
fill:#FF0000;

}

和jQuery ......

$(document).ready (function() {
('#button').click (function() {
        $(".border").attr("fill", "red");
});

}）;

我也在HTML中链接到了这个：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' src='script.js'></script>

Answer 1

我认为因为这是一个css属性，你可以像bellow一样使用

$(".border").css("fill", "red");

此

的完整脚本

$(document).ready (function() {
    $('#button').click (function() {
        $(".border").css("fill", "red");
    });
});

Answer 2

您可以使用addClass和removeClass。但内联属性或样式将覆盖通过CSS设置的那些，您错过了$，并混淆了.class和#id选择器。

更新了HTML：

<svg>
    <rect id="therect" class="border" x="77.9" y="78.7" stroke="#000000" stroke-width="10" width="1100" height="400"/>
</svg>
<button type="button" id="button">Click Me!</button>

CSS：

.border {
    fill:#1E3868;
}

.red {
    fill:#FF0000;
}

JS：

$('#button').click (function() {
    $("#therect").removeClass("border").addClass("red");
});

http://jsfiddle.net/zkv3e4jr/

Answer 3

$(document).ready (function() {
    $('#button').click (function() {
        $(".border").css("fill", "red");
    });
});

正如Mritunjay所说 - 将其视为css属性 - 这似乎适用于Chrome。

我如何让jQuery .attr工作？

3 个答案: