700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jq动态修改css样式表 jquery 动态改变css样式

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

时间:2020-04-18 20:11:46

相关推荐

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;');//显示

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。