Javascript-форум - Вывести свойства в отдельный контейнер

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

21.05.2018 17:40

Вывести свойства в отдельный контейнер

Добрый день.

Подскажите, как при помощи скрипта вывести в отдельный div контейнер только свойство box-shadow одного из блоков при нажатии? их 4 https://jsfiddle.net/5usu50ep/ Т.е. я нажимаю на 1 и 2, а в контейнере выводятся класс и свойства тени каждого контейнера.

madeas

21.05.2018 17:53

Возможно, так даже будет легче https://jsfiddle.net/t6Lo1je7/

рони	21.05.2018 18:17

madeas,
если макет разместить тут, ответы появятся оперативнее ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.flex {
  display: flex;
}
.block {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  border: 0;
  background: #fff !important;
}
.block::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #fff;
}
.bShadow-1{-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);-moz-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);}
.bShadow-2{-webkit-box-shadow:0 0 20px 0 rgba(150,150,150,.1);-moz-box-shadow:0 0 20px 0 rgba(150,150,150,.1);box-shadow:0 0 20px 0 rgba(150,150,150,.1);}
.bShadow-3{-webkit-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);-moz-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);box-shadow:0 20px 60px -10px rgba(0,0,0,.1);}
.bShadow-4{-webkit-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);-moz-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var b = $(".block"), out = $(".out"), text;
b.on("click", function() {
   text = this.className + " " + $(this).css("box-shadow")
   out.text(text)
})

});
  </script>
</head>

<body>
<div class="flex numbers">
  <input type="checkbox" class="block bShadow-1">
  <input type="checkbox" class="block bShadow-2">
  <input type="checkbox" class="block bShadow-3">
  <input type="checkbox" class="block bShadow-4">
</div>
<div class="out"></div>

</body>
</html>

void()

21.05.2018 18:25

Вариант без jQuery

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Пример</title>
</head>
<body>

	<div class="flex numbers">
		<input type="checkbox" class="block bShadow-1">
		<input type="checkbox" class="block bShadow-2">
		<input type="checkbox" class="block bShadow-3">
		<input type="checkbox" class="block bShadow-4">
	</div>

	<div class="result"></div>

	<script >
		window.onload = function(){
			var items = document.querySelectorAll('.flex input');
			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 = styleItem.boxShadow;
			}
		}
	</script>

	<style type="text/css">
	.flex {
		display: flex;
	}
	.block {
		position: relative;
		width: 100px;
		height: 100px;
		margin: 20px;
		border: 0;
		background: #fff !important;
	}
	.block::after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #fff;
	}
	.bShadow-1{-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);-moz-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);}
	.bShadow-2{-webkit-box-shadow:0 0 20px 0 rgba(150,150,150,.1);-moz-box-shadow:0 0 20px 0 rgba(150,150,150,.1);box-shadow:0 0 20px 0 rgba(150,150,150,.1);}
	.bShadow-3{-webkit-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);-moz-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);box-shadow:0 20px 60px -10px rgba(0,0,0,.1);}
	.bShadow-4{-webkit-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);-moz-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);}
</style>

</body>
</html>

madeas

21.05.2018 18:43

Void, без библиотеки не выводит, почему-то.
А можно сделать вывод только класса bshadow, без .Block, где содержимое класса = выведенному в результат, со скобками и кроссом на новой строке? Вроде генератора

рони	21.05.2018 19:00

Цитата:

Сообщение от madeas

Void, без библиотеки не выводит, почему-то.

здесь работает?

Цитата:

Сообщение от madeas

А можно сделать вывод только класса bshadow, без .Block,

можно

text = this.className.match(/bS\S+/)[0] + " " + $(this).css("box-shadow")

Цитата:

Сообщение от madeas

где содержимое класса = выведенному в результат, со скобками и кроссом на новой строке? Вроде генератора

не осилил

madeas

21.05.2018 19:01

Ваш работает, void здесь не работает, может у меня проблема, не вижу результат просто

рони	21.05.2018 19:06

madeas,
а какой браузер?

void()

21.05.2018 19:29

madeas,
1. Должно работать, проверил даже в IE. В демонстрации выше, вывод результата просто не помещается, надо прокрутить окошко (iframe), там ниже выводится.

2. Не понимаю, чего вы хотите добиться... Так?

result.innerHTML = '.bshadow { ' + styleItem.boxShadow + ' }';

madeas

21.05.2018 19:41

рони,
Яндекс. Работает, видимо заглючил.

void(),
да, спасибо. Только хотел в более полном виде:

.bShadow-1 {
  -webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);
  -moz-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);
  box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);
}
.bShadow-2 {
  -webkit-box-shadow:0 0 20px 0 rgba(150,150,150,.1);
  -moz-box-shadow:0 0 20px 0 rgba(150,150,150,.1);
  box-shadow:0 0 20px 0 rgba(150,150,150,.1);
}

и при нажатии на нужный input, чтобы он добавлялся или убирался из поля результата. Чтобы в конечном итоге получить несколько классов и их можно было скопировать.

void()

21.05.2018 19:42

Можно так:

function getShadow(e){
				var styleItem = getComputedStyle(e.target);
				result.innerHTML = '.bshadow{<br>' + 
				'-webkit-box-shadow: ' + styleItem.boxShadow + '; <br>' +
				'-moz-box-shadow: ' + styleItem.boxShadow + '; <br>' +
				'box-shadow: ' + styleItem.boxShadow + '<br>}';
			}

madeas

21.05.2018 21:25

void(),
У меня получилось в итоге вот так https://jsfiddle.net/cog95xb1/ но скрипт не захватывает сами номера блоков (-1, -2 и т.д.), так как класс bShadow прописан нами вручную. Как это подправить? И второй вопрос, как вывести последующие нажатые блоки таким же образом?

рони	21.05.2018 21:49

madeas,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.flex {
  display: flex;
}
.block {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  border: 0;
  background: #fff !important;
}
.block::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #fff;
}
.bShadow-1{-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);-moz-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);box-shadow:0px 1px 1px 1px rgba(0,0,0,0.06);}
.bShadow-2{-webkit-box-shadow:0 0 20px 0 rgba(150,150,150,.1);-moz-box-shadow:0 0 20px 0 rgba(150,150,150,.1);box-shadow:0 0 20px 0 rgba(150,150,150,.1);}
.bShadow-3{-webkit-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);-moz-box-shadow:0 20px 60px -10px rgba(0,0,0,.1);box-shadow:0 20px 60px -10px rgba(0,0,0,.1);}
.bShadow-4{-webkit-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);-moz-box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);box-shadow:0 15px 45px -9px rgba(0,0,0,0.25);}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    function getShadow(e) {
        var s = getComputedStyle(e).boxShadow;
        return "{<br>" + "-webkit-box-shadow: " + s + "; <br>" + "-moz-box-shadow: " + s + "; <br>" + "box-shadow: " + s + "<br>}"
    }
    var b = $(".block"),
        out = $(".out"),
        text;
    b.on("click", function() {
        text = $.map(b.filter(":checked"), function(e) {
            return "<br>" + e.className.match(/bS\S+/)[0] + getShadow(e)
        });
        out.html(text)
    })
});
  </script>
</head>

<body>
<div class="flex numbers">
  <input type="checkbox" class="block bShadow-1">
  <input type="checkbox" class="block bShadow-2">
  <input type="checkbox" class="block bShadow-3">
  <input type="checkbox" class="block bShadow-4">
</div>
<div class="out"></div>
</body>
</html>

void()

21.05.2018 22:12

madeas,
1. Вот вместо вручную прописанного класса -

e.target.classList[1]

Проверено, работает. Берет 2-й по счету класс, то есть как раз bShadow-1, bShadow-2 и т.д.

2. Вместо = ставим += . Типа так:

result.innerHTML += '.bshadow{<br>' +

Правда в этом случае если два раза нажать на один блок, добавится два одинаковых кода и надо еще это обойти.

madeas

21.05.2018 23:09

void(),
Поставил, работает. Обойти можно путем добавления в каждый input onClick="this.disabled=true"

типо вот так: <input type="checkbox" class="block bShadow-4" onClick="this.disabled=true; this.value='Sending…';">

но не совсем понял про замену вручную... подскажите, как должно выглядеть?
у меня скрипт получился такой

// выводим нажатые блоки в поле result
		window.onload = function(){
			var items = document.querySelectorAll('.flex input');
			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 += '<br>.bshadow{<br>' + 
				'-webkit-box-shadow: ' + styleItem.boxShadow + '; <br>' +
				'-moz-box-shadow: ' + styleItem.boxShadow + '; <br>' +
				'box-shadow: ' + styleItem.boxShadow + ';<br>}';
			}
		}

j0hnik

21.05.2018 23:13

result.innerHTML += e.target.classList[1]+'{<br>' +

madeas

22.05.2018 09:03

j0hnik,
в таком виде пропадает точка и перенос строки перед классом

madeas

22.05.2018 09:04

поправил

result.innerHTML += 
				'<br>.' +e.target.classList[1]+'{<br>' +

madeas

22.05.2018 12:11

void(), j0hnik, рони, спасибо за помощь!
Вышло вроде не плохо https://madeas.github.io/box-shadows. При нажатии на кнопку "show in blocks" появляется возможность точной настройки странички и небольшой генератор из кода, собранного здесь. Не знаю, на сколько полезная вещь получилась, но надеюсь, кому-нибудь пригодится.

Еще раз, большое спасибо за помощь и профессионального развития!

madeas

22.05.2018 12:51

Ребят, подскажите, а можно ли к этому результату добавить кнопку, чтобы при помощи js пользователи могли генерировать свой файл из выбранных стилей? в формат box-shadows.css или txt
Или здесь уже нужен php обработчик?

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