CODEWITHSUNDEEP
jqueryhtmlcss
johndoe
johndoe

Reputation: 45

change color of font using class

I would like to know how to change the color of font using small square div instead of drop down I can change my font to any color I want using the drop down but I have no idea how to change it using square div is it possible to change color using div squares here are my codes

Script for drop down 

$("#foo").change(function() {
  //alert($(this).val());
  $('.fid').css("color", $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="foo">
  <option value=" #ab3fdd">purple</option>
  <option value="yellow ">yellow </option>
  <option value="red ">red </option>
  <option value="orange">orange</option>
</select>

<div id="any" class="fid">
  hello world
</div>

This is what I want to use to change color:

CSS

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

HTML

<div id=fid>
  <div class="foo blue"></div>
  <div class="foo purple"></div>
  <div class="foo wine"></div>
</div>

Upvotes: 1

Views: 145

Answers (3)

Gerard
Gerard

Reputation: 15786

I would store the color in a data element like so:

<div class="foo blue" data-color="blue"></div>

In jQuery apply the color to the element:

$(document).on('click', '.foo', function() {
  var newColor = $(this).attr('data-color');
  $('.fid').css('color', newColor);
});

Upvotes: 1

Sunil Gehlot
Sunil Gehlot

Reputation: 1589

You can also use data-color. See in Updated Fiddle

When you click on square it will take his data color value and you will get your result :), let me know if you have any question.

HTML

<div class="fid">
  hello world
</div>

<div id="fid" >
  <div class="foo blue" data-color="blue"></div>
  <div class="foo purple" data-color="purple"></div>
  <div class="foo wine" data-color="wine"></div>
</div>

CSS

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
  background: #13b4ff;
}
.purple {
  background: #ab3fdd;
}
.wine {
  background: #ae163e;
}

JQUERY

$('.foo').click(function(){
    $('.fid').css("color", $(this).attr('data-color'));
});

Upvotes: 1

Uzbekjon
Uzbekjon

Reputation: 11813

Here you go: Without adding any extra markup.

$(document).ready(function(){
  $('.foo').on('click', function(){
    $('#any').css('color', $(this).css('background-color'));
  });
});
.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="fid">
  <div class="foo blue"></div>
  <div class="foo purple"></div>
  <div class="foo wine"></div>
</div>

<div id="any" class="fid">
  hello world
</div>

Upvotes: 1

Related Questions