El CSS de un elemento se puede obtener utilizando la función de elemento getComputedStyle en JavaScript. Devuelve un objeto JavaScript que contiene propiedades CSS y sus valores. Este objeto está indexado y es iterable sobre los nombres de propiedad. getPropertyValue ( property ) se utiliza para obtener el valor de una propiedad.
En el siguiente código, pasar su objeto de elemento a getCSS( elemento ) obtiene todas las propiedades usando getComputedStyle( elemento ) y getPropertyValue( propiedad ) y escríbalas en una división separada. Puede desplazarse por los resultados para ver todas las propiedades.
Ejemplo 1: el siguiente ejemplo muestra cómo obtener todas las propiedades del elemento <div> con id=’srcDiv’ .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#srcDiv {
width: 450px;
font-family: sans-serif;
text-align: justify;
justify-content: center;
color: green;
}
#resDiv {
height: 300px;
overflow: scroll;
}
</style>
<script>
function getCSS(element) {
var css_data = '';
var css_obj = getComputedStyle(element);
for (var i = 0; i < css_obj.length; i++) {
css_data +=
css_obj[i] + ':' +
css_obj.getPropertyValue(css_obj[i])
+ ';<br>';
}
document.getElementById('resDiv')
.innerHTML = css_data;
return;
}
</script>
</head>
<body>
<img src="logo.png" /><br />
<h3>
How to get all the
CSS of an element
</h3>
<br />
<div id="srcDiv">
This is a demo paragraph for
explaining "How to get all the
CSS of an element". Properties
which are applied on this
division will appear in the
next division on pressing the
button below.
</div>
<br /><br />
<button onclick="getCSS(document
.getElementById('srcDiv'))">
Get CSS
</button>
<br /><br />
<div id="resDiv"></div>
</body>
</html>
Salida: al hacer clic en el botón ‘Obtener CSS’, se muestra la salida.
Ejemplo 2: A continuación se muestra un ejemplo para obtener la propiedad de un elemento <input> con id=’inputTxt’.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#srcDiv {
width: 450px;
font-family: sans-serif;
text-align: justify;
justify-content: center;
color: green;
}
#inputTxt {
color: red;
}
#resDiv {
height: 300px;
width: 600px;
overflow: scroll;
}
</style>
<script>
function getCSS(element) {
var css_data = '';
var css_obj = getComputedStyle(element);
for (var i = 0; i < css_obj.length; i++) {
css_data +=
css_obj[i] + ':' + css_obj
.getPropertyValue(css_obj[i])
+ ';<br>';
}
document.getElementById('resDiv')
.innerHTML = css_data;
return;
}
</script>
</head>
<body>
<img src="logo.png" /><br />
<h3>
How to get all the
CSS of an element
</h3>
<div id="srcDiv">
This is a demo paragraph for explaining
"How to get all the CSS of an element".
Properties which are applied on the input
field will appear in the next division on
pressing the button below.
</div>
<br />
<input id="inputTxt" type="number"
placeholder="Input Number" />
<button onclick="getCSS(document
.getElementById('inputTxt'))">
Get Input CSS
</button>
<br /><br />
<div id="resDiv"></div>
</body>
</html>
Salida: al hacer clic en el botón ‘Obtener CSS de entrada’ , se muestra la siguiente salida.
Nota: tenga en cuenta que el objeto se pasa a la función getCSS() en cada ejemplo.
Publicación traducida automáticamente
Artículo escrito por chitrankmishra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA