用jQuery获取元素样式
时间: 2024-05-06 16:20:16 浏览: 18
可以使用`css()`函数来获取元素的样式。
例如,要获取元素`<div id="myDiv" style="color: red; font-size: 16px;">Hello World!</div>`的字体大小,可以使用以下代码:
```javascript
var fontSize = $('#myDiv').css('font-size');
console.log(fontSize); // 输出16px
```
可以通过传递一个参数来获取多个样式:
```javascript
var styles = $('#myDiv').css(['color', 'font-size']);
console.log(styles); // 输出{color: "red", font-size: "16px"}
```
注意,`css()`函数返回的样式值都是字符串,需要根据需要进行转换。例如,可以使用`parseInt()`函数来将像素值转换为整数。
```javascript
var fontSize = parseInt($('#myDiv').css('font-size'), 10);
console.log(fontSize); // 输出16
```
相关问题
用jQuery获取元素样式属性值练习
1. 获取元素的宽度和高度:
```javascript
var width = $('#element').width();
var height = $('#element').height();
```
2. 获取元素的背景色:
```javascript
var bgColor = $('#element').css('background-color');
```
3. 获取元素的字体大小:
```javascript
var fontSize = $('#element').css('font-size');
```
4. 获取元素的边框宽度:
```javascript
var borderWidth = $('#element').css('border-width');
```
5. 获取元素的内边距:
```javascript
var padding = $('#element').css('padding');
```
6. 获取元素的外边距:
```javascript
var margin = $('#element').css('margin');
```
7. 获取元素的位置:
```javascript
var offset = $('#element').offset();
var top = offset.top;
var left = offset.left;
```
8. 获取元素的滚动位置:
```javascript
var scrollTop = $('#element').scrollTop();
var scrollLeft = $('#element').scrollLeft();
```
jquery 获取元素的style
你可以使用jQuery的`css()`方法来获取指定元素的样式属性值,例如:
```javascript
var color = $('#myElement').css('color');
var fontSize = $('#myElement').css('font-size');
```
这样就可以获取`id`为`myElement`的元素的 `color` 和 `font-size` 样式属性值了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)