Javascript 如何在jQuery中使用.css函数_Javascript_Jquery_Html_Css

Javascript 如何在jQuery中使用.css函数

javascript jquery html css

Javascript 如何在jQuery中使用.css函数,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我对使用jquery有点陌生，下面应该会显示一个按钮，当有人单击该按钮时，该按钮的字体大小应该会改变不幸的是，按钮没有改变它的字体大小，原因我不确定编辑：此示例与之前的示例相同，但仅在鼠标离开按钮区域或双击按钮后才可以更改字体只需单击一次即可更改字体 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

我对使用jquery有点陌生，下面应该会显示一个按钮，当有人单击该按钮时，该按钮的字体大小应该会改变

不幸的是，按钮没有改变它的字体大小，原因我不确定

编辑：此示例与之前的示例相同，但仅在鼠标离开按钮区域或双击按钮后才可以更改字体

只需单击一次即可更改字体

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $(".button0").click(function() {
    $('.button0').css('font-size', '43px');
  });
});
</script>
<style type="text/css">
.button0{
position:fixed;
left:48px;
top:55px;
font-family:Arial;
font-size:8px;
font-weight:normal;
}
</style>
<body>
<div name="button0"><input class="button0" type="button" style="width: 148px;height: 72px;" value="Button"/></div>
</body>
</html>

调用.click时，DOM尚未完全加载。您应该将其包装在一个DOM就绪函数中

$(function() {
  $(".button0").click(function() {
    $('.button0').css('font-size', '43px');
  });
});

还注意到它不是一个div。

像这样使用它

$(document).ready(function(){
  $("div.button0").click(function() {
    $(this).css('font-size', '43px');
  });
});

为什么要使用div.button0。元素不是div。请尝试使用.button0。

这是因为javascript一遇到就执行；因此，它是在呈现按钮之前执行的。改变顺序，它就会起作用

<input class="button0" type="button" style="width: 148px;height: 72px;" value="Button"/>
<script type="text/javascript">
  $(".button0").click(function() {
    $('.button0').css('font-size', '43px');
  });
</script>

在进行修改之前，必须确保文档已准备就绪，如中所示，所有元素都已加载

在此函数中包装所有内容：

$(document).ready(function(){
    // your code here
});

除此之外，当您试图修改输入元素时，选择器正在寻找一个具有button0类的div元素。修改选择器，使其显示input.button0

另外，jQuery有一个$this选择器，用于选择当前元素。在您的情况下，它将选择单击的输入

最后，由于您使用的是jQuery1.7.1，我将向您介绍关于。通常建议使用此函数委派事件。使用以下命令代替$div.click：

$(document).on("click", "input.button0", function(){
    $(this).css("font-size", "43px");
});

有关的详细信息。

需要正确触发事件以进行附加。单击

请注意类名。button0，因为它不像您以前使用的那样位于DIV中。

首先阅读基础教程：np，海报部分的微小错误。您好，我已经更新了代码，只有当鼠标离开按钮边界框或双击时，它才会更改字体。它应该在一个单一的点击改变。

$(document).on("click", "input.button0", function(){
    $(this).css("font-size", "43px");
});

<script type="text/javascript">

$(document).ready(function() {
  $(".button0").click(function() {
     $(this).css('font-size', '43px');
  });
});

</script>