El método document.createElement(‘style’) se usa para crear el elemento de estilo usando JavaScript. Los pasos para crear un elemento de estilo se enumeran a continuación:
Pasos:
- Cree un elemento de estilo usando la siguiente sintaxis
Sintaxis:
document.createElement('style');
- Aplicar los estilos CSS.
- Agregue este elemento de estilo al elemento principal.
Sintaxis:
document.getElementsByTagName("head")[0].appendChild(styleElement);
Ejemplo 1: este ejemplo cambia el color <h1> a verde al crear el elemento de estilo usando JavaScript.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Create style tag using JavaScript
</title>
</head>
<body>
<h1>GeeksForGeeks</h1>
<!-- Script to add style element -->
<script type="text/javascript">
/* Function to add style element */
function addStyle(styles) {
/* Create style document */
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet)
css.styleSheet.cssText = styles;
else
css.appendChild(document.createTextNode(styles));
/* Append style to the tag name */
document.getElementsByTagName("head")[0].appendChild(css);
}
/* Set the style */
var styles = 'h1 { color: green }';
styles += ' body { text-align: center }';
/* Function call */
window.onload = function() { addStyle(styles) };
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo cambia el color de texto <h1> a blanco y el color de fondo del elemento <div> a verde al crear el elemento de estilo usando JavaScript.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Create style tag using JavaScript
</title>
</head>
<body>
<div id="header">
<h1>GeeksForGeeks</h1>
</div>
<!-- Script to create style tag -->
<script type="text/javascript">
/* Function to add style */
function addStyle(styles) {
/* Create style element */
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet)
css.styleSheet.cssText = styles;
else
css.appendChild(document.createTextNode(styles));
/* Append style to the head element */
document.getElementsByTagName("head")[0].appendChild(css);
}
/* Declare the style element */
var styles = 'h1 { color: white }';
styles += ' body { text-align: center }';
styles += ' #header { height: 50px; background: green }';
/* Function call */
window.onload = function() { addStyle(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