一 通过修改标签属性来改变它的样式 
  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>

  添加鼠标移入与移出事件

$("#menu_title>dd").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

  

修改html 属性,css样式。的更多相关文章

  1. C#添加修改控件css样式

    一.添加属性 MyStyleSheet.Attributes.Add("href","/css/flostyle.css") 二.改变css样式 if (use ...

  2. Html 修改placeholder的颜色属性css样式

    项目需求需要修改文本框的placeholder 的文本颜色, 百度下, 备忘,我使用的是这种方法, ::-webkit-input-placeholder { /* WebKit browsers * ...

  3. 【html】【5】html class属性css样式

    必看参考: http://www.divcss5.com/css3-style/ http://www.jb51.net/css/142448.html http://www.w3school.com ...

  4. jq修改多个css样式

    $("#xxx").css({"属性名称": "属性值", "属性名称": "属性值" });

  5. 自动修改博客CSS样式用的代码

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js&qu ...

  6. CSS样式----图文详解(二):css属性

    主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...

  7. CSS样式----CSS属性:字体属性和文本属性(图文详解)

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  8. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  9. JavaScript--动态更改CSS样式

    JavaScript太强大了,虽然是弱语言,不过一点都不输于Java 可以自行设置随机数,来动态更改CSS样式,每一次都是不一样的感觉,这个小功能挺实用的 <!DOCTYPE html> ...

随机推荐

  1. MVC 插件式开发

    MVC 插件式开发 在开发一个OA系统是,我们可能遇到 A模块. B模块 .C模块,这也模块组成一个完整的系统,买给客服.现在又有一个客服要我们做一个OA系统,唉我们发现,跟上一个OA系统差不多,但没 ...

  2. 缓存,spring

    applicationcontext.xml xmlns:cache="http://www.springframework.org/schema/cache" xsi:schem ...

  3. .NET开发面向对象1

    ASP.NET开发,从二层至三层,至面向对象 昨天Insus.NET有写了一篇博文<WEB控件没有什么所谓好不好,而是用得好不好>http://www.cnblogs.com/insus/ ...

  4. Javascript多线程引擎(一)

    Javascript多线程引擎(一) Javascript 天生是单线程的语言, 不支持synchronized等线程操作, 但是这便不妨碍Javascript作为web语言中最具有魅力语言之一. 虽 ...

  5. 青铜器RDM全面支持CMMI、GJB5000A L2~L5认证评估

    青铜器RDM全面实现对CMMI L4.GJB5000A L4的100%支持,并且已经成为众多组织CMMI.GJB5000A落地执行的有效手段,避免认证与执行2张皮,有利于体系的贯彻执行,以下是青铜器R ...

  6. 冒泡排序最佳情况的时间复杂度,为什么是O(n)

    冒泡排序最佳情况的时间复杂度,为什么是O(n) 我在许多书本上看到冒泡排序的最佳时间复杂度是O(n),即是在序列本来就是正序的情况下. 但我一直不明白这是怎么算出来的,因此通过阅读<算法导论-第 ...

  7. JobTracker等相关功能模块初始化

    [Hadoop代码笔记]Hadoop作业提交之JobTracker等相关功能模块初始化 一.概要描述 本文重点描述在JobTracker一端接收作业.调度作业等几个模块的初始化工作.想过模块的介绍会在 ...

  8. Day1:T1 模拟 T2 拓扑排序

    T1:模拟 自己第一天的简直跟白痴一样啊...模拟都会打错.. 当时貌似在更新最大值的时候打逗比了... if((sum[x]==max && x<maxh) || sum[x] ...

  9. JavaScript插件——模态框

    Bootstrap3.0学习第十七轮(JavaScript插件——模态框)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  10. jquery 分页控件1

    jquery 分页控件(一) 以前一直都是用别人的分页控件,虽然用得很爽,但总觉的还是自己写个小插件比较好,这个插件效果.代码等都有参照别人完成的控件.即便功能并不是那么完善,扩展性也不好,bug或许 ...