Блог

Главная - Вопросы по программированию - Похоже, что мой javascript прерывает мой css

Похоже, что мой javascript прерывает мой css

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я работаю над каким-то небольшим веб-проектом

  1. Я использую javascript для изменения цвета — это выглядит нормально
  2. Я использую CSS для изменения цвета при наведении курсора мыши ( :hover ) — это тоже нормально

но когда я собираю его вместе, похоже, что работает только javascript

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color", "red");
  });
});
</script>
<style>
#text:hover {
color: blue;
}
</style>
</head>
<body>

<button>Set the color property of all p elements</button>

<p id="text">This is a paragraph.</p>
<p id="text">This is another paragraph.</p>

</body>
</html>

Комментарии:

1. вам следует узнать больше о «каскаде» и «Специфичности» в CSS

2. вы используете один и тот же идентификатор два раза на html-странице.

Ответ №1:

Это потому, что встроенные стили имеют больший приоритет над стилем через класс. Когда вы добавляете стиль с помощью JQuery using .css() , стиль применяется как встроенный стиль. Это имеет больший приоритет по сравнению с применением через класс. Просто проверьте, и вы это увидите.

Что вам нужно сделать, так это

 $("button").click(function(){
    $("p").addClass('custom-class');
  });

и записывайте стили как

 .custom-class{
  color:red;
}

Я протестировал это и работает.

 .custom-class {
  color: red;
} 
 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").addClass('custom-class');
  });
});
</script>
<style>
#text:hover {
color: blue;
}
</style>
</head>
<body>

<button>Set the color property of all p elements</button>

<p id="text">This is a paragraph.</p>
<p id="text">This is another paragraph.</p>

</body>
</html>

Ответ №2:

Поскольку JS-код добавит встроенный стиль, который имеет более высокий приоритет, чем CSS, который будет переопределен, вы можете вместо этого использовать классы, такие как :

 <!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $("p").addClass('red');
      });
      $("p").hover(function() {
        $(this).toggleClass('hover');
      });
    });
  </script>
  <style>
    #text.hover {
      color: blue;
    }
    .red {
      color: red;
    }
  </style>
</head>

<body>

  <button>Set the color property of all p elements</button>

  <p id="text">This is a paragraph.</p>
  <p id="text">This is another paragraph.</p>

</body>

</html>

Комментарии:

1. спасибо, я очень ценю, я не ожидал, что проблема всего моего дня может быть решена с помощью add!важно

2. Я вообще не рекомендовал использовать !important , поскольку это может создавать побочные эффекты… Пожалуйста.

3. @NatthakanTheplip используйте!важно, только если нет других вариантов. выберите addClass. Этот ответ также правильный

Метки: