在Bootstrap中动态更改背景颜色

3
我是新手使用Bootstrap。经过研究,我了解到可以使用JavaScript来改变背景颜色。我想要动态地更改特定容器的背景颜色或图像。我正在使用外部链接引用样式.css文件。 (例如:href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">)。
1个回答

3
你可以使用jQuery,按照以下步骤操作:

更改背景图片:

$('.YourContainer').css('background-image', 'url(../images/backgrounds/bc-image.jpg)');

更改背景颜色的代码:

$('.YourContainer').css("background-color", "yellow");

不要忘记添加jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>

由于您可能不知道如何在嵌入的脚本标签中使用代码,因此需要进行编辑:

        <!doctype html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Demo</title>
        </head>
        <body>
            <a href="http://jquery.com/">jQuery</a>
            <script src="jquery.js"></script>
            <script type='text/javascript'>

            $( document ).ready(function() {



           $('.YourContainer').css('background-image', 
             'url(../images/backgrounds/bc-image.jpg)');



           });     
        </script>
    </body>
    </html>

Live Demo


jQuery代码是否应该嵌入在script标签内的函数中? - user2433261
确保在 jQuery 调用之后调用嵌入代码。 - ZEE
这是我所拥有的。我没有看到调用colorize函数。<script src="http://code.jquery.com/jquery-2.1.1.min.js"> function colorize() { console.log('got here'); $('#check_generator').css("background-color", "red"); } </script> - user2433261
这就是它被称为的方式 <div class="container" id = "check_generator" onload="colorize()"> - user2433261

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接