关于#html#的问题，请各位专家解答！(语言-javascript)

设计代码发现之后按钮底色发生改变，需要字体颜色发生改变，希望各位帮忙解决下！

img


点击按钮之后使得

img


这句话 ，变颜色

html结构

  <p id="txt">点击按钮后，文字颜色发生变化</p>
  <button id="change">变色</button>

设置变色样式：

    .pink {
      color: pink;
    }

JS代码

    let btn = document.getElementById('change')
    let txt = document.getElementById('txt')
      btn.onclick =function(){
        txt.className = 'pink'
      }
不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7608098
  • 这篇博客也不错, 你可以看下【JavaScript】巧妙利用对象解构，实现设置变量默认值或变量重命名
  • 同时，你还可以查看手册：javascript 正则表达式和字符串的方法 中的内容
  • 除此之外, 这篇博客: 使用Javascript语言，来判断用户名和密码是否输入正确，并能跳转到相应页面，成功跳转到首页，失败不跳转中的 HTML5代码 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="widh=device-width,initial-scale=1.0,user-scalale=0,maximun-scale=1.0">
<title>login</title>
<link href="css/login.css" rel="stylesheet" type="text/css">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<script src="js/login.js"></script>
</head>

<body>
	<header>
		<h1 align="center">HTML5学习系统</h1>
			<nav>
				<a href="index.html">首页</a>
				|
				<a href="register.html">注册</a>
				|
				<a href="login.html">登陆</a>
			</nav>
	</header>
	<div class="formbody">
		<form action="index.html" method="get">
			<fieldset>
				<legend>请输入登录信息</legend>
				<ul>
					<li>
						姓名：
						<input type="text" autofocus placeholder="请输入您的姓名" id="myName">
					</li>
					<li>
						密码：
						<input type="password" placeholder="请输入您的密码" id="myPSW">
					</li>
					<li>
						<input type="button" onClick="login()" value="提交">
						<input type="reset">
					</li>
				</ul>
			</fieldset>
		</form>
	</div>
</body>
</html>
  • 您还可以看一下 徐照兴老师的JavaScript编程入门实战精讲课程中的 带参函数写法与调用小节, 巩固相关知识点
  • 以下回答来自chatgpt:

    解决方案：

    1. 在HTML中给按钮添加一个唯一的ID标识符，方便在JavaScript中获取到该按钮的信息。
    <button id="btn">Click me</button>
    1. 在JavaScript中获取该按钮，并创建一个事件监听函数，该函数可以在按钮被点击时触发。在该函数中改变按钮对应的文字颜色即可。
    const btn = document.getElementById("btn"); // 获取按钮信息

btn.addEventListener("click", function() { // 创建点击事件监听函数
  btn.style.color = "red"; // 改变按钮对应的文字颜色
});

    完整示例代码如下：

    <!DOCTYPE html>
<html>
  <head>
    <title>Change Button Text Color</title>
  </head>
  <body>
    <button id="btn">Click me</button>
    <script>
      const btn = document.getElementById("btn"); // 获取按钮信息

      btn.addEventListener("click", function() { // 创建点击事件监听函数
        btn.style.color = "red"; // 改变按钮对应的文字颜色
      });
    </script>
  </body>
</html>

    这样，当按钮被点击时，对应的文字颜色就会变成红色。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^