usunąć/przywrócić odziedziczone css z elementu

Question

Wiem, że to pytanie zostało zadane wcześniej, ale przed oznaczeniem go jako duplikatu, chcę powiedzieć, że moja sytuacja jest trochę inna niż w Internecie.

Buduję i umieszczam skrypt, który ludzie mogą umieścić na swoich stronach. Ten skrypt tworzy element div o określonej szerokości/wysokości i niektórych informacji w nim zawartych.

Mój problem polega na tym, że niektóre witryny deklarują style div, które są dziedziczone również przez mojego diva.

na przykład:

div{ 
    background-color:red; 
} 

więc jeśli nie ustawić dowolny kolor tła do mojego div, to pokaże czerwony nawet jeśli nie chcemy.

Jedyne rozwiązania, które przychodzą mi do głowy to zastąpienie tylu właściwości css, w ten sposób mój div będzie pokazywał dokładnie tak, jak chcę. Problem z tym rozwiązaniem polega na tym, że istnieje zbyt wiele właściwości css do nadpisania, a mój skrypt powinien być tak lekki, jak to tylko możliwe.

Moje pytanie brzmi: jeśli znasz inne rozwiązanie mojego problemu. Może być w css/javascript/jQuery.

Dzięki

Answer 1

„zerowania” style dla określonego elementu nie jest to możliwe, będziesz musiał nadpisać wszystkie style nie chcesz/potrzeby. jeśli zrobisz to za pomocą css bezpośrednio lub używając jquery, aby zastosować style, zależy od tego, co jest łatwiejsze (ale nie zalecam używania do tego celu javascript/jquery, ponieważ jest to całkowicie niepotrzebne).

Jeśli twój div jest jakimś "widżetem", który można dołączyć do innych stron, możesz spróbować go zawinąć w iframe. to "zresetuje" style, ponieważ jego zawartość jest innym dokumentem, ale może to wpływa na działanie twojego widżetu (lub może go całkowicie zepsuć), więc może to nie być możliwe w twoim przypadku.

Answer 2

Jednym prostym podejściem byłoby użycie modyfikatora !important w css, ale można to zmienić w ten sam sposób przez użytkowników.

Być może można uzyskać rozwiązanie za pomocą jquery, przechodząc przez cały DOM, aby znaleźć (ponownie) zdefiniowane klasy i usuwanie/wymuszanie stylów CSS.

Answer 3

Dopóki są to atrybuty takie jak klasy i identyfikatory, można je usunąć za pomocą modyfikatorów klasy javascript/jQuery.

document.getElementById("MyElement").className = ""; 

Nie ma sposobu na usunięcie kodu CSS innego znacznika niż nadpisanie go (lub użycie innego elementu).

Answer 4

Spróbuj: Utwórz zwykły div bez żadnego stylu lub zawartości poza czerwonym div. Teraz możesz użyć pętli dla wszystkich stylów zwykłego div i przypisać następnie do wewnętrznej div, aby zresetować wszystkie style.

Oczywiście to nie działa, jeśli ktoś przypisuje style do wszystkich div s (tj. Bez użycia klasy, CSS to div { ... }).

Zwykle rozwiązaniem takich problemów jest zapewnienie innej klasie div.W ten sposób projektanci stron internetowych mogą dostosować stylizację swojego modelu div tak, aby pasował do reszty projektu.

Answer 5

Ustawiaj tylko istotne/ważne właściwości CSS.

Przykład (tylko zmienić atrybuty, które mogą spowodować, że div wyglądać zupełnie inaczej):

background: #FFF; 
border: none; 
color: #000; 
display: block; 
font: initial; 
height: auto; 
letter-spacing: normal; 
line-height: normal; 
margin: 0; 
padding: 0; 
text-transform: none; 
visibility: visible; 
width: auto; 
word-spacing: normal; 
z-index: auto; 

Wybierz bardzo konkretnego wyboru, takich jak div#donttouchme, <div id="donttouchme"></div>. Dodatkowo możesz dodać `! Important przed każdym średnikiem w deklaracji. Twoi klienci celowo starają się zepsuć układ, gdy opcja ta zawodzi.

Answer 6

Można spróbować nadpisywania CSS i używać auto

I nie sądzę, że to będzie działać z kolorem konkretnie, ale wpadłem na problem gdzie miałem taką właściwość nadrzędnej jako

.parent { 
    left: 0px; 
} 

a następnie udało mi się zdefiniować moje dziecko z czymś podobnym do czegoś podobnego do tego, co to: i skutecznie "zresetować" właściwość.

Answer 7

możesz użyć tej opcji poniżej.

<style> 
    div:not(.no_common_style){ 
     background-color:red; 
    } 
</style> 

teraz, jeśli ich wszędzie tam, gdzie nie chcesz zastosować styl domyślny można użyć klasy „no_common_style” jako klasy. ex:

<div class="no_common_style"> 
    It will not display in red 
</div> 

Answer 8

Z tego co rozumiem chcesz użyć div, która dziedziczy z klasy, ale nie twoje. Jak wspomniano w poprzedniej odpowiedzi, nie można całkowicie zresetować dziedziczenia div. Tym, co zadziałało dla mnie z tym problemem, było użycie innego elementu - takiego, który nie jest częsty i na pewno nie jest używany na aktualnej stronie html. Dobrym przykładem jest użycie zamiast dostosowania go tak, by wyglądał jak idealny.

area { background-color : red; }