Сбросить / удалить стили CSS только для элемента
Я уверен, что это, должно быть, было упомянуто/задано раньше, но искали возраст без везения, моя терминология должна быть неправильной! Я смутно помню твиты, которые я видел некоторое время назад, которые предположили, что существует правило css, которое удалит любые стили, ранее установленные в таблице стилей для определенного элемента. Хорошим примером использования может быть сайт Mobile-first RWD, где большая часть стиля, используемого для определенного элемента в представлениях с малым экраном, требует «сброса» или удаления для того же элемента в представлении рабочего стола. Правило css, которое может достичь чего-то вроде:
/* mobile first */ .element < margin: 0 10; transform: translate3d(0, 0, 0); z-index: 50; display: block; etc.. etc.. >@media only screen and (min-width: 980px) < .element < all: none; >> Таким образом, мы могли бы быстро удалить или переустановить стиль, не объявляя каждое свойство. Имеет смысл?
Нет, такой вещи не существует. Как только элемент получил определенный стиль CSS с помощью правила, его нельзя просто «вернуть» — единственный способ — явно перезаписать каждое свойство CSS желаемым значением.
Существует свойство называется all , что предлагается для сброса всех свойств CSS для данного элемента в некоторые CSS шириной значений — значение , которое вы хотите использовать будет unset с unset , который сбрасывает свойство либо унаследованное значение , если он наследует по умолчанию или иначе, его начальное значение. Нет слов о реализации, но приятно знать, что кто-то об этом думал.
14 ответов
CSS3 ключевое слово initial устанавливает свойство CSS3 к исходному значению, как определено в спецификации. initial ключевое слово имеет широкую поддержку браузера, за исключением семейств IE и Opera Mini.
Поскольку IE отсутствие поддержки может вызвать проблему, вот некоторые из способов сброса некоторых свойств CSS на их начальные значения:
.reset-this < animation : none; animation-delay : 0; animation-direction : normal; animation-duration : 0; animation-fill-mode : none; animation-iteration-count : 1; animation-name : none; animation-play-state : running; animation-timing-function : ease; backface-visibility : visible; background : 0; background-attachment : scroll; background-clip : border-box; background-color : transparent; background-image : none; background-origin : padding-box; background-position : 0 0; background-position-x : 0; background-position-y : 0; background-repeat : repeat; background-size : auto auto; border : 0; border-style : none; border-width : medium; border-color : inherit; border-bottom : 0; border-bottom-color : inherit; border-bottom-left-radius : 0; border-bottom-right-radius : 0; border-bottom-style : none; border-bottom-width : medium; border-collapse : separate; border-image : none; border-left : 0; border-left-color : inherit; border-left-style : none; border-left-width : medium; border-radius : 0; border-right : 0; border-right-color : inherit; border-right-style : none; border-right-width : medium; border-spacing : 0; border-top : 0; border-top-color : inherit; border-top-left-radius : 0; border-top-right-radius : 0; border-top-style : none; border-top-width : medium; bottom : auto; box-shadow : none; box-sizing : content-box; caption-side : top; clear : none; clip : auto; color : inherit; columns : auto; column-count : auto; column-fill : balance; column-gap : normal; column-rule : medium none currentColor; column-rule-color : currentColor; column-rule-style : none; column-rule-width : none; column-span : 1; column-width : auto; content : normal; counter-increment : none; counter-reset : none; cursor : auto; direction : ltr; display : inline; empty-cells : show; float : none; font : normal; font-family : inherit; font-size : medium; font-style : normal; font-variant : normal; font-weight : normal; height : auto; hyphens : none; left : auto; letter-spacing : normal; line-height : normal; list-style : none; list-style-image : none; list-style-position : outside; list-style-type : disc; margin : 0; margin-bottom : 0; margin-left : 0; margin-right : 0; margin-top : 0; max-height : none; max-width : none; min-height : 0; min-width : 0; opacity : 1; orphans : 0; outline : 0; outline-color : invert; outline-style : none; outline-width : medium; overflow : visible; overflow-x : visible; overflow-y : visible; padding : 0; padding-bottom : 0; padding-left : 0; padding-right : 0; padding-top : 0; page-break-after : auto; page-break-before : auto; page-break-inside : auto; perspective : none; perspective-origin : 50% 50%; position : static; /* May need to alter quotes for different locales (e.g fr) */ quotes : '\201C' '\201D' '\2018' '\2019'; right : auto; tab-size : 8; table-layout : auto; text-align : inherit; text-align-last : auto; text-decoration : none; text-decoration-color : inherit; text-decoration-line : none; text-decoration-style : solid; text-indent : 0; text-shadow : none; text-transform : none; top : auto; transform : none; transform-style : flat; transition : none; transition-delay : 0s; transition-duration : 0s; transition-property : none; transition-timing-function : ease; unicode-bidi : normal; vertical-align : baseline; visibility : visible; white-space : normal; widows : 0; width : auto; word-spacing : normal; z-index : auto; /* basic modern patch */ all: initial; all: unset; >/* basic modern patch */ #reset-this-root < all: initial; * < all: unset; >> Как упоминалось в комментарии пользователя @user566245:
[POST EDIT FEB 4, ’17] Приобретен для того, чтобы стать современной нормой, пользователь Joostэто верно в принципе, но индивидуальный пробег может отличаться. Например, некоторые элементы, такие как textarea по умолчанию, имеют границу, применяя этот сброс, они уменьшат границы textarea.
Например, если автор указывает все: initial на элементе, он заблокирует все наследование и сбросит все свойства, как если бы никакие правила не появлялись на уровне каскада автора, пользователя или пользователя-агента.
Это может быть полезно для корневого элемента «виджета», включенного в страницу, который не хочет наследовать стили внешней страницы. Обратите внимание, однако, что любой стиль «по умолчанию», применяемый к этому элементу (например, например: отображение: блок из таблицы стилей UA на элементах блока, например), также будет удален.
Никто не думал о другом, кроме css, для сброса css? Да?
getElementsByTagName («*») вернет все элементы из DOM. Затем вы можете установить стили для каждого элемента в коллекции:
ответил 9 февраля 13 в 20:15 от VisioN
var allElements = document.getElementsByTagName("*"); for (var i = 0, len = allElements.length; i < len; i++) < var element = allElements[i]; // element.style.border = . >Со всем этим сказано; я не думаю, что сброс css является чем-то выполнимым, если мы не закончим только с одним веб-браузером. Если в конце «браузер» будет установлен «по умолчанию».
Для сравнения здесь приведен список значений Firefox 40.0 для где font-style: oblique запуск DOM-операции.
align-content: unset; align-items: unset; align-self: unset; animation: unset; appearance: unset; backface-visibility: unset; background-blend-mode: unset; background: unset; binding: unset; block-size: unset; border-block-end: unset; border-block-start: unset; border-collapse: unset; border-inline-end: unset; border-inline-start: unset; border-radius: unset; border-spacing: unset; border: unset; bottom: unset; box-align: unset; box-decoration-break: unset; box-direction: unset; box-flex: unset; box-ordinal-group: unset; box-orient: unset; box-pack: unset; box-shadow: unset; box-sizing: unset; caption-side: unset; clear: unset; clip-path: unset; clip-rule: unset; clip: unset; color-adjust: unset; color-interpolation-filters: unset; color-interpolation: unset; color: unset; column-fill: unset; column-gap: unset; column-rule: unset; columns: unset; content: unset; control-character-visibility: unset; counter-increment: unset; counter-reset: unset; cursor: unset; display: unset; dominant-baseline: unset; empty-cells: unset; fill-opacity: unset; fill-rule: unset; fill: unset; filter: unset; flex-flow: unset; flex: unset; float-edge: unset; float: unset; flood-color: unset; flood-opacity: unset; font-family: unset; font-feature-settings: unset; font-kerning: unset; font-language-override: unset; font-size-adjust: unset; font-size: unset; font-stretch: unset; font-style: oblique; font-synthesis: unset; font-variant: unset; font-weight: unset; font: ; force-broken-image-icon: unset; height: unset; hyphens: unset; image-orientation: unset; image-region: unset; image-rendering: unset; ime-mode: unset; inline-size: unset; isolation: unset; justify-content: unset; justify-items: unset; justify-self: unset; left: unset; letter-spacing: unset; lighting-color: unset; line-height: unset; list-style: unset; margin-block-end: unset; margin-block-start: unset; margin-inline-end: unset; margin-inline-start: unset; margin: unset; marker-offset: unset; marker: unset; mask-type: unset; mask: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; offset-block-end: unset; offset-block-start: unset; offset-inline-end: unset; offset-inline-start: unset; opacity: unset; order: unset; orient: unset; outline-offset: unset; outline-radius: unset; outline: unset; overflow: unset; padding-block-end: unset; padding-block-start: unset; padding-inline-end: unset; padding-inline-start: unset; padding: unset; page-break-after: unset; page-break-before: unset; page-break-inside: unset; paint-order: unset; perspective-origin: unset; perspective: unset; pointer-events: unset; position: unset; quotes: unset; resize: unset; right: unset; ruby-align: unset; ruby-position: unset; scroll-behavior: unset; scroll-snap-coordinate: unset; scroll-snap-destination: unset; scroll-snap-points-x: unset; scroll-snap-points-y: unset; scroll-snap-type: unset; shape-rendering: unset; stack-sizing: unset; stop-color: unset; stop-opacity: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; stroke: unset; tab-size: unset; table-layout: unset; text-align-last: unset; text-align: unset; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-emphasis-position: unset; text-emphasis: unset; text-indent: unset; text-orientation: unset; text-overflow: unset; text-rendering: unset; text-shadow: unset; text-size-adjust: unset; text-transform: unset; top: unset; transform-origin: unset; transform-style: unset; transform: unset; transition: unset; user-focus: unset; user-input: unset; user-modify: unset; user-select: unset; vector-effect: unset; vertical-align: unset; visibility: unset; white-space: unset; width: unset; will-change: unset; window-dragging: unset; word-break: unset; word-spacing: unset; word-wrap: unset; writing-mode: unset; z-index: unset; Я думаю, что это в принципе правильно, но индивидуальный пробег может отличаться. Например, некоторые элементы, такие как textarea, по умолчанию имеют границу, применение этого сброса сделает границу этих textarea меньше. Так что это не настоящий сброс. Я закончил тем, что использовал это только для определенных свойств, о которых я заботился. Вы также можете комбинировать его с селектором * для сброса всех элементов или сброса всех элементов внутри определенного элемента.
@ user566245 Применение этого с * селектором убьет ваш браузер и котенка. Это НЕ настоящий сброс. Истинного сброса просто не существует.
@Milkywayspatterns LOL, вы, вероятно, правы. Для меня я взял только те атрибуты, которые хотел сбросить, и применил к «div # theid *». Надеюсь, это никого не убьет, котенок 🙂
дисплей должен быть установлен на нормальный, а не встроенный. Поскольку некоторые элементы, такие как div, h1 и т. Д., Являются блочными элементами по умолчанию.
@ Джереми: Вы думаете о настройках браузера по умолчанию, которые различаются для разных элементов. Начальное значение отображения всегда встроено независимо от того, к какому элементу оно применяется.
ctrl+F (найти / заменить) -> ввести «:» (пробел: пробел) -> заменить на: «:» (: пробел) -> заменить все . Другими словами, было бы хорошо для пользователей, которые могли бы использовать это, чтобы не было пробелов перед двоеточием, которое является более стандартным форматированием для CSS. Не раскалывать волосы или что-то еще.
@mmmshuddup Спасибо за совет. Если вы посмотрите на оригинальный ответ, я изменил его как CSS. Что касается сжатия, то это ответ, а не патч копирования-вставки. Не так ли?
@DanDascalescu будьте осторожны со вставленным копией заявлением от LeaVerou .. ЭТО НЕ поддерживается всеми современными браузерами. Вернитесь на сайт developer.mozilla.org/en-US/docs/Web/CSS/all и ознакомьтесь с содержанием «Совместимость браузера» внизу страницы. Смотрите: caniuse.com/#search=all
@SoursopTree Вы правы в отношении сокращения, удваивающего определенный атрибут. Моя цель состояла в том, чтобы сделать его исчерпывающим и полным для понимания, а не для блока кода копирования-вставки.
.removeProperty()
Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.
Кратко
Скопировать ссылку «Кратко» Скопировано
Метод remove Property ( ) удаляет указанное CSS-свойство у элемента и возвращает значение этого свойства.
Пример
Скопировать ссылку «Пример» Скопировано
Превращаем круг в квадрат.
const circle = document.getElementById('round'); function turnToSquare () circle.style.removeProperty('border-radius');>const circle = document.getElementById('round'); function turnToSquare () circle.style.removeProperty('border-radius'); >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
remove Property ( ) принимает один аргумент – строку с именем свойства. Пишем названия также, как в CSS: background — color , а не background Color .
vampire.style.removeProperty('box-shadow');vampire.style.removeProperty('box-shadow');
Как понять
Скопировать ссылку «Как понять» Скопировано
Метод remove Property ( ) позволяет удалить отдельное CSS-свойство элемента.
Чтобы управлять отображением элемента лучше использовать чистый CSS, устанавливая элементу классы-модификаторы с нужным набором стилей.
Но иногда полезно программно изменять CSS-свойства. Например, если в нужный момент установить элементу свойство will — change , а потом удалить его, то можно получить выигрыш по производительности.
Если с помощью метода remove Property ( ) не выходит удалить свойство и вы получаете ошибку «NoModificationAllowedError» – значит элемент или его свойство находится в режиме read — only .
Есть альтернатива – можно использовать style и указать свойству значение «null». Названия в этом случае пишем через camelCase:
vampire.style.boxShadow = null;vampire.style.boxShadow = null;
Как удалить CSS-свойство?
Добрый день, нужно удалить CSS свойство, как это можно сделать?
Хочу удалить left: 0; и поставить right: 0;
Как это можно реализовать?
p.s если поставить просто right: 0; то объект читает left и забивает на right.
Егор Рублёв: Встречный вопрос: а зачем? Вы просто сбрасываете свойство на значение по умолчанию и получаете эффект, как будто бы и не устанавливали его.
С любыми свойствами так. Смотрите в доках, какое стоит значение по умолчанию, и ставите его.
Initial — штука интересная, но пока не работает везде.
Сергей: ну мне в принципе нет разницы, а вот лишний код же на выходе будет?
left: auto; = 11 символов, да и не люблю грязь.
Сброс конкретного свойства установленного через element.style.property или через атрибут style в html:
element.style.property = void 0; //void 0 - это оператор возвращающий безопасный undefinedА вообще лучше не устанавливать свойства через атрибут style или через element.style (что равносильно), манипулируйте классами