Estoy haciendo una terminal HTML y he hecho la mayor parte del estilo. Sin embargo, estoy tratando de agregar un comando que cambiará el color. Puede ejecutar estos fragmentos de código y ver por qué estoy preguntando esto, pero cuando escribe color y luego un color, en lugar de hacer lo que estoy tratando de hacer, solo muestra una pantalla (principalmente) blanca . Por favor, ayuda, ya que esto debe estar terminado antes de mañana.
$('body').terminal({ iam: function(name) { this.echo('Hello, ' + name + '. Welcome to Coding Class!'); }, echo: function(what) { this.echo(what) }, link: function(link) { window.location.replace("http://www." + link); }, color: function(color) { var body = document.querySelector("body"); body.className = "test"; var temp = document.querySelectorAll(".test"); for (var i = 0; i < temp.length; i++) { temp[i].style.color = color; temp[i].style.fontSize = "40px"; } } }, { greetings: 'Hi!', prompt: 'root> ' }) <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script> <script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"> </script> <link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" /> </head> <body> </body> let $ = jQuery.noConflict(); $('body').terminal({ iam: function(name) { this.echo('Hello, ' + name + '. Welcome to Coding Class!'); }, echo: function(what) { this.echo(what) }, link: function(link) { window.location.replace("http://www." + link); }, color: function(color) { var body = document.querySelector("body"); body.classList.add('test');// add class name `test` to body. var temp = document.querySelectorAll(".test"); for (var i = 0; i < temp.length; i++) { temp[i].style.setProperty('--background', color);// use set variable instead of `background-color`. //temp[i].style.backgroundColor = color;// not recommended temp[i].style.fontSize = "40px"; } } }, { greetings: 'Hi!', prompt: 'root> ' }) <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script> <script src="https://unpkg.com/jquery.terminal/js/jquery.terminal.min.js"> </script> <link rel="stylesheet" href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" /> </head> <body> </body> Te muestro cómo usar el nombre de la clase add() CSS en el body .
Para hacer que el color de fondo cambie en el color del comando, cambio el código para usar setProperty() para establecer la variable CSS porque el archivo CSS en sí ya usa esa variable (en la clase .terminal ) y es más fácil de esta manera.