Javascript 如何让jQuery.attr工作？

所以我在做一个相框。你可以在这里找到它：。它是使用SVG构建的。我试图在单击按钮时更改帧的背景色。我已经读过了。addClass和。removeClass不起作用。我无意中发现了.attr，我正在尝试使用它。这就是我想要改变的事情

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

}

}

而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>

---

我认为，因为这是ypu可以像下面那样使用的

css

属性

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

这篇文章的完整脚本

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

---

您可以使用

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>

JS:

---

正如Mritunjay所说——将其视为css属性——这似乎在Chrome中起作用。

不确定为什么你说

addClass

和

removeClass

不起作用，它们确实起作用。但是:1。您在

$（“#按钮”）

中缺少一个

$

，2。当您应该使用

.border

时，您正在使用

#border

（或者使用

id=“border”

而不是

class=“border”

$（document）.ready（function（）{$（'#按钮'）。单击（function（）{$（.border”）.css（“fill”，“red”）；）@OwenMelbourne我刚刚添加了一行，这可能是问题的原因，我应该用完整的代码更新。看看@Mritunjay在他的答案中发布的示例，用这个替换你的，看看它是否符合你的期望。

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

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

<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>

.border {
    fill:#1E3868;
}

.red {
    fill:#FF0000;
}

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

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