对于如何修饰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");//移除样式 　　　　　　　　　　　　　　　　　　//ＪＱ支持连带写法，因为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"); } ); 恩，好了对于标签的样式控制这块内容就讲到这里吧，感谢您的阅读！

　　推荐阅读

　　js拦截alert对话框另类应用

复制代码 代码如下: <input type="button" onclick="opened('ALERT')" value="提示"/> <script> var myAlert=alert; window.alert=function(msg){ //your code myAlert (msg+"-TEST"); } function opened(msg){ al>>>详细阅读

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

地址：http://www.17bianji.com/kaifa2/JS/22484.html

 1/2    1