一 通过修改标签属性来改变它的样式 
  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. MEF插件系统中通信机制的设计和实现

    MEF插件系统中通信机制的设计和实现 1.背景 一般的WinForm中通过C#自带的Event机制便能很好的实现事件的注册和分发,但是,在插件系统中却不能这么简单的直接用已有的类来完成.一个插件本不包 ...

  2. C#程序员阅读的书籍

    推荐几本C#程序员阅读的书籍   楼主这些年一直追随微软技术,也看了不少书籍,整理出一些个人认为不错的经典,推荐给各位阅读,以共同进步. 推荐顺序是由浅入深,深入浅出. <Professiona ...

  3. java中dao层的通用层,通过反射机制,操作数据库的增删改,适用的范围是不包含属性类

    这里首先必须注意的是:类的类名.字段必须与数据库中的表名和字段名保持一致,否则无法通过反射机制作出通用层 /** * 学生信息类,数据库中的StuInfo表 * */public class StuI ...

  4. MVC 过滤器3

    ASP.NET MVC 过滤器(三) ASP.NET MVC 过滤器(三) 前言 本篇讲解行为过滤器的执行过程,过滤器实现.使用方式有AOP的意思,可以通过学习了解过滤器在框架中的执行过程从而获得一些 ...

  5. 项目管理Project

    使用Project进行项目管理 - 项目管理系列文章 Posted on 2014-02-04 11:59 lzhdim 阅读(1175) 评论(0) 编辑 收藏 本系列文章列表地址:http://w ...

  6. SZU:G34 Love code

    Judge Info Memory Limit: 32768KB Case Time Limit: 10000MS Time Limit: 10000MS Judger: Normal Descrip ...

  7. python 调用shell命令的方法

    在python程序中调用shell命令,是件很酷且常用的事情…… 1. os.system(command) 此函数会启动子进程,在子进程中执行command,并返回command命令执行完毕后的退出 ...

  8. [Usaco2008 Mar]River Crossing渡河问题[简单DP]

    Description Farmer John以及他的N(1 <= N <= 2,500)头奶牛打算过一条河,但他们所有的渡河工具,仅仅是一个木筏. 由于奶牛不会划船,在整个渡河过程中,F ...

  9. MAKE gnu

    GNU Make 学习系列一:怎样写一个简单的Makefile 编程通常遵循一个相当简单的程序:编辑源文件,编译源代码成可执行的格式,调试结果.尽管将源代码翻译成可执行程序是常规的过程,如果做的不正确 ...

  10. What skills are needed for machine learning jobs

    What skills are needed for machine learning jobs?机器学习工作必须技能 原文: http://www.quora.com/Machine-Learnin ...