JQuery - изменить цвет фона страницы при нажатии кнопки

Я очень новичок в jquery и пытаюсь изменить цвет фона страницы после нажатия кнопки.JQuery - изменить цвет фона страницы при нажатии кнопки

Я искал и задает довольно много вопросов по подобным вещам, но я ищу ответ на изменение цвета фона на странице.

Я бы признателен за любую помощь, спасибо, Фредди

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'); 
)};

источник

2014-02-10 Freddie

изменить '$ (button)' на '$ ('# btn')' и обернуть все это в '$ (document) .ready (function() {});' и вам должно быть хорошо идти ! – zgood

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

Here у вас есть пример.

источник

2014-02-10 20:45:04 mbecares

Это:

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

Для этого:

$(document).ready(function(){ 
    $('#btn').click(function() { 
     $('body').css('background', '#ff0000'); 
    )}; 
});

источник

2014-02-10 20:59:50 zgood

Спасибо за помощь, ребята, но все равно не работаем. правильно ли я инициализировал библиотеку в html-документе? – Freddie

Я получаю ошибки при проверке страницы в консоли. Интересно, если я использовал правильную библиотеку jquery? – Freddie

Наконец-то он работает, спасибо всем за вашу помощь! Очень признателен!! – Freddie

Попробуйте изменить //ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js к http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js при тестировании сайта локально.

Если вы используете //, он использует протокол, который вы просматриваете на странице с помощью (file:// в случае локального тестирования).

источник

2014-02-10 21:48:34

Спасибо, я пропустил это! Я сделал обновление, но все еще не могу получить фон для изменения цвета? – Freddie

Вы использовали код jquery из @zgood? –

О, он сделал небольшую ошибку. Заменить первый)}; с }); –

JQuery - изменить цвет фона страницы при нажатии кнопки

ответ

Смежные вопросы