点击按钮样式的改变

最新推荐文章于 2024-07-07 20:19:55 发布
最新推荐文章于 2024-07-07 20:19:55 发布
阅读量957 收藏
点赞数
分类专栏： JavaScript 文章标签： 点击按钮样式改变 样式改变
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvjinhan/article/details/52645511
版权

1.css代码：index4.css

@CHARSET "UTF-8";

.sd{

   font-weight: bold;

   color: black;

   background: red;

}

2.jsp代码：index4.jsp

<%@ page language="java" import="java.util.*"pageEncoding="UTF-8"%>

<%

Stringpath = request.getContextPath();

StringbasePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

   

    <title>My JSP 'index4.jsp' startingpage</title>

   

   <meta http-equiv="pragma"content="no-cache">

   <meta http-equiv="cache-control"content="no-cache">

   <meta http-equiv="expires"content="0">   

   <meta http-equiv="keywords"content="keyword1,keyword2,keyword3">

   <meta http-equiv="description"content="This is my page">

   <link rel="stylesheet"type="text/css" href="css/index4.css">

   <script type="text/javascript"src="plug/jquery.js"></script>

   </head>

   <body>

  <table width="428"height="148" border="1"align="center" id="table">

  <tr>

  <td><div align="center">

  <label><input type="button"name="Submit" value="添加样式" onclick="clicks()"/></label>

  <label><input type="button"name="Submit2" value="移除样式" onclick="removeClicks()"/></label></div>

  </td>

  </tr>

  </table>

  <script type="text/javascript">

   function clicks(){

   $("#table").toggleClass("sd");

}

   function removeClicks() {

   $("#table").removeClass("sd");

 }

  </script>

  </body>

</html>

金含
关注
专栏目录
按钮点击切换样式（React中实现）
Eric_miaomiao的博客
05-11 1347
分享一个我用React实现的一个简单的按钮点击切换样式；样式的切换一般可以通过操作类名切换进而切换样式，也可以通过操作style属性，改变样式。在这里我使用的是通过类名切换来切换样式 2、点击按钮肯定需要绑定点击事件啦，在事件中我们可以通过事件对象event的target获取事件源对象，也就是相应标签。这样在事件发生时就能知道我们点的是哪个按钮啦 3、不要忘记每次点一个按钮后，之前点击的按钮是恢复原状的，这里我们可以在切换样式前，先循环所有标签设置初始的样式
html点击按钮状态改变,点击按钮改变CSS样式
weixin_34622572的博客
05-30 2266
点击按钮改变CSS样式* {padding:0px;margin:0px;}.box {width:300px;height:300px;border:1px solid #CBC4F7;font-size:13px;margin:100px auto;}.divWidth {width:400px;}.divHeight {height:400px;}.divBgColor {backgroun...
JavaScript-实例-button
最新发布
深度安全实验室
07-07 647
JavaScript-实例-button
点击按钮改变样式
m0_49893750的博客
09-10 230
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...
点击按钮修改页面样式
qq_37570710的博客
08-06 491
背景：点击按钮，对应显示图片变更。 class 里面编写具体样式。初始化根据数据库状态判断展示的样式。点击按钮后，变更按钮展示样式 <a href="javascript:;" class="oto-store-cds <#if commonMap.shelvesStatus?? && commonMap.shelvesStatus?string == '0'>oto-store-sale</#if>"onclick="changeSaleFlag(thi
解决点击一个按钮 样式随着改变问题
weixin_43877856的博客
11-14 674
身为java后台搬砖者。。前台的问题真是硬伤。。 接下来就给自己记录一个 解决点击一个按钮 样式随着改变的 问题 查询jquery api得知 addClass() 方法向被选元素添加一个或多个类。 该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。 siblings() 方法返回被选元素的所有同级元素。 removeClass() 方法从被选元素移除一个或多个...
jQuery实现的点击按钮改变样式功能示例
10-18
本示例中展示了如何使用jQuery来实现点击按钮改变页面元素的样式。具体来说，涉及到的技术点包括HTML页面结构的编写、CSS样式的应用以及jQuery脚本对事件的处理。 首先，HTML部分定义了页面的基本结构。这里使用了...
通过按钮点击实现css样式切换--模仿百度有啊
06-11
然后，我们使用JavaScript监听按钮的点击事件，切换CSS类以改变图片容器的样式。这里我们将使用jQuery库来简化代码，但也可以使用原生JavaScript实现相同功能。 ```javascript $(document).ready(function() { var...
Javascript点击按钮随机改变数字与其颜色
10-21
从给定文件内容中提取出的知识点非常明确，主要围绕如何利用JavaScript实现点击按钮随机改变数字和其字体颜色的功能。下面是基于所提供内容的知识点详细说明： 1. HTML结构和样式设置：首先，需要了解基本的HTML...
click事件修改css_CSS Click事件
culiao9310的博客
09-28 7571
click事件修改css For the last few years, we’ve been witnessing the wonderful expansion of front-end languages especially HTML with the HTML5 specifications and CSS with the CSS Level 3 specifi...
5个按钮经典样式
08-27
5个按钮经典样式
00type=file导入文件按钮样式修改的jsp代码-完美好
12-28
00type=file导入文件按钮样式修改的jsp代码-完美好，非常好用
Button自定义样式、水波纹、按压效果详解
Android_小黑
05-21 6535
想不想知道别人炫酷的按钮是怎么做的？想不想知道如何让你的一整块布局拥有动人的水波纹效果？本文一步步带你实现！
一定能用到的简单但实用的五种按钮样式（原生HTML+CSS步骤详解，含详细注释）(2)
peixiancccc的博客
05-07 633
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
点击button的样式改变
Hizzyellow的博客
10-16 1747
button点击时样式改变
[前端] js点击按钮改变样式
热门推荐
(ง •̀_•́)ง
07-20 3万+
有时候我们希望实现点击按钮并切换样式的效果，一个简单的方法是链接到另一个页面，但是，在有些情况下，我们不希望这么做，因为我们改变的只是页面的很小一部分，我们没有必要为了这一小部分而刷新整个界面。另外，当我们希望在一个页面实现不同控件的样式切换时，比如第一个控件有4种切换方式，第二种控件有3种切换方式，那么这就意味着我们需要实现4X3 = 12种不同的页面，这是繁琐而没有必要的。
jquery点击按钮改变样式
07-27
要使用jQuery来点击按钮改变样式，可以按照以下步骤进行操作： 1. 在HTML文件中添加一个按钮和要改变样式的元素。例如： ```html <button id="changeStyleBtn">点击改变样式</button> <div id="targetElement">要改变样式的元素</div> ``` 2. 在JavaScript文件或内联脚本中引入jQuery库。例如： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 3. 使用jQuery的`click`事件来监听按钮的点击事件，并在事件处理函数中改变目标元素的样式。例如： ```javascript $(document).ready(function() { $('#changeStyleBtn').click(function() { $('#targetElement').css('color', 'red'); $('#targetElement').css('background', 'yellow'); }); }); ``` 在上述代码中，`$(document).ready()`函数用于确保页面加载完成后再执行jQuery代码。`$('#changeStyleBtn')`选择器选中了id为`changeStyleBtn`的按钮，`.click()`方法添加了一个点击事件处理函数。在事件处理函数中，使用`$('#targetElement')`选择器选中了id为`targetElement`的元素，并通过`.css()`方法改变其颜色和背景。 这样，当点击按钮时，目标元素的样式将会被修改为红色字体和黄色背景。你可以根据需要自定义样式的属性和值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值