如何用js改变字体的颜色？
比如把黑色的字变成红色，这个我知道怎么写，但是怎么做可以再点一次按钮让它变回黑色呢？也就是说如果字是黑色就变成红色，如果是红色就变成黑色，js可以做到吗？...
比如把黑色的字变成红色，这个我知道怎么写，但是怎么做可以再点一次按钮让它变回黑色呢？也就是说如果字是黑色就变成红色，如果是红色就变成黑色，js可以做到吗？
展开
3个回答
展开全部
很简单的:
如果你是在学习JS、遇到了各种问题，那么你一定要来这个企鹅裙，前面前面是二九六，中间是五九一，最后面就是二九0，来这里可以得到专人解答，期待你的加入！！！
<div id="txt">我是要改变的文字</div>
<script>
//首先咱们找到要改变的文字
var txt = document.getElementById("txt");
//然后设置一个标记flag
var flag = true;
//然后点击这个div或者按钮
txt.onclick = function(){
//改变里面文字颜色
if(flag){
this.style.color = "red";
flag = false;
}else{
this.style.color = "#000";
flag = true;
}
}
</script>
如果你是在学习JS、遇到了各种问题，那么你一定要来这个企鹅裙，前面前面是二九六，中间是五九一，最后面就是二九0，来这里可以得到专人解答，期待你的加入！！！
<div id="txt">我是要改变的文字</div>
<script>
//首先咱们找到要改变的文字
var txt = document.getElementById("txt");
//然后设置一个标记flag
var flag = true;
//然后点击这个div或者按钮
txt.onclick = function(){
//改变里面文字颜色
if(flag){
this.style.color = "red";
flag = false;
}else{
this.style.color = "#000";
flag = true;
}
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用js获取当前的color的值，然后判断是否等于红色，如果等于则赋值为黑色，不等于则赋值为红色
js的写法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.redColor{
color: red;
}
.blackColor{
color: black;
}
</style>
</head>
<body>
<span id="showZi" class="redColor">测试测试测试</span>
<button id="btn">按钮</button>
<script type="text/javascript">
var obj = document.getElementById("showZi");
document.getElementById("btn").onclick = function(){
if(obj.className=="redColor"){
obj.className = "blackColor";
}else{
obj.className = "redColor";
}
}
</script>
</body>
</html>
jQuery的写法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../common/js/jquery-2.1.3.min.js" type="text/javascript"></script>
<style>
.redColor{
color: red;
}
.blackColor{
color: black;
}
</style>
</head>
<body>
<span id="showZi" class="redColor">测试测试测试</span>
<button id="btn">按钮</button>
<script type="text/javascript">
var obj = $("#showZi");
$("#btn").click(function(){
if(obj.hasClass("redColor")){
obj.removeClass("redColor").addClass("blackColor");
}else{
obj.removeClass("blackColor").addClass("redColor");
}
});
</script>
</body>
</html>
js的写法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.redColor{
color: red;
}
.blackColor{
color: black;
}
</style>
</head>
<body>
<span id="showZi" class="redColor">测试测试测试</span>
<button id="btn">按钮</button>
<script type="text/javascript">
var obj = document.getElementById("showZi");
document.getElementById("btn").onclick = function(){
if(obj.className=="redColor"){
obj.className = "blackColor";
}else{
obj.className = "redColor";
}
}
</script>
</body>
</html>
jQuery的写法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../common/js/jquery-2.1.3.min.js" type="text/javascript"></script>
<style>
.redColor{
color: red;
}
.blackColor{
color: black;
}
</style>
</head>
<body>
<span id="showZi" class="redColor">测试测试测试</span>
<button id="btn">按钮</button>
<script type="text/javascript">
var obj = $("#showZi");
$("#btn").click(function(){
if(obj.hasClass("redColor")){
obj.removeClass("redColor").addClass("blackColor");
}else{
obj.removeClass("blackColor").addClass("redColor");
}
});
</script>
</body>
</html>
追问
你这个../common/js/jquery-2.1.3.min.js里面是什么呢？
追答
那个是jQuery的文件，相当于是对javascript的封装，是一个类库，用jQuery可以更加简便快捷的实现js的功能，如果你不用jQuery就不需要引用这个
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-01-15 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
用js方法来实现，代码为：document.getElementById("t").style.color="red";
说明：上面的"t"可以根据自己需要修改，具体代码参考：
<html>
<body>
<a name="t" class="STYLE2" id="t" onclick="chcolor();">登陆通行证</a>
<script type="text/javascript">
function chcolor(){
document.getElementById("t").style.color="red";
}
</script>
</body></html>
说明：上面的"t"可以根据自己需要修改，具体代码参考：
<html>
<body>
<a name="t" class="STYLE2" id="t" onclick="chcolor();">登陆通行证</a>
<script type="text/javascript">
function chcolor(){
document.getElementById("t").style.color="red";
}
</script>
</body></html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
