jQuery-css()方法总结——获取/设置样式

末蓝、 2021-06-22 15:35 595阅读 0赞

# css()方法总结 #

总结一下jQuery中使用css()方法获取和设置样式的特性。

首先新建一个html文件，内容如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>设置/获取样式内容</title>
    		<style type="text/css"> #div1 { height: 50px; 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>
    </html>

初始效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]

#### 1. 获取样式 ####

css()方法，设置的参数为要获取的样式名称。

##### 获取id为div1的样式 #####

$('#getBtn').click(function() { 
    	console.log($('#div1').css('width'));
    	console.log($('#div1').css('height'));
    	console.log($('#div1').css('background-color'));
    	console.log($('#div1').css('border'));
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 1]  
但是这里有个问题，我们在IE浏览器试一次：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 2]  
在IE8下，边框这个属性是获取不到的。因为在IE中，要想获取边框的属性，一定要给出一个准确的边框属性。比如我们要想获取上边框的宽度：`console.log($('#div1').css('border-top-width'));`，我们发现这样就可以了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 3]

##### 获取所有div的样式 #####

现在我们要获取所有div的宽度，我们知道，上面四个div的宽度是不同的，那会出现什么结果呢？

console.log($('div').css('width'));

结果：  
![在这里插入图片描述][20191115154750326.png]  
我们可以看到，这样获取到样式的操作，是只会返回第一个dom对象的样式。

#### 2. 设置样式 ####

##### 给指定id的div设置样式 #####

当我们点击设置按钮的时候，就把第一个div的宽度设置为300px：

$('#setBtn').click(function() { 
    	$('#div1').css('width', '300px');
    	$('#div1').css('height', '300px');
    	$('#div1').css('background-color', 'red');
    	$('#div1').css('border', '5px solid green');
    });

结果显示是可以的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 4]  
而且通过右边的elements栏我们可以看出来，通过这种方式设置的样式都是行内样式(内联样式)。而且这样，我们是每一次都是给div设置一个样式，我们也把它称之为**设置单样式**。那么如果我们想要给它**设置多样式**呢，我们就可以这么做：

$('#div1').css({ 
    	'width':'300px',
    	'height':'50px',
    	'background-color':'pink',
    	'border':'3px solid green'
    });

上面的代码中，我们给css()方法一个对象，这样也是可以的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 5]

##### 给所有的div设置样式 #####

接下来，我们尝试给所有的div设置一下样式：

$('div').css({ 
    	'width':'100px',
    	'height':'50px',
    	'background-color':'black',
    	'border':'3px solid red'
    });

我们看一下结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 6]  
这里也有一个隐式迭代，他会帮我们遍历所有的dom对象。

--------------------

END.

如果你不沉下心来认真练习，所有的阅读都是白费的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/740698d5106b4120829b31a24abc1d1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 1]: /images/20210615/ba9dc32aadac4396b9a0e0011e395fb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 2]: /images/20210615/9f8ac3e2b3434d1bba396e2ee0b79540.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 3]: /images/20210615/d596ae538ec746179715b008713b097f.png
[20191115154750326.png]: /images/20210615/783df2e91d8940a985084cd060d83f5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 4]: /images/20210615/2f3d107dcea64a2580b2e658e60d023d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 5]: /images/20210615/11404f60919a435d834bcd4e502651cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 6]: /images/20210615/9bd0b2a073614063a1687f2510286900.png