十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
可以用jquery中的css()方法;
创新互联是一家专业提供平顶山企业网站建设,专注与成都网站设计、成都做网站、H5场景定制、小程序制作等业务。10年已为平顶山众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
css()有两个参数。第一个参数是必选参数,一般是指css样式中的属性。第二个参数是可选参数,一般是指css样式中属性的值。当只有第一个参数是,则是指获取该属性的值。如果也有第二个参数,那就是表示改变属性的值。
示例如下:
!doctype html
html
head
meta charset='utf-8' /
title/title
script type="text/javascript" language="javascript" src='jquery.js'/script
script language='javascript'
$(function(){
$('#btn1').click(function(){
//css()为一个参数
var divWid=$('#div-box').css('width');
alert(divWid);
});
$('#btn2').click(function(){
//css()为两个参数
var divWid=$('#div-box').css('background','#00f');
});
})
/script
style type="text/css"
#div-box {width:200px;height:100px;background:#f00;}
/style
/head
body
div id="div-box"/div
input type='button' id='btn1' value='提取' /
input type='button' id='btn2' value='改变' /
/body
/html
这里主要有以下几种方法:
一、在显示和隐藏的时候,可以设置显示隐藏的时间,$("#id").show("500")和$("#id").hide("500"),这样看上去有一个过渡的效果。
二、在菜单(尤其的联动菜单时)的下拉和收起时,使用$("#id").slideDown("500")和slideUp("500"),可以设置时间的长短。
三、一般的动画过渡用$("#id").animate()这个方法。如楼上的animate(({
opacity
:
"0.3"
},500)。
希望可以绑到你!
jquery中css()方法可以并列多个属性。如下参考
/*css(properties)
把一个“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
*/
例如:
$("p").css({ color: "#ff0011", background: "blue" });
$("p").css({ "margin-left": "10px", "background-color": "blue" });
设置css样式的多种方法总结,jquery
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleDocument/title
style
/style
/head
body
ul
li兄弟多个1/li
li兄弟多个2/li
li兄弟多个3/li
li兄弟多个4/li
li兄弟多个5/li
li兄弟多个6/li
li兄弟多个7/li
li兄弟多个8/li
li兄弟多个9/li
/ul
ul id="ul"
li兄弟多个1/li
li兄弟多个2/li
li兄弟多个3/li
li兄弟多个4/li
li兄弟多个5/li
li兄弟多个6/li
li兄弟多个7/li
li兄弟多个8/li
li兄弟多个9/li
/ul
script type="text/javascript" src="jquery-1.11.1.js"/script
script
//设置css属性
$("ul").css("backgroundColor","red");
//同时设置多值
$("ul").css({
backgroundColor: "yellow",
fontSize: "16px"
});
//间隔显示不一样的颜色
$("#ul li").css("color",function(index,value){
console.log(index); //当前元素的序号
console.log(value); //当前元素要设置的样式的值
if(index%2==0){
return "red";
}else{
return "blue";
}
});
/script
/body
/html