使用Jquery更改背景颜色（CSS属性）

Question

使用Jquery更改背景颜色（CSS属性）

14

我想要在点击时更改背景颜色。这是我尝试过的代码，请帮帮我 :)

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function(){

$(#co).click(change()
{
$(body).css("background-color":"blue");
});
});

CSS 代码

body
{
background-color:red;
}

主体代码

      <body>

    <div id="co" click="change()">

hello

    </div>

- Sanjay B

8个回答

3

试试这个

$("body").css({"background-color":"blue"});

- Sabash

3

$("#co").click(function(){
   $(this).css({"backgroundColor" : "blue"});
});

- IVIajid

1

请将以下与编程��关的内容从英语翻译成中文。仅返回翻译后的文本：请描述您的答案，以便所有用户都能理解。 - Bhavesh Odedra

1

当用户点击名为“co”的ID时，您是什么意思？该元素的背景颜色会更改为蓝色！ - IVIajid

完全同意你的观点，但对于不了解 CSS 或 jQuery 的新用户或初学者来说，他们需要说明。希望这有意义。 - Bhavesh Odedra

1

嗯...你说得对，但是这个用户在代码中使用了 jQuery，这意味着他/她对此有一定了解 :) - IVIajid

1

下面的代码将把 div 改为蓝色。

<script>
 $(document).ready(function(){ 
   $("#co").click({
            $("body").css("background-color","blue");
      });
    }); 
</script>
<body>
      <div id="co">hello</div>
</body>

- yuriy

1

你忘记在 #co 周围加引号了。 - iCollect.it Ltd

0

1. 从 div 元素中删除 onclick 方法。

2. 从 jQuery 代码中删除函数 change() 并创建一个匿名函数代替：

$(document).ready(function()
{

  $('#co').click(function()
   {

  $('body').css('background-color','blue');
  });
});

- vikash kumar

0

尝试以下 jQuery 代码片段，您可以更改颜色：

<script type="text/javascript">
    $(document).ready(function(){
        $("#co").click(function() {
            $("body").css("background-color", "yellow");
        });
    });
</script>

$(document).ready(function(){
    $("#co").click(function() {
        $("body").css("background-color", "yellow");
    });
});

body {
    background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="co" click="change()">hello</div>

- Himanshu Joshi

0

$("#bchange").click(function() {
    $("body, this").css("background-color","yellow");
});

- OpenWebWar

您的答案因为质量较低正在审核中。请提供您代码的解释。 - JRodDynamite

0

使用点击按钮jquery更改背景颜色

以下是jquery代码，您可以将其放在头标签中。

jQuery代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("div").addClass("myclass");
      });
    });
</script>

CSS 代码：

<style>
    .myclass {
        background-color: red;
        padding: 100px;
        color: #fff;
    }
</style>

HTML 代码：

<body>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <button>Click Here</button>
</body>

- Harpreet Singh

2

您的个人资料显示您与拥有您链接的网站的公司有关联。在未在帖子中披露其为您自己的情况下，将您所属的某个产品或网站链接到其他地方被视为 Stack Exchange/Stack Overflow 上的垃圾邮件。请参阅：什么是“良好”的自我推广？、有关自我推广的一些提示和建议、Stack Overflow 中“垃圾邮件”的确切定义是什么？以及什么会被视为垃圾邮件。 - Makyen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sterling Archer · Accepted Answer

你使用了冒号而不是逗号，请尝试使用逗号：

$(body).css("background-color","blue");

您还需要将id用引号括起来，否则它将查找名为#co的变量。

$("#co").click(change()

这里还有许多其他问题。click 不是HTML属性。你需要使用 onclick （这是冗余的）。试试这个：

<div id="co"> <!-- no onclick method needed -->
<script>
$(document).ready(function() {
    $("#co").click(function() {
        $("body").css("background-color","blue"); //edit, body must be in quotes!
    });
});
</script>

您试图调用一个未定义的方法。看起来您尝试在回调语句内声明它？我不确定。但请将此与您的代码进行比较，看看差异在哪里。 http://jsfiddle.net/CLwE5/演示fiddle