Div样式更改点击不工作

div style change on click is not working

本文关键字：工作 样式 Div      更新时间：2023-09-26

我有一些div，我想把选择的div位置改为居中，意思是假设我选择了前两个div只有div文本移动到center点击

$("#key").click(function myfunction() {
  $("div").css("text-align", center);
});
div {
  background-color: yellow;
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>

单击function不需要提供名称。它可以是匿名的。也应该是$("div").css("text-align", 'center')来分配css属性。

function myfunction() {
    //Not sure why you have this on div.
}
$(document).ready(function() {
  $("#key").click(function() {
    $("div").css("text-align", 'center')
  });
});
div {
  background-color: yellow;
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>

  • 在元素
    • 的click上设置(toggle) selected类
  • 移除inline事件onselect
  • 将center属性设置为仅具有selected类的元素
  • 设置quotes的属性， $("div").css("text-align", 'center'); 

$("#key").click(function myfunction() {
  $("div.toGrab:not(.selected)").css("text-align", '');
  $("div.selected").css("text-align", 'center');
});
$("div.toGrab").on("click", function() {
  $(this).toggleClass('selected');
});
div {
  background-color: yellow;
  margin-top: 20px;
  cursor: pointer;
}
.selected {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div class='toGrab'>blabla</div>
<div class='toGrab'>cat</div>
<div class='toGrab'>rose</div>

只是一个小错误，需要将值赋值为字符串，如下所示:

$("#key").click(function() {
   $("div").css("text-align", "center");
});

如果你想给margin than also number将被指定为string:

$("#key").click(function() {
   $("div").css("padding", "50");
});

@aswathy你所有的代码都是好的，只有你错过了"text-align", 'center'

center属性应该放在单引号

  $("#key").click(function myfunction() {
    $("div").css("text-align", 'center');
  });
div {
  background-color: yellow;
  margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">clickme</button>
<div onselect="myfunction()">blabla</div>
<div onselect="myfunction()">cat</div>
<div onselect="myfunction()">rose</div>

相关文章：