Es una práctica común escribir un archivo CSS para nuestro HTML . Esos se llaman CSS estático. Cuando queremos crear nuestra regla de hoja de estilo en cascada en tiempo de ejecución, necesitamos jQuery . El jQuery nos permite aplicar estilos a nuestro HTML dinámicamente.
Las reglas CSS, una vez escritas, pueden almacenarse en una variable y utilizarse varias veces cuando sea necesario.
Usamos css(“arrtibute1”, “value1”) de jQuery .
El siguiente ejemplo ilustra el enfoque:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>CSS Rules with JQuery</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="myId">
<h1>GeeksforGeeks</h1>
</div>
<div class="myclass">
<h1>A Computer Science Portal for Geeks</h1>
</div>
<script>
// Here 'my_css' variable stores the Style
var my_css = {
backgroundColor: "red",
color: "rgb(0,255,0)"
}
$("#myId").css(my_css);
var my_class_css = {
background: "green",
color: "rgb(255,255,255)"
}
$(".myclass").css(my_class_css);
</script>
</body>
</html>
Producción:
Ejemplo 2: también tiene una alternativa en la que puede usar directamente un código de estilo similar a CSS en lugar de un estilo similar a JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>CSS Rules with JQuery</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="myId">
<h1>Without Coding</h1>
</div>
<div class="myclass">
<h1>There are no Geeks</h1>
</div>
<script>
$(document).ready(function() {
// Build your CSS.
var body_css = {
"background-color": "rgb(0,0,0)",
"font-weight": "",
"color": "rgb(255,255,255)"
}
$("body").css(body_css);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ayushmankumar7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA