Переопределить element.style с помощью CSS

83

У меня есть HTML-страница из конструктора страниц, и она вставляет styleатрибут непосредственно в элемент. Я обнаружил, что это считаетсяelement.style .

Я хочу переопределить его с помощью CSS. Я могу сопоставить элемент, но он не отменяет его.

Скриншот

Как я могу переопределить стиль с помощью CSS?

css

— DW
источник

2

Найти источник внедрения стиля и удалить его? Если его нет в источнике вашего документа, вероятно, он откуда-то исходит из JavaScript.

— cimmanon

2

Как найти источник?

— Шайлен

2

command + shift + f (на Mac) или ctrl + shift + f (на pc)

— maahd

Обратите внимание, что альтернативой в JS может быть удаление добавленного свойства с помощью removeProperty(), ieeg. document.querySelector("li").style.removeProperty("display"); Тогда вам также не нужно указывать новое значение по умолчанию (например, вы должны сделать это !important, но цепочка наследования просто "перескакивает".

— rugk

124

Хотя это часто не одобряется, технически вы можете использовать:

display: inline !important;

Обычно это не очень хорошая практика, но в некоторых случаях может потребоваться. Что вам следует сделать, так это отредактировать свой код, чтобы <li>в первую очередь вы не применяли стиль к элементам.

— ДискотекаИнфильтратор
источник

17

element.style означает, что он находится в разметке, поэтому в вашем html вы увидите<li style="display: none;">

— DiscoInfiltrator

1

В jQuery при использовании метода show () display: block; применяется к стилям элементов. Я хотел, чтобы это было display: inline-block; хотя. Я сначала решил это, не используя этот метод и используя .css ('display', 'inline-block'); вместо. Однако после прочтения этого примера я думаю, что перейду на использование! Important.

— Саймон Бенгтссон

jQuery устанавливает для свойства display значение по умолчанию для элемента, который он показывает.

— folktrash

1

Буквально только что воскликнул «gtf outta here», когда это сработало для меня, расстроило мою девушку

— jag

2

Большинство этих комментариев предполагают, что у них есть доступ к исходному коду. Мне бы не пришлось поступать так плохо, если бы кодеры не выпускали библиотеки с добавленными встроенными стилями.

— TallOrderDev

20

Этот CSS перезапишет даже JavaScript:

#demofour li[style] {
    display: inline !important;
}

или только для первого

#demofour li[style]:first-child {
    display: inline !important;
}

— Кулдар Лемент
источник

12

element.style исходит из разметки.

<li style="display: none;">

Просто удалите styleатрибут из HTML.

— Айман Сафади
источник

Я не добавляю <li style = "display: none;">

— DW

Это куда-то введено. Я тоже ищу это, думаю, Google Maps делает это D:

— icedwater

1

Если он введен, он не может достать его и удалить сам, он должен отменить это

— jonyB

5

Использование! Important переопределит element.style через CSS, например Change

color: #7D7D7D;

к

color: #7D7D7D !important;

Это должно сработать.

— user2677440
источник

5

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

С помощью инструментов разработчика вашего браузера определите точное значение атрибута стиля оскорбления; например:

"font-family: arial, helvetica, sans-serif;"

или же

"display: block;"

Затем решите, какую ветвь селекторов вы переопределите; вы можете расширить или сузить свой выбор в соответствии со своими потребностями, например:

p span

или же

section.article-into.clearfix p span

Наконец, в custom.css используйте селектор [attribute ^ = value] и объявление! Important:

p span[style^="font-family: arial"] {
  font-family: "Times New Roman", Times, serif !important;
}

Обратите внимание, что вам не нужно заключать в кавычки все значение атрибута стиля, достаточно, чтобы однозначно соответствовать строке.

— эрсалоз
источник

0

Насколько мне известно, сначала идет встроенный алгоритм, поэтому класс css не должен работать.

Использовать JQuery как

$(document).ready(function(){

   $("#demoFour li").css("display","inline");
  });

You can also try 

#demoFour li { display:inline !important;}

— user1990587
источник

0

Используйте JavaScript.

Например:

var elements = document.getElementById("demoFour").getElementsByTagName("li");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "inline";
}

— Кента Кубо
источник

0

вы можете переопределить стиль в своем CSS, сославшись на вызывающее нарушение свойство стиля элемента. В моем случае эти два кода установлены как 15 пикселей и заставляют мое фоновое изображение становиться черным. Итак, я заменил их на 0px и поместил! Important, чтобы он был приоритетным.

.content {
    border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
}

— tesla_coil
источник