Este artículo describe el enfoque para eliminar un archivo CSS global de una página. Se puede usar en escenarios en los que una plantilla puede tener un archivo CSS global incluido y necesita eliminar el archivo para que cualquier otro archivo CSS tenga efecto. Esto lo veremos en el siguiente ejemplo:
Considere el archivo index.html con dos importaciones de archivos CSS, el global.css con la identificación de « uno « y una segunda página.css con la identificación de « dos « . Global.css es el archivo que permanece en todas las páginas y page.css es el archivo para una página en particular.
El siguiente código es para el archivo index.html . Los archivos global.css y page.css se incluyen para demostración.
HTML
<!DOCTYPE html> <html> <head> <!-- CSS --> <link id="one" type="text/css" rel="stylesheet" href="global.css" /> <link id="two" type="text/css" rel="stylesheet" href="page.css" /> </head> <body> <h1>GeeksForGeeks</h1> <h2>Welcome to GeeksForGeeks</h2> <div id="para-one"> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and questions. A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and questions. </p> </div> <div id="para-two"> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and questions. A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and questions. </p> </div> </body> </html>
Archivos CSS: archivo global.css
p {
color: red;
text-align: center;
}
h3 {
color: chocolate;
text-align: center;
}
body {
background-color: rgb(178, 248, 248);
}
El siguiente código es el archivo page.css .
h1 {
color: green;
text-align: center;
}
h2 {
text-align: center;
}
p {
color: magenta;
}
Salida: Este es el Index.html con los archivos global.css y page.css.
Enfoque: crearemos una secuencia de comandos que encontrará la hoja de estilo global con la identificación de «uno» y la eliminará de la sección principal. Los métodos find() y remove() de jQuery se utilizan para este propósito. Esto se demuestra en el ejemplo dado a continuación:
jQuery
<script>
$(document).ready(function() {
// Find the stylesheet with id of 'one'
// and remove it from the document
$('head').find('link#one').remove();
});
</script>
Código definitivo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<link id="one" type="text/css"
rel="stylesheet" href="global.css" />
<link id="two" type="text/css"
rel="stylesheet" href="page.css" />
<!-- Jquery -->
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script>
$(document).ready(function() {
$('head').find('link#one').remove();
});
</script>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>Welcome to GeeksForGeeks</h2>
<div id="para-one">
<p>
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles,
quizzes and questions. A Computer
Science portal for geeks. It contains
well written, well thought and well
explained computer science and
programming articles, quizzes and
questions.
</p>
</div>
<div id="para-two">
<p>
A Computer Science portal for geeks.
It contains well written, well
thought and well explained computer
science and programming articles,
quizzes and questions. A Computer
Science portal for geeks. It contains
well written, well thought and well
explained computer science and
programming articles, quizzes and
questions.
</p>
</div>
</body>
</html>
Salida: esta es una página de índice después de la eliminación de global.css.
Publicación traducida automáticamente
Artículo escrito por PranjalGoyal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA