属性操作：更换图片、改变字体样式

1、更换图片：

在jQuery中，我们可以使用attr()方法来获取元素的某一个HTML属性值。
语法：

$().attr("属性名")

说明：获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。

代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="../static/js/jquery-3.5.1.js"></script><script>$(function () {var flag = true;$("#btn").click(function(){if(flag){$("#pic").attr("src", "../practice/image/比卡超2.jpg");flag = false;}else{$("#pic").attr("src", "../practice/image/喷火龙.jpg");flag = true;}});})</script>
</head>
<body><input id="btn" type="button" value="修改" /><br/><img id="pic" src="../practice/image/喷火龙.jpg" />
</body>
</html>

运行效果：
未点击前：

点击后：

2、添加、删除文字样式属性

说明：在jQuery中，我们可以使用attr()方法来删除元素的某个属性，我们可以使用removeAttr()方法来删除元素的某个属性。

语法：

// 添加属性
$().attr("属性名")
// 删除属性
$().removeAttr("属性名")

代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style>.content{color:green;font-weight:bold;}</style><script src="../static/js/jquery-3.5.1.js"></script><script>$(function () {$("#btn_add").click(function(){$("p").attr("class", "content");});$("#btn_remove").click(function () {$("p").removeAttr("class");});})</script>
</head>
<body><p>古天乐变绿了</p><input id="btn_add" type="button" value="添加样式" /><input id="btn_remove" type="button" value="删除样式" />
</body>
</html>

运行效果：

点击前：
点击添加样式后：
点击删除样式后：

前端HTML调用jQuery库，属性操作:更换图片、添加字体样式（前端：HTML搭配jQuery系列教程六）相关推荐

jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
学习使用jquery控制select下拉选项的字体样式
学习使用jquery控制select下拉选项的字体样式实现代码实现代码 <script src="../jquery-2.1.4.min.js"></scri ...
jQuery之属性操作
文章目录 1.jQuery属性操作 1.1 元素固有属性值 prop() 1.2 元素自定义属性值 attr() 1.3 数据缓存 data() 2. jQuery 文本属性值 3. jQuery 元 ...
[jQuery基础] jQuery对象 -- 属性操作
属性操作属性和属性节点 1.什么是属性? 对象身上保存的变量就是属性 2.如何操作属性? 对象.属性名称 = 值对象.属性名称对象["属性名称"] = 值对象[" ...
JQuery的属性操作及事件
一.属性操作 1.固有属性 (1)获取:选中元素.prop('属性名') console.log($('img').prop('src')); (2)设置:选中元素.prop('属性名','值') & ...
php gd图片写入文字,PHP调用GD库将文字转为图片大标题分析
该楼层疑似违规已被系统折叠隐藏此楼查看此楼问题出现: 单位正在组织人员用phpcms2008进行二次开发,建立门户网站.为了方便编辑人员制做头条新闻的大标题,做了一个文字转图片的功能,实现编辑人员 ...
用freetype开源字体库，实现在图片上字体大小
掌握truetype字体原理,利用freetype开源字体库,实现在图片上书写一行字体大小变化的诗句(比如首字体增大). 首先,在树莓派上安装freetype: 下载好: 传输文件,并且安装好: 解压 ...
java前端页面调用webservice_一个简单的Webservice的demo(中)_前端页面调用
首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 这里我们要新建一个服务,调用我们引用给服务.因为一般情况下js不能跨域访问服务的,当然,只是一般,要非得 ...
锐龙调用python库的问题_【深度】关于AMD锐龙5000系列移动处理器我所知道的一切...
AMD在1月13日凌晨的CES2021 Lisa Su Keynote上一口气发布了14款锐龙5000系列移动处理器新品,阵容之庞大,提升幅度之多,令人惊叹!而在发布产品两天之后的上午,我们有幸作为受 ...

前端HTML调用jQuery库，属性操作:更换图片、添加字体样式（前端：HTML搭配jQuery系列教程六）

属性操作：更换图片、改变字体样式

1、更换图片：

2、添加、删除文字样式属性

前端HTML调用jQuery库，属性操作:更换图片、添加字体样式（前端：HTML搭配jQuery系列教程六）相关推荐

最新文章

热门文章