极客教程使用jQuery获取CSS属性的数字部分
给定一个HTML文档，任务是获取CSS属性中的数字部分。比如margin-top = 10px，我们想只提取10。这里讨论了一些方法。
首先要了解的几个方法。
- jQuery on()方法
这个方法为选定的元素和子元素添加一个或多个事件处理程序。
语法:
$(selector).on(event, childSel, data, fun, map)
参数:
- event。这个参数是必需的。它指定了一个或多个事件或命名空间，以添加到选定的元素。
如果有多个事件值，请用空格分隔。事件必须是一个有效的。 - childSel。这个参数是可选的。它指定了事件处理程序应该只附加到定义的子元素。
- data。这个参数是可选的。它指定了要传递给函数的额外数据。
- fun。这个参数是必需的。它指定了事件发生时要运行的函数。
- map。它指定了一个事件地图（{事件:func(), 事件:func(), …}），有一个或多个事件添加到选定的元素，以及事件发生时要运行的函数。
- jQuery text()方法
该方法设置/返回所选元素的文本内容。
如果这个方法被用来返回内容，它提供所有匹配元素的文本内容（HTML标签将被删除）。
如果这个方法被用来设置内容，它将替换所有匹配元素的内容。
语法: -
返回文本内容。
$(selector).text()
- 设置文本内容。
$(selector).text(content)
- 使用一个函数设置文本内容。
$(selector).text(function(index, curContent))
参数:
- content。这个参数是必需的。它指定了所选元素的新文本内容。
- function(index, curContent):这个参数是可选的。它指定了一个函数，返回所选元素的新文本内容。
- index。它返回该元素在集合中的索引位置。
- curContent。它返回所选元素的当前内容。
- jQuery css()方法
该方法为定义的元素设置/返回一个或多个样式属性。
语法: - 它返回一个CSS属性。
css("propertyname")
- 它设置一个CSS属性。
css("propertyname", "value")
- 它设置了多个CSS属性。
css({"propertyname":"value", "propertyname":"value", ...});
参数:
- propertyName。它指定了元素的属性。
- value。它指定了元素的值。
- replace() 方法
该方法搜索定义值的字符串，或正则表达式，并返回一个新的字符串，并替换定义值。
语法:
string.replace(searchVal, newvalue)
参数:
- searchVal：这个参数是必需的。它指定了要用新值替换的值，或正则表达式。
- newvalue。这个参数是必需的。它指定用什么值来替换搜索值。
返回 value:
返回一个新的字符串，其中的定义值已被新的值所取代。
例子1：这个例子选择了元素，然后用.css()方法，一个RegExp和replace()方法提取其属性。
<!DOCTYPE html>
<html>
<head>
<title>
JQuery | Get numeric part of CSS property.
</title>
<style>
#GFG_UP {
font-size: 17px;
font-weight: bold;
}
#GFG_DOWN {
color: green;
font-size: 24px;
font-weight: bold;
}
button {
margin-top: 20px;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP">
</p>
<button>
click here
</button>
<p id="GFG_DOWN">
</p>
<script>
('#GFG_UP').text('Click on the button to get numeric value from CSS property');
('button').on('click', function() {
var data = ('button').css('marginTop').replace(/[^-\d\.]/g, '');
('#GFG_DOWN').text("Value of marginTop property of button = " + data);
});
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
示例2：这个例子选择了[id = ‘GFG_UP’]的元素，然后用.css()方法，一个RegExp和replace()方法提取其fontSize属性。
<!DOCTYPE html>
<html>
<head>
<title>
JQuery | Get numeric part of CSS property.
</title>
<style>
#GFG_UP {
font-size: 17px;
font-weight: bold;
}
#GFG_DOWN {
color: green;
font-size: 24px;
font-weight: bold;
}
button {
margin-top: 20px;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP">
</p>
<button>
click here
</button>
<p id="GFG_DOWN">
</p>
<script>
('#GFG_UP').text('Click on the button to get numeric value from CSS property');
('button').on('click', function() {
var data = ('#GFG_UP').css('fontSize').replace(/[^-\d\.]/g, '');
('#GFG_DOWN').text("FontSize property of element[id = 'GFG_UP'] = " + data);
});
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
