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)

Gvozd 20.06.2012 21:31

Вернуть элементу стиль, по-умолчанию заданный браузером
 
Например в таком случае
<style>
textarea {
    background-color : #fff;
}
</style>
<textarea></textarea>
<textarea disabled="disabled"></textarea>

при таких стилях неактивный textarea становится слабоотличим от активного
Возможно ли как-то не меняя исходные стили, привести неактивный textarea в его вид по-умолчанию
Пока есть только такие идеи:
1) создать фрейм без подключенных стилей, и узнать из него как по-умолчанию выглядит textarea, а затем динамически присвоить нужный фон(или создать правило в стилях)
2) пробежаться по всем таблицам стилей, в поисках подходящих селекторов, временно отключить их правила, после проверить стили textarea, и вернуть обратно отключенные стили

Но мне эти решения не кажутся удачными, особенно второе, поэтому ищу другие пути решения

Octane 20.06.2012 21:42

Стандартное оформление не вернется, если только 2й варинат… А почему бы изначально не использовать селектор textarea:not([disabled]), или такой возможности нет?

Gvozd 20.06.2012 21:56

Цитата:

Сообщение от Octane
А почему бы изначально не использовать селектор textarea:not([disabled]), или такой возможности нет?

нету возможности менять этот код

Deff 20.06.2012 22:16

<style>
textarea {
    background-color : #F0F0F0;
}
textarea[disabled="disabled"]{
    background:none;
}
</style>
<textarea></textarea>
<textarea disabled="disabled"></textarea>

Gvozd 20.06.2012 22:21

Deff,
Вы не совсем поняли
Задача не в том, чтобы задать неактивному textarea красный, серый или любой другой конкретно заданный фон
Задача в том, чтобы задать ему тот фон, который принят в данном браузере по-умолчанию для него
В разных браузерах этот фон разный, и хотелось бы естественного отображения, несмотря на жестко заданный стиль

Gvozd 20.06.2012 22:27

Цитата:

Сообщение от Deff
А так ?

Два одинаковых textarea с цветом фона заданным в первом CSS-правиле

Deff 20.06.2012 22:29

Gvozd,
Воть (помню, что делал

melky 20.06.2012 22:34

Цитата:

Сообщение от Gvozd (Сообщение 182838)
нету возможности менять этот код

А почему нельзя прописать такой селектор с помощью JS ?

Gvozd 20.06.2012 22:48

Цитата:

Сообщение от melky
А почему нельзя прописать такой селектор с помощью JS ?

Всмысле найти и изменить селектор в конкретном cssRule?
перебирать все styleSheet-ы, и их cssRule я оставил на крайний случае

Seva1986 20.06.2012 22:49

Цитата:

Сообщение от Gvozd
Задача в том, чтобы задать ему тот фон, который принят в данном браузере по-умолчанию для него
В разных браузерах этот фон разный, и хотелось бы естественного отображения, несмотря на жестко заданный стиль

css никак.
Пришли в голову два варианта потом посмотрел ваш первый пост и понял что вам тоже они пришли в голову.

мне первый вариант нравиться.

Seva1986 20.06.2012 22:52

стоп а скриптом можно добраться к таблице стилей браузера? может есть какойто объект или свойства у каждого браузера свои?

Deff 20.06.2012 22:57

Цитата:

Сообщение от Gvozd
Всмысле найти и изменить селектор в конкретном cssRule?
перебирать все styleSheet-ы, и их cssRule я оставил на крайний случае

Найти заранее редкоиспользуемый/неиспользуемый элемент закинуть на страницу -считать цвет
теги <center> редко кто красит

Gvozd 20.06.2012 23:12

Цитата:

Сообщение от Seva1986
стоп а скриптом можно добраться к таблице стилей браузера?

Да
document.styleSheets[0].cssRules//набор правил из первой подключенной таблицы(в Chrome)

Цитата:

Сообщение от Seva1986
свойства у каждого браузера свои?

Отличия незначительные, но есть

Gvozd 20.06.2012 23:13

Цитата:

Сообщение от Deff
Найти заранее редкоиспользуемый/неиспользуемый элемент закинуть на страницу -считать цвет
теги <center> редко кто красит

и?
как цвет <center>-а мне поможет определить цвет дефолтного textarea?

Deff 20.06.2012 23:25

Gvozd,
По идее - в pop-up без стиля закинуть воть и дефолтный цвет

Seva1986 20.06.2012 23:56

Gvozd,
Цитата:

Сообщение от Gvozd
Да
document.styleSheets[0].cssRules//набор правил из первой подключенной таблицы(в Chrome)

Отличия незначительные, но есть

ну так вот ответ на вопрос, сбиваем все стили для текстарии и применяем то что в document.styleSheets[0].cssRules находиться.

Gvozd 21.06.2012 00:01

Цитата:

Сообщение от Seva1986
ну так вот ответ на вопрос, сбиваем все стили для текстарии и применяем то что в document.styleSheets[0].cssRules находиться.

для этого нужно обойти все правила, и проверить селектор в каждом из них, соответсвует ли он textarea
поэтому этот способ - крайний

Deff 21.06.2012 00:17

Gvozd,
подложить под textarea копию того-го ж размера закинутого в пустой фрейм (адрес не выставляем, т.е фрейм не загружается, стиля нет) - у текущего же - делаем begrond прозрачный

Gvozd 21.06.2012 00:30

Цитата:

Сообщение от Deff
подложить под textarea копию того-го ж размера закинутого в пустой фрейм (адрес не выставляем, т.е фрейм не загружается, стиля нет) - у текущего же - делаем begrond прозрачный

пример с фоном является только частным случаем - хотелось бы универсальный вариант и для других элементов/свойств
И этот вариант схож, но хуже вариант №1 который я привел в начале темы - просто получить из фрейма нужные стили .
хотелось бы еще что-то, кроме описанных мною вариантов

Deff 21.06.2012 00:35

Gvozd,
Создать заранее таблицу дефолтных стилей с чистой страницы для востребованных элементов со всех браузов - думаю потянет кило на 4
загружать её как внешний скрипт c перемнной vаr

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, время: 17:48.