Я хочу добавить больше свойства css к моему элементу html, используя Jquery, что означает, что я не хочу удалять предыдущий, просто добавлю к нему больше - PullRequest
Новая
       1

Я хочу добавить больше свойства css к моему элементу html, используя Jquery, что означает, что я не хочу удалять предыдущий, просто добавлю к нему больше

3 голосов
/ 15 января 2020

Индекс. 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>

custom. js

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

Теперь то, что я хочу, это когда я нажимаю кнопку, чем я могу дать шрифт - размер, который я хочу, но также сохраняйте предыдущий цвет красным. Код, который я написал, делает шрифт 100, но цвет исчез, поэтому есть ли способ сохранить цвет и при этом иметь возможность изменять шрифт.

Ответы [ 3 ]

2 голосов
/ 15 января 2020

Вы можете использовать .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">
1 голос
/ 15 января 2020

Вы можете использовать метод jQuery addClass(), чтобы сохранить исходный класс CSS и добавить новый: 

$("button").click(function(){
  $(".epic").addClass("clicked");
});

И в CSS: 

.clicked {
    font-size: 50px;
}
1 голос
/ 15 января 2020

Вместо этого используйте метод .css. И передать объект с CSS свойствами. Когда вы вызовете его снова, он просто добавит новые свойства к существующему.

В вашем решении вы перезаписываете полный атрибут style каждый раз. Таким образом, он удаляет старые свойства. 

$(document).ready(function() {

  $(":button").click(function() {
    $(".epic").css({
      "font-size": "50px",
      "background-color": "blue"
    });
    $(".epic").css({
      "color":"white"
    });
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="epic" style="color:red">title</div>
<div>hello this is title</div>
<input type="button" placeholder="click it" value="click">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...