jquery如何改变html标签的样式(两种实现方法)


Posted in Javascript onJanuary 16, 2013

对于如何修饰html标签,这对于js来说,可以通过setAttribute来设置标签的属性,通过getAttribute来得到标签的属性,而在jq中当然也可以实现类似的功能,方法上肯定比js要简化多了。
一 通过修改标签属性来改变它的样式
js设置和获取标签的属性

  <script type="text/javascript"> 
window.onload = function () { 
var attr = document.getElementById("attr"); 
attr.setAttribute("style", "font-weight:bold;") 
alert(attr.getAttribute("style")); 
} 
</script>

jq设置和获取标签的属性
<script src="http://img1.c2cedu.com/Scripts/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$("#attr").attr("style", "color:#ff0000");//单个属性的设置 
$("#Avatar").attr({ "class": "banner", "alt": "头像", "src": "http://pic.cnblogs.com/avatar/a118538.jpg?id=11133319" });//多个属性的设置 
alert($("#Avatar").attr("src")); //得到指定标签的属性 
}); 
</script>

值得注意的是JS的window.onload方法块的内容是在JQ的$(function(){})方法块执行完成后,再执行的。
二 通过修改标签的css样式来改变它的样式
看看基本的语法:
$("#attr").addClass("banner");//添加样式 
$("#attr").removeClass("banner");//移除样式 








//JQ支持连带写法,因为removeClass的返回结果也是一个Jq对象,所以Jq对象的所有方法和事件它都可以使用 
$("#attr").removeClass("banner").addClass("bannerOver");

下面是一个例子,当在dd标签上单击时,将当前dd块进行高亮显示
<style> 
.banner { background: #0094ff; } 
.bannerOver { background: #808080; } 
.cur { background: #ff6a00; } 
</style> 
<script> 
$(function () { 
$('#menu_title').find('dd').click(function () { 
$('#menu_title').find('dd').removeClass('cur'); 
$(this).addClass('cur'); 
}) 
}) 
</script> 
<dl id="menu_title"> 
<dt>人</dt> 
<dd>一种高级动物</dd> 
<dt>狗</dt> 
<dd>人类的朋友</dd> 
<dt>猫</dt> 
<dd>猫科动物的祖先</dd> 
</dl>

下面是为表格的隔行变色效果
.odd { background: #808080; } 
.even { background: #ffd800; } 
.selected { background: #0094ff; color: #fff; }
 .hover { background: #808080; }

var $trs = $("#menu_title>dd"); //选择所有行 $trs.filter(":odd").addClass("odd"); //给奇数行添加odd样式 $trs.filter(":even").addClass("even"); //给偶数行添加odd样式

单击行后,让当前行高亮显示
//点击行,添加变色样式 
$trs.click(function(e) { 
$(this).addClass("selected") 



 .siblings()



 .removeClass("selected"); 
})

添加鼠标移入与移出事件
 // 鼠标移入 与移出 
$("#menu_title>dd").hover( 
function () { 
$(this).addClass("hover"); 
}, 
function () { 
$(this).removeClass("hover"); 
} 
);

恩,好了对于标签的样式控制这块内容就讲到这里吧,感谢您的阅读!
Javascript 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 #Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 #Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 #Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 #Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 #Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 #Javascript
JQuery验证工具类搜集整理
Jan 16 #Javascript
You might like
用PHP查询域名状态whois的类
2006/11/25 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
浅谈Vue.js
2017/03/02 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
python实现图像全景拼接
2020/03/27 Python
小结Python的反射机制
2020/09/28 Python
python selenium 获取接口数据的实现
2020/12/07 Python
环境科学专业大学生自荐信格式
2013/09/21 职场文书
建筑设计所实习生自我鉴定
2013/09/25 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
大一学生个人总结
2015/02/15 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
Python中的 enumerate和zip详情
2022/05/30 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android