修改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> ...
随机推荐
- 简单的php和apache的安装
今天刚刚接触到PHP 要想深入学习一门语言 首先我们先从安装开始 对于php和apache这两个程序是比较难以安装的 好了 下面我们开始正式安装: 首先我们得准备好 apache 以及 ...
- 个推推送 产品SDK常见问题检查
作者:Hong Jack链接:https://zhuanlan.zhihu.com/p/20733333来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 通知和消息有什么 ...
- Jenkins中关于一些插件的使用方法
最近在为公司搭建CI平台过程中,以及在具体项目实施过程中使用过的一些插件的具体用法: 1. ant插件 这个插件可能是我们最为经常使用的,若构建脚本是使用build.xml的,那构建引擎肯定会选择an ...
- jQuery的奥秘
颜海镜 高效jQuery的奥秘 讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好 ...
- iOS推送服务细节回顾
iOS推送服务细节回顾 之前在做推送功能时候,就总结过一系列证书的制作,OC代码实现和服务器搭建等经验.又过了一段时间了,前前后后对推送服务做了多次的完善和优化,有iOS客户端的,还有本地服务器端的. ...
- 职责链模式实例(C#)
下面是使用指责链模式的一个具体的实例,可以方便的理解指责链模式. 其实指责链简单的来说,就是把一个指责的流程定义出来,像一条链路一样,每一个结点有自己的处理范围,若不能处理,则传到自己的引用的下一个结 ...
- Vi编辑器入门
Vi编辑器入门 vi编辑器是所有Unix及Linux系统下标准的编辑器,类似于windows上的记事本! 1.vi的基本概念 基本上vi可以分为三种状态,分别是命令模式(command mode ...
- Task.WhileAll扩展方法
TPL实现Task.WhileAll扩展方法 文章翻译整理自 Nikola Malovic 两篇博文: Task.WhileAll Awaitable task progress reporting ...
- Centos 5上使用YUM安装GIT
网上搜索的基本上都是一样的内容 1.先安装git依赖的包 yum install zlib-devel yum install openssl-devel yum install perl yum i ...
- Qt在表格中加入控件
任务:使用QTableWidget动态生成表格,在每行的某两列中加入QComboBox下拉框控件和QPushButton按钮控件 有添加,删除,编辑功能,每行的按钮可以浏览文件夹并选择文件 1.新建一 ...