johndoe johndoe - 7 months ago 14
HTML Question

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


HTML

<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>

Answer

You can also use data-color. See in action

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