jQuery获取设置样式
2022-03-07 本文已影响0人
马佳乐
css();方法
获取或设置样式
对以下html标签进行样式的获取和设置
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
height: 200px;
background-color: pink;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="获取" id="getBtn" />
<input type="button" value="设置" id="setBtn" />
<div id="div1" style="width: 200px;"></div>
<div id="div2" style="width: 300px;"></div>
<div id="div3" style="width: 400px;"></div>
</body>
获取样式
css();方法设置参数，参数为要设置的样式名
<script>
$(function(){
$('#getBtn').click(function(){
console.log($('#div1').css('width'));
console.log($('#div1').css('height'));
console.log($('#div1').css('background-color'));
console.log($('#div1').css('backgroundColor'));
console.log($('#div1').css('width'));
console.log($('#div1').css('border'));
});
});
</script>
可用驼峰命名也可用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(样式名,样式值);
设置的样式是行内样式
设置单样式
<script>
$(function(){
$('#setBtn').click(function(){
$('#div1').css('width','30Opx');
$('#div1').css('height',300);
$('#div1').css('backgroundColor','red');
$('#div1').css('border','10px solid green');
});
});
</script>
单样式里样式名必须在''里，宽高度单位px可不写，这时300可不加''，如果加px，则必须为'300px'
设置多样式
<script>
$(function(){
$('#setBtn').click(function(){
$('#div1').css({
width:300,
'height':'300px',
//'background-color':'green',//这样也正确
backgroundColor:'green',
'border-top-width':'10px'
});
});
});
</script>
多样式里样式名可不加''。但是background-color:'green'这样写报错。
给多个div一起设置样式
隐式迭代,把每一个div都设置了同样的样式
<script>
$(function(){
$('#setBtn').click(function(){
$('div').css({
width:300,
'height':'300px',
backgroundColor:'green',
'border':'10px solid red',
marginTop:10
});
});
});
</script>
