Применить эффект к каждому элементу в HTML-теге, кроме одного элемента (ID / класс) - PullRequest
Новая
       6

Применить эффект к каждому элементу в HTML-теге, кроме одного элемента (ID / класс)

0 голосов
/ 27 сентября 2019

Я хочу применить эффект к каждому элементу html-страницы, кроме одного идентификатора (или класса), когда пользователь щелкает / вызывает событие.Как я могу это сделать?Я пробовал с: not () селектором, но я думаю, что он не предназначен для него.

MWE:

index.html 

<html>
  <head>
    <link disabled id="toggle_element" rel="stylesheet" href="./new_theme.css">
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" type="text/javascript"></script>
  </head>
  <body>
    <h1> Some text </h1>
    <button id="fixedbutton" onclick="change()">CLICKME</button>
    <button  id="anotherfixedbutton">please let me sleep me here firefox</button>
  </body>
</html>

style.css 

html {
}

#fixedbutton {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
h1{
  color:blue;
}

#anotherfixedbutton {
  position:fixed; 
  bottom:20px; 
  left: 20px
}

new_theme.css 

html {
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
  -moz-filter: invert(100%) hue-rotate(180deg); 
  -o-filter: invert(100%) hue-rotate(180deg);
  -ms-filter: invert(100%) hue-rotate(180deg);
}

script.js 

function change()
{
  document.getElementById("toggle_element").disabled = false;
}

Я хочу исключить фиксированные кнопки из эффекта фильтра.Этот пример работает нормально и не имеет проблем в Chrome и Safari, но в Firefox кнопки просто теряют свои позиции.

Ответы [ 2 ]

1 голос
/ 27 сентября 2019

ОК, поэтому, следя за изменениями и просматривая соответствующий пост, здесь есть много чего распаковать.Между вашим оригинальным закрытым вопросом и новым вопросом с правками я вижу одну (может быть, две?) Проблему, которую вы пытаетесь решить:

  1. Когда вы применяете фильтры, вFirefox кнопки теряют свою позицию.
  2. Вы (возможно?) Хотели бы, чтобы кнопки не были затронуты фильтром.

Я создал слегка измененные фрагменты, которые работают сВаш код и адрес обеих проблем:

По вопросу размещения кнопок: 

function change()
{
  document.getElementsByTagName('html')[0].classList.toggle('new-theme');
}
html {
  height: 100%; /* Fixes the buttons losing position in firefox */
}

.new-theme {
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
  -moz-filter: invert(100%) hue-rotate(180deg); 
  -o-filter: invert(100%) hue-rotate(180deg);
  -ms-filter: invert(100%) hue-rotate(180deg);
}

#fixedbutton {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
h1{
  color:blue;
}

#anotherfixedbutton {
  position:fixed; 
  bottom:20px; 
  left: 20px
}
<html>
  <head>
  </head>
  <body>
    <h1> Some text </h1>
    <button id="fixedbutton" onclick="change()">CLICKME</button>
    <button  id="anotherfixedbutton">please let me sleep me here firefox</button>
  </body>
</html>

Решением для кнопок, теряющих свою позицию в Firefox, было добавление height: 100% к элементу html.Немного странно, но похоже на ответ Темани Афифа на предполагаемую копию вашего первоначального вопроса ;в основном, потому что фильтр создает новый контекст содержащего блока, нам нужно внести некоторые корректировки.

Для исключения кнопок из эффекта фильтра: 

function change()
{
  document.getElementsByTagName('html')[0].classList.toggle('new-theme');
}
html {
  height: 100%; /* Fixes the buttons losing position in firefox */
}

.new-theme {
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
  -moz-filter: invert(100%) hue-rotate(180deg); 
  -o-filter: invert(100%) hue-rotate(180deg);
  -ms-filter: invert(100%) hue-rotate(180deg);
}

.new-theme #fixedbutton,
.new-theme #anotherfixedbutton {
  filter: invert(100%) hue-rotate(180deg);
  -webkit-filter: invert(100%) hue-rotate(180deg);
  -moz-filter: invert(100%) hue-rotate(180deg); 
  -o-filter: invert(100%) hue-rotate(180deg);
  -ms-filter: invert(100%) hue-rotate(180deg);
}

#fixedbutton {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
h1{
  color:blue;
}

h2 {
  color: orange;
}

#anotherfixedbutton {
  position:fixed; 
  bottom:20px; 
  left: 20px
}
<html>
  <head>
  </head>
  <body>
    <h1> Some text </h1>
    <h2> Some other text </h2>
    <button id="fixedbutton" onclick="change()">CLICKME</button>
    <button  id="anotherfixedbutton">please let me sleep me here firefox</button>
  </body>
</html>

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

0 голосов
/ 27 сентября 2019

Вы можете использовать JavaScript и добавить это к своему коду: (вам не нужен CSS с этим кодом) 

function highlight() {
    element = document.getElementById('not');
    document.documentElement.style.backgroundColor = '#f00';
    element.style.backgroundColor = '#fff';
}

Добавьте идентификатор "not" к одному элементу, который вы хотите исключить, ивызовите функцию с помощью onClick = "highlight ()"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...