En este artículo, sabremos cómo obtener las propiedades CSS aplicadas asociadas con los elementos usando jQuery, y también entenderemos su implementación a través del ejemplo. Dado un documento HTML que contiene algunas propiedades CSS, necesitamos recuperar todos los estilos CSS de un elemento en particular usando jQuery. Los dos enfoques son los siguientes.
Enfoque 1: en este enfoque, usaremos el método document.defaultView.getComputedStyle() para obtener todos los estilos en cascada asociados con ese elemento en particular. Después de eso, agregue el estilo a una string uno por uno atravesando el objeto.
Consulte el método HTML DOM defaultView Property & getComputedStyle() para obtener más detalles.
Ejemplo: este ejemplo implementa el método document.defaultView.getComputedStyle() para recuperar las diversas propiedades de estilo aplicadas asociadas con el elemento en particular.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
Getting all the CSS styles
of an element using jQuery
</title>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<p id="GFG_UP"></p>
<button onclick="GFG_Fun();"> Click Here </button>
<p id="GFG_DOWN"></p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = "Click on the button "
+ "to get the all CSS styles "
+ "associated with the element.";
function GFG_Fun() {
var ar = document.defaultView.getComputedStyle(up, null);
var str = "";
for(var key in ar) {
str = str + key + ': ' + ar[key] + "-";
}
down.innerHTML = str;
}
</script>
</body>
</html>
Producción:
Enfoque 2: en este enfoque, solo se extraen estilos específicos. Podemos pasar el nombre de los estilos. El método cssSpecific está definido para realizar las operaciones de string en la string pasada y obtener las propiedades del objeto y devolverlas como una string.
Ejemplo: este ejemplo se implementa para recuperar solo las propiedades de estilo específicas asociadas con un elemento.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
Getting all the CSS styles
of an element using jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<p id="GFG_UP"></p>
<button onclick="GFG_Fun();"> Click Here </button>
<p id="GFG_DOWN"></p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = "Click on the button to get"
+ " only specific CSS styles associated "
+ "with the element.";
(function($) {
$.fn.cssSpecific = function(str) {
var ob = {};
if(this.length) {
var css = str.split(', ');
var prms = [];
for(var i = 0, ii = css.length; i < ii; i++) {
prms = css[i].split(':');
ob[$.trim(prms[0])] = $(this).css($.trim(prms[1] || prms[0]));
}
}
return ob;
};
})(jQuery);
function GFG_Fun() {
var styles = $('#GFG_UP').cssSpecific(
'color, backgroundColor, opacity, height, lineHeight:height');
down.innerHTML = JSON.stringify(styles);
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA