jQuery设置文字样式

最新推荐文章于 2023-07-18 13:45:59 发布
最新推荐文章于 2023-07-18 13:45:59 发布
阅读量1w 收藏
点赞数 4
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linlin2294592017/article/details/8820399
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css"> 
    p
    {
        background-color:#eee; font-size:30px;
        }
        .classadd
        {
            font-weight:bold; font-family:微软雅黑; font-size:40px; background-color:Green;
            }
            .classadd1
            {
                background-color:Red;
                }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnclass').click(function () {
                $('p').css('background-color', 'blue');//设置样式
            })
            $('#btnAdd').click(function () {
                $('p').addClass('classadd classadd1');//添加样式
            })
            $('#btnRemove').click(function () {
                $('p').removeClass('classadd1'); //删除指定名称的样式
            })
            $('#btnChange').click(function () {
                $('p').toggleClass('classadd1');
            })
        })
    </script>
</head>
<body>
<p class="classadd">得用汉字</p>
<input type="button" id="btnclass" value="设置样式" />
<input type="button" id="btnAdd" value="添加样式" />
<input type="button" id="btnRemove" value="删除样式" />
<input type="button" id="btnChange" value="切换样式" />
</body>
</html>
Dlinlin
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery CSS3酷炫文字动画插件
06-24
jQuery CSS3酷炫文字动画插件，基于css3 animate样式表制作多种实用的文字动画效果，酷炫的文字动画插件代码。
jquery实现可旋转可拖拽的文字效果代码
10-22
主要介绍了jquery实现可旋转可拖拽的文字效果代码,涉及jquery响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
jQuery实现3D文字特效的方法
10-24
主要介绍了jQuery实现3D文字特效的方法,通过鼠标与css样式来实现文字特效的技巧,需要的朋友可以参考下
jQuery时间表样式历程说明特效代码
03-20
jQuery时间表样式历程说明是一款从国外网站上翻译过来的jquery特效，顶部是时间日程表，点击对应的特殊日期，底部即可显示对应的图片文字。适用于公司大事迹历史类型说明。
jQuery搜索框输入文字查找表格内容匹配代码
06-10
非常棒的jQuery搜索框输入文字查找表格内容匹配代码，分电脑端与手机移动端两个版本，匹配关键词的内容会飘红显示，可连续匹配不同的关键词。
jquery改变全局样式的一种方法：$(‘＜style＞ xxx＜/style＞‘)
最新发布
qq_43695425的博客
07-18 157
发现jquery中改变全局样式的一种方式，在$(‘’)中直接写样式，再添加到head元素中。
jquery 4 获取和设置文字 获取和设置样式
weixin_43811818的博客
11-26 464
获取和设置文字 $('#div').text(); //获取#div这个元素的文字 var a=$('#div').text(); //有一个返回值 打印输出为#div这个元素的文字 $('#div').text(你好，仙女); //直接将这个元素的文字改为你好，仙女，返回值为object对象 ...
CSS 字体样式
a804847944的博客
06-29 203
　　定义字体的各个属性，可以让页面板式变得更好看。 　　字体样式包括字体类型、大小、颜色基本效果，另外还包括一些特殊的样式，如字体粗细、下划线、斜体、大小写样式等。 一、定义字体类型 　　font-family 属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。 　　语法： font-family:name; 　　name：表示字体名称，可以使用多种字体...
jQuery在js里动态修改样式和hover()方法 (入门)
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-11 1267
半杯不啰嗦，希望能够帮助有需要的那个人！
使用jQuery测试新的网站字体
11-03 93
这是一个整洁的小脚本，我发现它可以让你实时预览新的字体是为使用jQuery字体Dragr 您的网站 。 如果您呈现出客户各种字体的样子，或用于网站只是日常字体试验可能是有用的。 请享用。 说明 复制并粘贴到一个新的书签（书签工具栏上点击右键粘贴） 访问你想字体预览网站 点击书签 通过拖动字体到酒吧填充字体列表 与jQuery选择即时预览针对特定元素 编码 javascript: ...
jQuery调节字体大小案例
nsnydnz的博客
08-12 856
效果展示 点击界面上的开关灯按钮，可以实现背景的调暗。后面可以调节其字体。方便晚上阅读。 文章目录效果展示关灯开灯 关灯 开灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
jquery变换字体颜色
Demo_csdn
10-27 2349
利用jquery中的选择器,至少写三种方法,让p元素的字体颜色变成红色 用了三种选择器 图片： 下面是代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jq...
手写jquery中给文本加样式的底层代码
berg_hang的博客
04-03 341
今天学到jquery的时候，本来直接看api文档就知道该怎么用，老师突然要我们用js来写$('dd').style.cssText=("color":"red");的底层原理。一下子懵逼，先辈们，创建出这么好用的框架，却要我一个新手写出这个底层原理出来，但是老师又太严，没办法只能想，下面是我的思路。&lt;p id="dd"&gt;周杰伦&lt;/p&gt;$('dd').style.cssTex...
html消除样式,jquery如何去除css样式？
weixin_39516956的博客
06-04 457
jquery如何去除css样式？下面本篇文章就来给大家介绍一下使用jquery去除css样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1、使用removeClass()方法去除css样式removeClass() 方法从被选元素移除一个或多个类。注释：如果没有规定参数，则该方法将从被选元素中删除所有类。示例：从所有的 元素移除 "intro" 类：$(documen...
前端HTML调用jQuery库，属性操作:更换图片、添加字体样式（前端：HTML搭配jQuery系列教程六）
K_AAbb的博客
05-17 413
属性操作：更换图片、改变字体样式 1、更换图片： 在jQuery中，我们可以使用attr()方法来获取元素的某一个HTML属性值。 语法： $().attr("属性名") 说明：获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <
Jquery设置字体颜色
Diligent_Programmer的博客
11-18 7047
body代码： &lt;p class="c1"&gt;Hello&lt;/p&gt; &lt;p id="d1"&gt;Hello&lt;/p&gt; jquery代码： $(".c1").css("color","red"); //对于c1类，获取标签，类名前加. $("#d1").css("co
jQuery实现样式和文字的切换
weixin_33842328的博客
02-13 591
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript设置字体样式
男儿当自强
09-21 1万+
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here function over(obj){ obj.style.backgroundColor="blue"; obj.style.color="white"; } fun
Jquery 设置字体颜色
热门推荐
饭桶一生奋斗
05-27 2万+
body代码：<p class="pmc">Hello</p>jquery代码：$(".pmc").css("color","red");
基于jQuery的表格样式
05-21
下面是一个基于 jQuery 的表格样式的示例代码： HTML： ```html <table id="myTable"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>25</td> </tr> <tr> <td>李四</td> <td>女</td> <td>30</td> </tr> <tr> <td>王五</td> <td>男</td> <td>28</td> </tr> </tbody> </table> ``` CSS： ```css #myTable { border-collapse: collapse; width: 100%; text-align: center; } #myTable th, #myTable td { padding: 10px; border: 1px solid #ddd; } #myTable th { background-color: #f2f2f2; font-weight: bold; color: #333; } ``` jQuery： ```javascript $(document).ready(function() { // 添加鼠标悬停效果 $("#myTable tbody tr").hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); }); // 添加奇偶行颜色 $("#myTable tbody tr:odd").addClass("odd"); $("#myTable tbody tr:even").addClass("even"); }); ``` 在上面的代码中，我们使用了 jQuery 的 `hover()` 方法来添加鼠标悬停效果，使用了 `addClass()` 和 `removeClass()` 方法来添加奇偶行颜色。同时，我们还使用了 CSS 的 `border-collapse` 属性来去掉单元格之间的间隙，并使用了 `background-color` 和 `color` 属性来设置表头的背景色和文字颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值