Las reglas CSS se pueden leer y manipular utilizando DOM (Document Object Model) . Para leer todas las reglas de CSS incrustado usando JavaScript, podemos usar los siguientes enfoques.
Enfoque 1:
- Utilice document.getElementsByTagName(“ESTILO”); y obtenga toda la etiqueta CSS.
- Verifique si la longitud es 0 y luego ‘no se usó ninguna etiqueta de estilo’.
- De lo contrario, muestra toda la etiqueta usando for loop
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>CSS rule values with JS</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href=
"https://fonts.googleapis.com/css?family=Satisfy&display=swap"
rel="stylesheet">
<style type="text/css">
h1 {
text-align: center;
color: green;
}
#my_para {
font-family: 'Satisfy', cursive;
text-align: justify;
background-color: powderblue;
font-size: 130%;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<hr/>
<p id="my_para">Cascading Style Sheets, fondly referred
to as CSS, is a simply designed language intended to
simplify the process of making web pages presentable.
CSS allows you to apply styles to web pages. More importantly,
CSS enables you to do this independent of the
HTML that makes up each web page.</p>
<div class="text-center">
<input id="my_button1"
type="button"
class="btn btn-success"
value="Read All CSS Values">
</div>
</div>
<script>
function alert_css() {
var style_text = "";
var style_elements = document.getElementsByTagName("STYLE");
if (style_elements.length == 0)
alert("No Style Tag!");
//or use console.log("No Style Tag!");
else {
for (var i = 0; i < style_elements.length; i++)
style_text += style_elements[i].outerHTML;
style_text = style_text.toString().replace(/\t/g, '').split('\r\n');
alert(style_text);
//or use console.log(style_text);
}
}
document.getElementById("my_button1").onclick = alert_css;
</script>
</body>
</html>
Producción:
- Antes:
- Después de hacer clic en el botón «Leer todo el valor CSS»:
Enfoque 2:
- Obtenga todas las propiedades y valores CSS reales (computados) usando window.getComputedStyle(elem, null);
- Muestre todas las propiedades CSS con la ayuda de «for loop».
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>CSS rule values with JS</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href=
"https://fonts.googleapis.com/css?family=Satisfy&display=swap"
rel="stylesheet">
<style type="text/css">
h1 {
text-align: center;
color: green;
}
#my_para {
font-family: 'Satisfy', cursive;
text-align: justify;
background-color: powderblue;
font-size: 130%;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<hr/>
<p id="my_para">Cascading Style Sheets, fondly referred to as
CSS, is a simply designed language intended to simplify
the process of making web pages presentable. CSS allows
you to apply styles to web pages. More importantly, CSS
enables you to do this independent of the HTML that makes
up each web page.</p>
<div class="text-center">
<input id="my_button1"
type="button"
class="btn btn-success"
value="Read All CSS Values">
</div>
<h3>CSS Values:</h3>
<div id="my_div"></div>
</div>
<script>
function append_css(div_name, id_name) {
var elem = document.getElementById(id_name);
var txt = "";
var cssObj = window.getComputedStyle(elem, null);
for (i = 0; i < cssObj.length; i++) {
cssObjProp = cssObj.item(i);
txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
document.getElementById(div_name).innerHTML = txt;
}
document.getElementById("my_button1").addEventListener('click', function() {
append_css("my_div", "my_para");
}, false);
</script>
</body>
</html>
Producción:
- Antes:
- Después de hacer clic en el botón «Leer todo el valor CSS»:
Nota:
El límite de palabras de un mensaje emergente es limitado y es posible que no muestre todo el contenido si el contenido es grande, en ese caso, se puede usar la función console.log() (comentada en el código), imprimirá el lo mismo en la consola.
Publicación traducida automáticamente
Artículo escrito por shubhamr238 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA