可以用jquery中的css()方法;
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:200pxheight:100pxbackground:#f00}
</style>
</head>
<body>
<div id="div-box"></div>
<input type='button' id='btn1' value='提取' />
<input type='button' id='btn2' value='改变' />
</body>
</html>
css()方法
获取或设置样式
对以下html标签进行样式的获取和设置
css()方法设置参数,参数为要设置的样式名
可用驼峰命名也可用css命名方式。注意样式名需要加''
点击获取按钮,结果:
但是在IE浏览器里,用 console.log($('#div1').css('border'))可能会不显示或出现undefined。
在IE浏览器中,要获取边框这样的样式值,一定要记得给一个准确的边框值。例如:
console.log($('#div1').css('Border-top-width'))//2px
获取包含了多个DOM元素的jQuery对象的样式,只能获取到第一个DOM对象的样式。例如:
console.log($('div').css('width'))//200px
css(样式名,样式值)
设置的样式是行内样式
单样式里样式名必须在''里,宽高度单位px可不写,这时300可不加'',如果加px,则必须为'300px'
多样式里样式名可不加''。但是 background-color:'green' 这样写报错。
给多个div一起设置样式
隐式迭代,把每一个div都设置了同样的样式
1、jQuery设置css样式
<div style="background-color:#ffffffpadding-left:10px">测试jQuery动态获取padding-left</div>
2、用css()方法返回元素的样式属性
$("div").css("padding-left"))
3、用css()设置样式
$("div").css("color","yellow")
4、设置多个样式
$("div").css({"background-color":"yellow","font-size":"200%"})
var css = {
background-color: '#EEE',
height: '500px',
margin: '10px',
padding: '2px 5px' }
$("div").css(css)