Entfernen Sie eine CSS-Eigenschaft mit jQuery
-
Entfernen Sie eine CSS-Eigenschaft mit der jQuery
.css()-API -
Entfernen Sie eine CSS-Eigenschaft mit der jQuery-API
.prop() -
Entfernen Sie eine CSS-Eigenschaft mit der API
.removeAttr()von jQuery -
Entfernen Sie eine CSS-Eigenschaft mit der jQuery-API
.removeClass()
Dieser Artikel lehrt vier Methoden zum Entfernen einer CSS-Eigenschaft mit jQuery. Diese Methoden verwenden vier jQuery-APIs, nämlich .css(), .removeAttr(), .removeClass() und .prop().
Entfernen Sie eine CSS-Eigenschaft mit der jQuery .css()-API
In jQuery verwenden Sie standardmäßig die .css()-API, um eine CSS-Eigenschaft und ihren Wert für ein Element festzulegen. Daraus wendet jQuery die Eigenschaft und den Wert als Inline-Stile über das HTML-Attribut style an.
Sie können es aber auch verwenden, um eine CSS-Eigenschaft zu entfernen, indem Sie den Wert der Eigenschaft auf einen leeren String setzen. Das bedeutet, dass diese Methode nicht funktioniert, wenn das CSS vom <style>-Tag oder einem externen CSS-Stylesheet stammt.
Wir haben im folgenden Code eine CSS-Eigenschaft auf ein Element mithilfe der jQuery .css()-API angewendet. Danach können Sie die Taste drücken; Dies ruft eine Funktion auf, die die CSS-Eigenschaft entfernt.
Der Kern der Funktion besteht darin, den Wert einer CSS-Eigenschaft auf einen leeren String zu setzen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-remove-CSS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<p id="test">Random Text</p>
<button id="remove_css">Remove CSS</button>
</main>
<script>
$(document).ready(function(){
// Add two CSS properties
$("#test").css({
'font-size': '2em',
'background-color': 'red'
});
/*
* Remove the CSS properties.
*/
$("#remove_css").click(function() {
$("#test").css({
'font-size': '',
'background-color': ''
});
// Remove the click event.
$("#remove_css").off('click');
});
});
</script>
</body>
</html>
Ausgang:
Entfernen Sie eine CSS-Eigenschaft mit der jQuery-API .prop()
Sie können die jQuery .prop()-API verwenden, um eine CSS-Eigenschaft zu entfernen, wenn Sie das CSS über die jQuery .css()-API angewendet haben. Das liegt daran, dass ein solches Element das Attribut style hat, auf das Sie mit der API .prop() zugreifen können.
Im Folgenden haben wir den vorherigen Code aktualisiert, um die API .prop() zu verwenden, um die CSS-Eigenschaft zu entfernen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-remove-CSS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<p id="test">Random Text 2.0</p>
<button id="remove_css">Remove CSS</button>
</main>
<script>
$(document).ready(function(){
// Add two CSS properties
$("#test").css({
'font-size': '3em',
'background-color': '#1560bd'
});
/*
* Remove the CSS properties.
*/
$("#remove_css").click(function() {
let element_with_css_property = $("#test").prop('style');
element_with_css_property.removeProperty('font-size');
element_with_css_property.removeProperty('background-color');
// Remove the click event.
$("#remove_css").off('click');
});
});
</script>
</body>
</html>
Ausgang:
Entfernen Sie eine CSS-Eigenschaft mit der API .removeAttr() von jQuery
Die .removeAttr()-API entfernt eine CSS-Eigenschaft, indem sie das style-Attribut aus dem Element entfernt. Das bedeutet, dass das CSS inline sein sollte oder Sie es mit der jQuery .css() API angewendet haben.
Die Schaltfläche entfernt alle CSS-Eigenschaften, indem das Attribut style entfernt wird.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-jQuery-remove-CSS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<p id="test">Random Text 3.0</p>
<button id="remove_css">Remove CSS</button>
</main>
<script>
$(document).ready(function(){
// Add two CSS properties
$("#test").css({
'padding': '2em',
'border': '5px solid #00a4ef',
'font-size': '3em'
});
/*
* Remove the CSS properties.
*/
$("#remove_css").click(function() {
$("#test").removeAttr('style');
// Remove the click event.
$("#remove_css").off('click');
});
});
</script>
</body>
</html>
Ausgang:
Entfernen Sie eine CSS-Eigenschaft mit der jQuery-API .removeClass()
Die .removeClass()-API entfernt eine CSS-Eigenschaft, die über das <style>-Tag oder ein externes Stylesheet hinzugefügt wurde. Wenn Sie einen Klassennamen übergeben, wird dieser entfernt; Andernfalls werden alle Klassennamen des Elements entfernt.
Das folgende Beispiel zeigt .removeClass() in Aktion.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>04-jQuery-remove-CSS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.colorful_big_text {
color: #1560bd;
font-size: 3em;
}
</style>
</head>
<body>
<main>
<p id="test"><i>Random Text 4.0</i></p>
<button id="remove_css">Remove CSS</button>
</main>
<script>
$(document).ready(function(){
// Add a CSS class that contains CSS properties
$("#test").addClass('colorful_big_text');
/*
* Remove the CSS properties.
*/
$("#remove_css").click(function() {
$("#test").removeClass();
// Remove the click event.
$("#remove_css").off('click');
});
});
</script>
</body>
</html>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn