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 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
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.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
基于vue2.0实现简单轮播图
2017/11/27 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
类的核心特性有哪些
2014/01/01 面试题
函授大学生自我鉴定
2014/02/05 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis