一 通过修改标签属性来改变它的样式 
  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. asp.net MVC2.0学习笔记

    asp.net;与mvc都是不可替代的:只是多一种选择:(解决了许多asp.net的许多缺点) model:充血模型.领域模型:很大程度的封装: 控制器:处理用户的交互,处理业务逻辑的调用,指定具体的 ...

  2. .NET MVC学习之模型绑定

    ASP.NET MVC学习之模型绑定(2)   继ASP.NET MVC学习之模型绑定继续 3.手工调用模型绑定 很多情况下我们都是通过形参的方式接收来自http流中的数据,这看似是完美的,但是缺少了 ...

  3. NPOI 2.0 Excel读取显示

    NPOI 2.0 Excel读取显示   最近接到需求,需要把excel表格里的数据原样展示到web页面,主要是满足随意跨行跨列. 之前用过一点NPOI,不过接触的不太多,趁这次机会再熟悉一下.由于操 ...

  4. 【学习笔记】锋利的jQuery(二)DOM操作

    一.获取DOM节点 //找祖宗 parent() parents() closest() //找后代 children(); find(); //找兄弟 next()/nextAll() prev() ...

  5. C语言与linux的故事

    声明:本文是作者读完http://www.aqee.net/proof-that-linux-is-always-number-1/这篇文章后的随想. 凌晨2点,电脑前,程序员还在不断修改着自己的代码 ...

  6. POJ 3667 & 1823 Hotel (线段树区间合并)

    两个题目都是用同一个模板,询问最长的连续未覆盖的区间 . lazy代表是否有人,msum代表区间内最大的连续长度,lsum是从左结点往右的连续长度,rsum是从右结点往左的连续长度. 区间合并很恶心啊 ...

  7. npm 安装与常用命令

    下载nodejs并安装,会附带安装npm工具https://nodejs.org/en/download/ npm 常用命令#在执行命令时需要管理员权限,mac请用sudo来执行,windows请使用 ...

  8. 用C#中实现的,调用CMD来执行BCP的代码

    用C#中实现的,调用CMD来执行BCP的代码 用c#中实现,调用cmd来执行bcp的代码,大家共享!引用空间:using System;using System.Data;using System.D ...

  9. Linux下的IO监控与分析

    Linux下的IO监控与分析 近期要在公司内部做个Linux IO方面的培训, 整理下手头的资料给大家分享下 各种IO监视工具在Linux IO 体系结构中的位置 源自 Linux Performan ...

  10. .net下灰度模式图像

    .net下灰度模式图像在创建Graphics时出现:无法从带有索引像素格式的图像创建graphics对象 问题的解决方案. Posted on 2013-07-13 14:23 Imageshop 阅 ...