Change CSS Properties on Click

Change CSS properties on click

Firstly, using on* attributes to add event handlers is a very outdated way of achieving what you want. As you've tagged your question with jQuery, here's a jQuery implementation:

<div id="foo">hello world!</div>
<img src="zoom.png" id="image" />

$('#image').click(function() {
    $('#foo').css({
        'background-color': 'red',
        'color': 'white',
        'font-size': '44px'
    });
});

A more efficient method is to put those styles into a class, and then add that class onclick, like this:

$('#image').click(function() {
  $('#foo').addClass('myClass');
});

.myClass {
  background-color: red;
  color: white;
  font-size: 44px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="foo">hello world!</div>
<img src="https://i.imgur.com/9zbkKVz.png?1" id="image" />

Change CSS property on click on buttons?

Finally, I make it done like I want it! If anyone is interested with this thing, here is the solution:

<script><!--jquery script-->
$('.parent_class').on('click','.btn_child',function () {
$('.btn_child').removeClass('btn_child_selected');
$(this).addClass('btn_child_selected')
});
</script>

You can also check this link where it's done: http://jsfiddle.net/c1znyrw5/3/

I want to think you all for your help.

How to change css property when you click on button?

You can not use the same ID for more than 1 element.

I replaced the IDs of buttons with a new class name fruit-btn.

Then I made an array in JS of both buttons and color spans.

Then I looped through each button to add an EventListener.

In the event I added another loop that hides every color span and then makes the i span visible. There is no need for a function.

const fruit_btn = document.getElementsByClassName("fruit-btn");
const color_spans = document.getElementsByClassName("color");

for (let i = 0; i < fruit_btn.length; i++) {
  fruit_btn[i].addEventListener("click", function(e) {
    for (let i = 0; i < fruit_btn.length; i++) {
      color_spans[i].style.visibility = "hidden";
    }
    color_spans[i].style.visibility = "visible";
  });
}

body {
  font-size: 2rem;
}

li {
  margin: 20px;
  list-style: none;
}

button i {
  cursor: pointer;
  font-size: 3rem;
}

.color {
  margin: 10px;
  border: 1px solid black;
  background-color: blanchedalmond;
  display: inline-block;
  padding: 10px;
  visibility: hidden;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fruits</title>
  <link rel="stylesheet" href="list.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha512-0S+nbAYis87iX26mmj/+fWt1MmaKCv80H+Mbo+Ne7ES4I6rxswpfnC6PxmLiw33Ywj2ghbtTw0FkLbMWqh4F7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body>
  <p>
    FRUITS
  </p>
  <ul>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-apple-alt"></i></button>
      <span class="color">red and yellow</span>
    </li>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-carrot"></i></button>
      <span class="color">orange</span>
    </li>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-lemon"></i></button>
      <span class="color">yellow</span>
    </li>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-pepper-hot"></i></button>
      <span class="color">red and green</span>
    </li>
  </ul>
  <script src="/week-4/index.js"></script>
</body>

</html>

JavaScript onClick change css

I guess you're looking for the .cssText property from style

document.getElementById('bob').style.cssText = 'background:#ffffff; color: #000000;';

Example: http://jsfiddle.net/Sx5yH/

changing css properties on click

Use this; Slightly modified from your code

 <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Page 1 <b class="caret"></b></a>
                <ul class="dropdown-menu" id="dropdown-menu1">
                    <li id="greenBg"><a onclick="changeNavbarColor('greenBg')">Makes the navbar green </a></li>
                    <li id="orangeBg"><a href="#" onclick="changeNavbarColor('orangeBg')">Makes the navbar orange </a></li>
                    <li id="blueBg"><a href="#" onclick="changeNavbarColor('blueBg')">Makes the navbar blue </a></li>
                </ul>
        </li>

function changeNavbarColor(ids){

var navbarCol = document.getElementById("container-fluid1");
var greenBg = document.getElementById("greenBg");
var orangeBg = document.getElementById("orangeBg");
var blueBg = document.getElementById("blueBg");
var dropdown = document.getElementById("dropdown-menu1");

var blue = "#06F";
var green = "#060";
var orange = "#F60";

if(ids == "greenBg"){
    greenBg.style.backgroundColor = green;
}else if(ids == "blueBg"){
    blueBg.style.backgroundColor = blue;
}else if(ids== "orangeBg"){
    orangeBg.style.backgroundColor = orange;
};

}

Change CSS Properties on Click