Перевизначити 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(), тобто egeg. document.querySelector("li").style.removeProperty("display"); Тоді вам також не потрібно вводити нове значення за замовчуванням (як це потрібно робити !important, але ланцюжок успадкування просто "

— вскакує

121

Незважаючи на те, що на це часто нарікають, технічно можна використовувати:

display: inline !important;

Як правило, це не є доброю практикою, але в деяких випадках може бути необхідним. Що вам слід зробити, так це відредагувати свій код, щоб ви не застосовували стиль до <li>елементів спочатку.

— DiscoInfiltrator
джерело

17

element.style означає, що він <li style="display: none;">

— розмічений

1

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

— Simon Bengtsson

jQuery встановлює властивість display для будь-якого значення за замовчуванням для елемента, який він відображає.

— folktrash

1

Буквально просто вигукнув "gtf геть звідси", коли це спрацювало на мене, засмутило мою дівчину

— 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:

— крижана вода

1

Якщо він введений, ніж він не може його дістати і самостійно видалити, він повинен його перевизначити

— jonyB

5

Використання! Important замінить element.style через CSS, як Change

color: #7D7D7D;

до

color: #7D7D7D !important;

Це має зробити це.

— користувач 2677440
джерело

5

Звичайно, важливий трюк тут є вирішальним, але більш конкретне націлювання може допомогти не лише застосувати ваше перевизначення (критерії ваги можуть панувати! Важливим), але і уникнути перевизначення ненавмисних елементів.

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

"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

Відповідно до моїх знань, Inline sytle стоїть на першому місці, тому клас css не повинен працювати.

Використовуйте Jquery як

$(document).ready(function(){

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

You can also try 

#demoFour li { display:inline !important;}

— користувач1990587
джерело

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 і поставив! Важливий, тому це буде пріоритетом

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

— tesla_coil
джерело