首页 > 解决方案 > 我想使用 Jquery 向我的 html 元素添加更多 css 属性,这意味着我不想删除前一个,只是简单地添加更多

问题描述

索引.html

<html>
<head>
<script
      src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous"></script>
<!-- jquery-3.4.1.min -->
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<div class="epic" style="color:red">hello this is title</div>
<div>hello this is title</div>
<input type="button" placeholder="click it" value="click">
</body>
</html>

自定义.js

$( document ).ready(function($){       
   $(":button").click(function(){    
    $(".epic").attr("style","font-size:100px");    
   });        
});

现在我想要的是当我单击按钮时,我应该能够提供我想要的字体大小,但也保持以前的颜色为红色。我写的代码使字体为 100 但颜色消失了,所以有什么办法可以保持颜色并且仍然可以修改字体。

标签: javascriptjqueryhtmlcssajax

解决方案


您可以使用.css()来设置特定的样式属性(font-size):

$( document ).ready(function(){
  $(":button").click(function(){
    $(".epic").css("font-size", "100px");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="epic" style="color:red">hello this is title</div>
<div>hello this is title</div>
<input type="button" placeholder="click it" value="click">


推荐阅读