JQuery – página de cambio de color de fondo haga clic en el botón

Yo soy muy nuevo en jquery y estoy tratando de cambiar el fondo de página de color una vez que hace clic en un botón.

He buscado y hay bastante un par de preguntas sobre cosas similares, pero estoy en busca de una respuesta sobre un fondo de la página de cambio de color en particular.

Agradecería cualquier ayuda, gracias, Freddie

HTML:

<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
    <section class="text">
        CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
    </section>

    <button id="btn">CLICK ME!</button>

</body>
</html>

CSS:

body {
    height: ;
    background: #D8D8D8;
}

.text {
    color: #686868; 
    font-family: arial;
    font-size: 2em;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

#btn {
    margin-left: 550px;
    width: 200px;
    height: 100px;
    font-size: 2em;
    border-radius: 10px;
    background: #ffffff;
}

#btn:hover {
    background: #ff0000;
    color: #ffffff;
}

JS:

$(button).click(function() {
    $(this).css('background', '#ff0000');
)};
  • cambio $(button) a $('#btn') y envolver todo en un $(document).ready(function() { }); y usted debe ser bueno para ir!
InformationsquelleAutor Freddie | 2014-02-10

3 Kommentare

  1. 3
    $( "#change_background" ).on( "click", function() {
      $("body").css("background-color","#000000");
    });

    Aquí tienes un ejemplo.

  2. 0

    Este:

    $(button).click(function() {
        $(this).css('background', '#ff0000');
    )};

    A este:

    $(document).ready(function(){
        $('#btn').click(function() {
            $('body').css('background', '#ff0000');
        )};
    });
    • Gracias por toda su ayuda chicos, pero todavía no funciona. he inicializado la biblioteca correctamente en el html, doc?
    • Estoy recibiendo errores cuando la comprobación de la página en la consola. Preguntando si he usado la correcta biblioteca de jquery?
    • Finalmente consiguió trabajo, gracias a todos por su ayuda! Muy apreciada!!
  3. 0

    Intente cambiar el//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js a http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js si está probando el sitio local.

    Si utiliza //, utiliza el protocolo que se acessing la página con (file:// en el caso de locales testng).

    • Gracias, lo echaba de menos! He hecho la actualización, pero todavía no puede conseguir el fondo para cambiar de color??
    • Se utiliza el código jquery de @zgood?
    • Oh, él hizo un pequeño error. Sustituir a la primera )}; con });
    • Lo consiguió! Yo estaba usando zgood del código, pero ahora trabajo con este último cambio!
    • Me alegra saber que está funcionando 🙂
    • Gracias por la ayuda!

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea