Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Вернуть элементу стиль, по-умолчанию заданный браузером (https://javascript.ru/forum/xhtml-html-css/29242-vernut-ehlementu-stil-po-umolchaniyu-zadannyjj-brauzerom.html)

Seva1986 21.06.2012 02:30

Gvozd,

Не уверен что сработает, но например, скриптом мочим все теги link и style предварительно скопировав кудато их урлы/содержимое, создаём нужный тег (находить уже существующий не стоит так как может быть атрибут style) берём его стили, удаляем тег, и дописываем их всем нужным тегам в атрибут style, восстанавливаем теги link и style.

Возможные проблемы придётся убирать important в свойствах нужного селектора в существующих стилях, так как перебьют атрибут style, если речь об универсальном решении.
Также при добавлении исходных стилей в атрибут style возможно придётся изменять значения существующих при совпадениях.

можно как вариант дописать в тег style а не в атрибут.

devote 21.06.2012 02:34

Gvozd,
взять исходники браузеров, дописать нужный тебе функционал, закомитить это.. а те браузеры где нет исходников, обратится к разрабам, попросить что нужно то и то.. вот такой блин расклад :D

Deff 21.06.2012 02:53

В принципе в Опере - Мозилле - при установке элементов на чистую страницу - все стили в консоли есть - в опере мон их даж удобно копировать, далее по данным табличке атрибутов и тегов распарсить в оставшихся браузах скриптом и создать сводную таблу (Отламинировать как бейджик и продавать в переходах метро
На обратной стороне рекламу чудодейственного средства (щас за такое доплачивают ..

Aetae 21.06.2012 04:08

Вообще непонятна ситуация "нельзя менять". Если userJS то навскидку только фрейм. Если таки можно доисать что-то в код но категорически нельзя трогать css, то можно подключить скриптик который выяснит нужные цвета до подключения css файла.)


...upd
Пришло в голову: конкретно по теме решение таково))):
<!DOCTYPE HTML>
<html>
	<head> 
		<style>input,textarea{background:#00f;width:100%}</style>
		<script>
		(function(){
			var i = document.createElement('input');
			i.type = 'radio';
			i.disabled = true;
			var color = window.getComputedStyle(i, null).backgroundColor;
			document.write('<style>textarea[disabled],input[disabled]{background:' + color + '}</style>')
		}())
		</script>
	</head>
	<body>
		<textarea disabled>textarea</textarea>
		<input type="text" value="text input" disabled>
	</body>
</html>

Octane 21.06.2012 07:40

Вы название темы читаете? Стандартное оформление никак не вернуть, хоть все свойства перекопируй, оформление контролов не станет, как до изменения стилей, соответствующим интерфейсу ОС.

Aetae 21.06.2012 07:47

Цитата:

Сообщение от Octane (Сообщение 182910)
Вы название темы читаете?

Я ещё и пост читаю, как ни странно.
Цитата:

Сообщение от Octane (Сообщение 182910)
Стандартное оформление никак не вернуть, хоть все свойства перекопируй, оформление контролов не станет, как до изменения стилей, соответствующим интерфейсу ОС.

Ну на самом деле если нужно вернуть свойства на 100% то второй вариант вполне работает. Пройтись по таблицам стилей и удалить все ненужные значения.
Простейший вариант:
<!DOCTYPE HTML>
<html>
	<head> 
		<style>
		body {background:#000;text-align:center;font-size:100px;}
		input {background:#aad;border:1px solid black}
		</style>
		<script>
		function simple(){
			var s = document.styleSheets[0], r = s.cssRules, i = r.length;
			while(i--)if(~r[i].selectorText.indexOf('input')){
				if(r[i].selectorText === 'input') s.deleteRule(i);
				//для полноценной работы сюда надо дописать пару регулярок
			}
		}
		</script>
	</head>
	<body>
		<input type="button" value="to default" onclick="simple()">
	</body>
</html>

Gvozd 21.06.2012 08:56

Цитата:

Сообщение от Deff
Создать заранее таблицу дефолтных стилей с чистой страницы для востребованных элементов со всех браузов - думаю потянет кило на 4

вариант

Цитата:

Сообщение от Seva1986
Не уверен что сработает, но например, скриптом мочим все теги link и style предварительно скопировав кудато их урлы/

вариант №2 в начале темы, но в более суровом исполнении
Цитата:

Сообщение от Seva1986
можно как вариант дописать в тег style а не в атрибут.

Да, это решит проблему !important
Цитата:

Сообщение от devote
взять исходники браузеров, дописать нужный тебе функционал

лол
Цитата:

Сообщение от Aetae
Вообще непонятна ситуация "нельзя менять".

Этот стиль(с точностью до дополнительных селекторов/правил) является часть таблицы стилей админки WordPress.
Плагины/темы не имеют возможности модифицировать его
Только писать свои скрипты и стили до и после основных скриптов и стилей админки
Цитата:

Сообщение от Aetae
то можно подключить скриптик который выяснит нужные цвета до подключения css файла.)

Спасибо, это хороший вариант подходящий для моей задачи.
Но все-таки интересны общие решения, когда все стили уже отработали.
Наверно в таком случае лучшим остается вариант с чистым Iframe
Цитата:

Сообщение от Aetae
Пришло в голову: конкретно по теме решение таково))):

в Chrome не работает
color-пустая строка
К тому же давать стили похожих элементов - не очень хорошая мысль.
Они могут отличатся, и к тому же запрашиваемые элементы уже могут быть также стилизованы

Gvozd 21.06.2012 09:09

Цитата:

Сообщение от Octane
Вы название темы читаете? Стандартное оформление никак не вернуть, хоть все свойства перекопируй, оформление контролов не станет, как до изменения стилей, соответствующим интерфейсу ОС.

Ну, я допускаю и просто получение дефолтных значений, и дальнейшее присвоение конкретному элементу
Но в принципе вы правы.
Например такой пример будет работать некорректно в Opera:
<!DOCTYPE HTML>
<html>
	<head> 
	</head>
	<body>
		<textarea>textarea</textarea>
		<textarea disabled>textarea</textarea>
		<script>
		var color1 = window.getComputedStyle(document.getElementsByTagName('textarea')[0], null).backgroundColor;
		var color2 = window.getComputedStyle(document.getElementsByTagName('textarea')[1], null).backgroundColor;
		console.log(color1, color2);
		</script>
		<style>
		body {
			background-color : yellow;
		}
		textarea {
			background-color : red;
		}
		</style>
		<script>
		var color_new1 = window.getComputedStyle(document.getElementsByTagName('textarea')[0], null).backgroundColor;
		var color_new2 = window.getComputedStyle(document.getElementsByTagName('textarea')[1], null).backgroundColor;
		console.log(color_new1, color_new2);
		
		document.getElementsByTagName('textarea')[0].style.backgroundColor = color1;
		document.getElementsByTagName('textarea')[1].style.backgroundColor = color2;
		
		color_new1 = window.getComputedStyle(document.getElementsByTagName('textarea')[0], null).backgroundColor;
		color_new2 = window.getComputedStyle(document.getElementsByTagName('textarea')[1], null).backgroundColor;
		console.log(color_new1, color_new2);
		</script>
	</body>
</html>

Вывод в консоль:
Цитата:

transparent, transparent
color.htm:6
rgb(255, 0, 0), rgb(255, 0, 0)
color.htm:11
transparent, transparent
И получаем в итоге уже по-настоящему прозрачные элементы

Aetae 21.06.2012 21:40

Цитата:

Сообщение от Gvozd (Сообщение 182916)
К тому же давать стили похожих элементов - не очень хорошая мысль.
Они могут отличатся, и к тому же запрашиваемые элементы уже могут быть также стилизованы

Естесно, это так - глупости, но фишка как раз в том что для input тоже задан конкретноый bg, прит этом computedStyle всё равно выдаёт значение по умолчанию.


Часовой пояс GMT +3, время: 22:30.