Question

我想知道如何使用小方形div而不是下拉来更改字体的颜色我可以使用下拉菜单将我的字体更改为我想要的任何颜色但我不知道如何使用方形div更改它可以使用div正方形来改变颜色这里是我的代码

下拉列表

$("#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>

这是我想用来改变颜色的方法：

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 1

您也可以使用data-color。见Updated Fiddle

当您点击方格时，它将获取他的数据颜色值，您将获得结果:)，如果您有任何疑问，请告诉我。

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

Answer 2

在这里：，不添加任何额外标记。

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

Answer 3

我会将颜色存储在数据元素中，如下所示：

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

在jQuery中将颜色应用于元素：

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

使用类更改字体的颜色

3 个答案: