Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вывести свойства в отдельный контейнер (https://javascript.ru/forum/dom-window/73848-vyvesti-svojjstva-v-otdelnyjj-kontejjner.html)

madeas 22.05.2018 13:47

Задачу решил, но пришлось применить библиотеку, убрать <br> из скрипта и заменить div.result на textarea.result https://jsfiddle.net/madeas/6og583b8/ - генерирует сразу css файл
Отсюда вылезли другие проблемы.

void(),
подскажите, пожалуйста. Можно ли настроить ваш код на переход по новым строкам для textarea? В ином случае он выводит все с сплошным текстом и показывает <br>
Я убрал из кода перенос, получилось вот так:
// выводим нажатые блоки в поле result
		window.onload = function(){
			var items = document.querySelectorAll('.flex div.block');
			var result = document.querySelector('.result');

			for(var i = 0; i < items.length; i++){
				items[i].addEventListener("click", getShadow);
			}

			function getShadow(e){
				var styleItem = getComputedStyle(e.target);
				result.innerHTML += 
				'.' +e.target.classList[1]+'{' +
				'-webkit-box-shadow:' + styleItem.boxShadow + ';' +
				'-moz-box-shadow:' + styleItem.boxShadow + ';' +
				'box-shadow:' + styleItem.boxShadow + ';}';
			}
		}

void() 22.05.2018 14:18

madeas,
Неплохо :victory:

Сохранять файлы можно. Я когда-то делал такую возможность для своего текстового редактора. Используется API в HTML5. Есть готовые библиотеки для работы с этим API в щадящем для мозга виде и разными фишками.
Но в целом типа того - https://codepen.io/davidelrizzo/pen/cxsGb
-----
Если я правильно понял задачу, то перенос строки в textarea осуществляется с помощью символов

&#13;&#10;
Или - \n

madeas 22.05.2018 15:38

Ну да, примерно на этом и реализовал.
Спасибо, все получилось https://madeas.github.io/box-shadows. Заменил <br>, все работает.

madeas 22.05.2018 17:41

void(),
еще немного помучаю, если не против.

я тут собрал такой код:
<textarea id=get_date>
Здесь какой-то текст (тут дата и время) здесь продолжение текста без пробелов и отступов.
</textarea>
<script>
var d=new Date();
var day=d.getDate();
var month=d.getMonth() + 1;
var year=d.getFullYear();
var hours=d.getHours();
var minutes=d.getMinutes();
document.write(year + '' + month + '' + day + '' + hours + '' + minutes);
get_date.innerHTML+=day+''+month+''+year+''+hours+''+minutes;
</script>


Надо чтобы в определенном месте textarea выводились указанные скриптом данные, т.е. текущие дата и время. Или после указанного слова. Это возможно? Сейчас, если убрать
document.write(year + '' + month + '' + day + '' + hours + '' + minutes);
получится просто текст с краю.

madeas 23.05.2018 10:44

Решил. Оставлю тут, может пригодится кому. В примере ниже генерируется нынешнее время в указанном скриптом месте. Между текстом.
<textarea class="result" id="result"></textarea>

var d=new Date();
		var day=d.getDate();
		var month=d.getMonth() + 1;
		var year=d.getFullYear();
		var hours=d.getHours();
		var minutes=d.getMinutes();
			result.innerHTML+= '/*!\n'+' * box-shadows.min.css v1.0.1'+'g' + day+''+month+''+hours+''+minutes+' - https://github.com/madeas/box-shadows.css\n'+' * \n'+' * Copyright (c) 2018 Andrej Sharapov\n'+' * Licensed under MIT (https://github.com/madeas/box-shadows.css/blob/master/LICENSE)\n'+' */\n'+'\n';

Nexus 23.05.2018 11:03

Я бы так сделал:
<textarea style="width:100%;min-height:100px;" id="result">/*!
 * box-shadows.min.css v1.0.1g#DAY#MONTH#HOURS#MONUTES - https://github.com/madeas/box-shadows.css
 * 
 * Copyright (c) 2018 Andrej Sharapov
 * Licensed under MIT (https://github.com/madeas/box-shadows.css/blob/master/LICENSE)
 */
</textarea>
<script>
const date=new Date();
result.value=result.value
	.replace('#DAY',date.getDate())
	.replace('#MONTH',date.getMonth()+1)
	.replace('#HOURS',date.getHours())
	.replace('#MONUTES',date.getMinutes());
</script>

madeas 23.05.2018 11:30

Nexus,
Я пробовал сделать подобным образом. Это чуть проще, но не эффективно, поскольку ниже надо еще вывести данные нажатых блоков, а при заполненном содержимом поля, они не добавляются. Я вообще в скриптах не шарю, собственная "хотелка" заставила выкручиваться. Может если доработать ваш код, все и получится, но моих знаний не достаточно) Так что, пусть пока будет так.

Dilettante_Pro 23.05.2018 11:38

Цитата:

надо еще вывести данные нажатых блоков, а при заполненном содержимом поля, они не добавляются.
:blink:

<textarea style="width:100%;min-height:150px;" id="result">/*!
 * box-shadows.min.css v1.0.1g#DAY#MONTH#HOURS#MONUTES - https://github.com/madeas/box-shadows.css
 * 
 * Copyright (c) 2018 Andrej Sharapov
 * Licensed under MIT (https://github.com/madeas/box-shadows.css/blob/master/LICENSE)
 */
</textarea>
<div id="press">
  Содержание, которое надо еще добавить
</div>
<script>
const date=new Date();
result.value=result.value
	.replace('#DAY',date.getDate())
	.replace('#MONTH',date.getMonth()+1)
	.replace('#HOURS',date.getHours())
	.replace('#MONUTES',date.getMinutes());
press.onclick = function() {
   result.value=result.value + this.textContent;
}
</script>


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