jq动态修改css样式表,jquery 动态改变css样式

jquery 几乎成了现在开发WEB应用的标准JS库，这与其简单性和易用性是分不开的。作为一个后端开发人员，要做一些前端页面时，CSS 样式的控制是少不了需要掌握的。如果是静态的CSS，当然是可以直接写上去的，但有些界面是需要一些动态效果的，比如颜色变化，字体大小变化，甚至DIV 的隐藏于现实等，这些都需要用javascript 动态控制其CSS样式，下面就常用的jquery 控制 css 样式的方法做一个小结.

1. 改变超级链接的样式

2. 给指定的html元素给一个指定的CSS 样式

3. 查看元素的css样式

4. 隐藏与显示div或指定的其他html元素

一、改变超级链接的样式$("#mylink a").css('color','#111111');

//这里选择器‘$("#mylink a")’表示ID为'#mylink'的元素下的所有链接。

//.css(‘color’,'#111111');表示把颜色设为'#111111'

二、给指定的html元素指定一个已经定义好的CSS 样式

1. 你可以在外部css文件中建立一个css样式，比如

.mystyle{width:200px;height:100px;}

然后用jquery 赋值

$("#result").css(mystyle);

2. 可以定义一个css对象(也就是javascript对象)，然后赋值

var divcss = {

background: '#EEE',

width: '478px',

margin: '10px 0 0',

padding: '5px 10px',

border: '1px solid #CCC'

};

$("#result").css(divcss);

这种方式类似于外部链接方式，个人推荐外部链接方式.

三、查看元素的CSS样式

var mycolor=$("#mylink a").css("color");

if ($('#mydiv').css('display')=="none"){...}

//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

四、隐藏于显示div或其他元素

1.直接修改CSS方式

$('#mydiv').attr('style','display:none;');//隐藏

$('#mydiv').attr('style','display:block;');//显示

jq动态修改css样式表,jquery 动态改变css样式相关推荐

Python动态修改Word文档内容，保留格式样式，并批量生成PDF
Python动态修改Word文档内容,保留格式样式,并批量生成PDF 前言一.需要安装的库二.核心逻辑-替换前言假如你有一个Word模版文档,要在里面填写人员信息,但人员有成百上千个,手动填起 ...
如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
js动态添加样式和jQuery动态添加样式
0.style方式添加样式 DOM对象.style.color = 'red'DOM对象.style.display = 'block/none' //让元素显示/隐藏 1.js动态添加样式 1.添加 ...
jquery改变html样式表,jQuery CSS()方法改变现有的CSS样式
jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代 ...
java中冒号是什么意思_css样式表有哪些？css双冒号是什么意思
SS即层叠样式表(英语:Cascading Style Sheets,又称串样式列表.级联样式表.串接样式表.阶层式样式表)是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体.间距和颜 ...
引用自己创建的css样式表_如何使用CSS创建联系表
引用自己创建的css样式表 First we create the HTML elements - input fields for First Name, Last Name, Email and ...
jQuery基础 - 改变CSS样式
本文转自:http://www.cnblogs.com/Capricornus/archive/2010/02/10/1667095.html,所有权利归原作者所有. jQuery提供css()的方法 ...
jquery使用html()css不生效,jquery可以添加css样式吗？
jquery可以添加css样式吗?答案是:可以.那么如何添加css样式?下面本篇文章就来给大家介绍一下使用jquery添加css样式的方法,希望对大家有所帮助. 在jquery中,可以使用addCla ...
js如何修改html样式,怎么用js改变css样式？
怎么用js改变css样式?下面本篇文章给大家介绍一下使用JavaScript改变css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 怎么用js改变css样式? 1.通过 ...

jq动态修改css样式表,jquery 动态改变css样式

jq动态修改css样式表,jquery 动态改变css样式相关推荐

最新文章

热门文章