修改html 属性,css样式。
一 通过修改标签属性来改变它的样式
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样式。的更多相关文章
- C#添加修改控件css样式
一.添加属性 MyStyleSheet.Attributes.Add("href","/css/flostyle.css") 二.改变css样式 if (use ...
- Html 修改placeholder的颜色属性css样式
项目需求需要修改文本框的placeholder 的文本颜色, 百度下, 备忘,我使用的是这种方法, ::-webkit-input-placeholder { /* WebKit browsers * ...
- 【html】【5】html class属性css样式
必看参考: http://www.divcss5.com/css3-style/ http://www.jb51.net/css/142448.html http://www.w3school.com ...
- jq修改多个css样式
$("#xxx").css({"属性名称": "属性值", "属性名称": "属性值" });
- 自动修改博客CSS样式用的代码
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js&qu ...
- CSS样式----图文详解(二):css属性
主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...
- CSS样式----CSS属性:字体属性和文本属性(图文详解)
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- JavaScript--动态更改CSS样式
JavaScript太强大了,虽然是弱语言,不过一点都不输于Java 可以自行设置随机数,来动态更改CSS样式,每一次都是不一样的感觉,这个小功能挺实用的 <!DOCTYPE html> ...
随机推荐
- asp.net MVC2.0学习笔记
asp.net;与mvc都是不可替代的:只是多一种选择:(解决了许多asp.net的许多缺点) model:充血模型.领域模型:很大程度的封装: 控制器:处理用户的交互,处理业务逻辑的调用,指定具体的 ...
- .NET MVC学习之模型绑定
ASP.NET MVC学习之模型绑定(2) 继ASP.NET MVC学习之模型绑定继续 3.手工调用模型绑定 很多情况下我们都是通过形参的方式接收来自http流中的数据,这看似是完美的,但是缺少了 ...
- NPOI 2.0 Excel读取显示
NPOI 2.0 Excel读取显示 最近接到需求,需要把excel表格里的数据原样展示到web页面,主要是满足随意跨行跨列. 之前用过一点NPOI,不过接触的不太多,趁这次机会再熟悉一下.由于操 ...
- 【学习笔记】锋利的jQuery(二)DOM操作
一.获取DOM节点 //找祖宗 parent() parents() closest() //找后代 children(); find(); //找兄弟 next()/nextAll() prev() ...
- C语言与linux的故事
声明:本文是作者读完http://www.aqee.net/proof-that-linux-is-always-number-1/这篇文章后的随想. 凌晨2点,电脑前,程序员还在不断修改着自己的代码 ...
- POJ 3667 & 1823 Hotel (线段树区间合并)
两个题目都是用同一个模板,询问最长的连续未覆盖的区间 . lazy代表是否有人,msum代表区间内最大的连续长度,lsum是从左结点往右的连续长度,rsum是从右结点往左的连续长度. 区间合并很恶心啊 ...
- npm 安装与常用命令
下载nodejs并安装,会附带安装npm工具https://nodejs.org/en/download/ npm 常用命令#在执行命令时需要管理员权限,mac请用sudo来执行,windows请使用 ...
- 用C#中实现的,调用CMD来执行BCP的代码
用C#中实现的,调用CMD来执行BCP的代码 用c#中实现,调用cmd来执行bcp的代码,大家共享!引用空间:using System;using System.Data;using System.D ...
- Linux下的IO监控与分析
Linux下的IO监控与分析 近期要在公司内部做个Linux IO方面的培训, 整理下手头的资料给大家分享下 各种IO监视工具在Linux IO 体系结构中的位置 源自 Linux Performan ...
- .net下灰度模式图像
.net下灰度模式图像在创建Graphics时出现:无法从带有索引像素格式的图像创建graphics对象 问题的解决方案. Posted on 2013-07-13 14:23 Imageshop 阅 ...