Zastąp element.style za pomocą CSS

83

Mam stronę HTML z kreatora stron i wstrzykuje styleatrybut bezpośrednio do elementu. Okazało się, że jest uważany za element.style.

Chcę to zmienić za pomocą CSS. Mogę dopasować element, ale go nie zastępuje.

zrzut ekranu

Jak mogę zastąpić styl za pomocą CSS?

css

— DW
źródło

2

Znaleźć źródło zastrzyku stylu i je usunąć? Jeśli nie ma go w źródle dokumentu, prawdopodobnie pochodzi z JavaScript.

— cimmanon

2

Jak możesz znaleźć źródło?

— Shailen,

2

command + shift + f (na komputerze Mac) lub ctrl + shift + f (na komputerze)

— maahd

Zauważ, że alternatywą w JS może być usunięcie dodanej właściwości za pomocą removeProperty(), ieeg. document.querySelector("li").style.removeProperty("display"); Wtedy też nie musisz podawać nowej wartości domyślnej (tak jak musisz !important, ale łańcuch dziedziczenia po prostu „wskakuje”).

— rugk

124

Chociaż często jest to źle widziane, możesz technicznie użyć:

display: inline !important;

Generalnie nie jest to dobra praktyka, ale w niektórych przypadkach może być konieczna. To, co powinieneś zrobić, to edytować swój kod, aby <li>w pierwszej kolejności nie stosować stylu do elementów.

— DiscoInfiltrator
źródło

17

element.style oznacza, że jest w znaczniku, więc w Twoim html zobaczysz<li style="display: none;">

— DiscoInfiltrator

1

W jQuery podczas korzystania z metody show () display: block; jest stosowany do stylów elementów. Chciałem, żeby był display: inline-block; chociaż. Najpierw rozwiązałem to nie używając tej metody i używając .css ('display', 'inline-block'); zamiast. Jednak po przeczytaniu tego przykładu myślę, że przestawię się na używanie! Ważne.

— Simon Bengtsson,

jQuery ustawia właściwość display na dowolną wartość domyślną dla wyświetlanego elementu.

— folktrash

1

Dosłownie właśnie wykrzyknąłem „gtf outta here”, kiedy to zadziałało, zdenerwowałem moją dziewczynę

— jag

2

Większość z tych komentarzy zakłada, że mają dostęp do kodu źródłowego. Nie musiałbym robić tych złych praktyk, gdyby programiści nie publikowali bibliotek z dodanymi stylami wbudowanymi.

— TallOrderDev

20

Ten CSS nadpisze nawet JavaScript:

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

lub tylko dla pierwszego

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

— Kuldar Leement
źródło

12

element.style pochodzi ze znaczników.

<li style="display: none;">

Po prostu usuń styleatrybut z kodu HTML.

— Ayman Safadi
źródło

Nie dodam <li style = "display: none;">

— DW

Jest gdzieś wstrzyknięty. Ja też tego szukam, myślę, że Google Maps robi to D:

— icedwater

1

Jeśli jest wstrzyknięty, to nie może go dosięgnąć i usunąć sam, musi to zmienić

— jonyB,

5

Użycie! Important spowoduje nadpisanie elementu.style przez CSS, na przykład Change

color: #7D7D7D;

do

color: #7D7D7D !important;

Że należy to zrobić.

— user2677440
źródło

5

Oczywiście! Ważna sztuczka jest tutaj decydująca, ale dokładniejsze kierowanie może pomóc nie tylko w faktycznym zastosowaniu nadpisania (kryteria wagi mogą rządzić! Ważne), ale także w uniknięciu zastępowania niezamierzonych elementów.

Korzystając z narzędzi programistycznych przeglądarki, określ dokładną wartość atrybutu stylu będącego przedmiotem naruszenia; na przykład:

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

lub

"display: block;"

Następnie zdecyduj, którą gałąź selektorów chcesz zastąpić; możesz rozszerzyć lub zawęzić wybór do swoich potrzeb, np .:

p span

lub

section.article-into.clearfix p span

Na koniec w swoim custom.css użyj selektora [atrybut ^ = wartość] i! Important deklaracji:

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

Zauważ, że nie musisz cytować całej wartości atrybutu stylu, wystarczy jednoznacznie dopasować ciąg.

— ersaloz
źródło

0

Zgodnie z moją wiedzą sytle Inline jest na pierwszym miejscu, więc klasa css nie powinna działać.

Użyj Jquery jako

$(document).ready(function(){

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

You can also try 

#demoFour li { display:inline !important;}

— user1990587
źródło

0

Użyj JavaScript.

Na przykład:

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

— Kenta Kubo
źródło

0

możesz nadpisać styl w swoim css, odwołując się do naruszającej właściwości stylu elementu. W moim przypadku te dwa kody są ustawione jako 15px i powodują, że mój obraz tła robi się czarny. Więc nadpisałem je wartością 0px i umieściłem! Ważne, aby miało priorytet

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

— cewka Tesli
źródło