Добавить параметр в css

[madeas]

Да, так и сделал.
Еще такой вопрос. Чтобы не лепить новую тему, напишу здесь.

Скажите, можно ли прилепить к этому скрипту функцию, в которой, при нажатии/наведении на один из этих блоков появлялась тень у основного контейнера. Или может сделать селект, в котором можно будет выбрать опцию с одной из этих теней и они будут менять тень основного блока. Так, наверное, даже проще и лучше будет.
https://jsfiddle.net/d1pj6k1m/
Заранее спасибо.

[рони]

можно ли

не понимаю что вы хотите сделать.

[madeas]

Рони, прошу прощения, не верно сформулировал. Я пытаюсь связать эти блоки с основным контейнером, чтобы при выборе одного из них в селекте(или наведении на блоки), менялась тень основного контейнера. Набросок кода https://jsfiddle.net/d1pj6k1m/ Что-то вроде демонстрации теней на основном контейнере.

[Dilettante_Pro]

Как-то так?

<style>
div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
}
.block-1,
.block-2,
.block-11,
.block-101,
.block-301 {
box-shadow: 10px 20px 30px gray;
height: 100px;
}
.content {
  display: block;
  width: 96%;
  height: 150px;
  background: #fafafa;
}

</style>
<div class="content">

<div class="blocks block-1">1</div>
<div class="blocks block-2">2</div>
<div class="blocks block-11">11</div>
<div class="blocks block-101">101</div>
<div class="blocks block-301">301</div>

</div>
<script>
[].forEach.call(document.querySelectorAll('.block-1'), function(node) {
	var bsh = getComputedStyle(node).boxShadow;
	node.style.boxShadow = "inset "+bsh;
});
[].forEach.call(document.querySelectorAll('.blocks'), function(node) {
	node.onmouseover = function() {
	    document.querySelector('.content').style.boxShadow = getComputedStyle(node).boxShadow;
        }
	node.onmouseleave = function() {
	    document.querySelector('.content').style.boxShadow = "";
        }
});
</script>

[madeas]

Не совсем. Еще раз прошу прощения, не верно сформулировал задачу, так как не представляю как это лучше сделать. Сам запутался.
С предыдущим скриптом разобрался. Задача теперь в другом.

Вот код https://jsfiddle.net/q2jgymq8/
В нем есть основной контейнер, блок с опциями и блоки, у которых у каждого свое свойство (в данном случае тень). Можно ли сделать так, чтобы при выборе какой-нибудь опции, появлялась/менялась тень у основного контейнера, в соответствии с тенью блоков?

[Dilettante_Pro]

madeas,
Изменил пример в пост№14

[Dilettante_Pro]

С селектором

<style>
div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
}
.block-1 {
  box-shadow: 1px 12px 19px gray;
  height: 100px;
}
.block-2 {
  box-shadow: 1px 12px 19px gray;
  height: 100px;
}
.block-11 {
  box-shadow: 0px 2px 30px gray;
  height: 100px;
}
.block-101 {
  box-shadow: 1px 20px 90px gray;
  height: 100px;
}
.block-301 {
  box-shadow: 10px 2px 190px gray;
  height: 100px;
}
.content {
  display: block;
  display: flex;
  display: -webkit-flex;
  width: 96%;
  height: 150px;
  background: #fafafa;
}
.block-select {
  border: 0;
  outline: none;
}
</style>
<div class="content">
<p>
<select size="6" multiple class="block-select">
<option disabled>Выберите блок</option>
<option>block-1</option>
<option selected>block-2</option>
<option>block-11</option>
<option>block-101</option>
<option>block-301</option>
</select>
</p>
<div class="block-1">1</div>
<div class="block-2">2</div>
<div class="block-11">11</div>
<div class="block-101">101</div>
<div class="block-301">301</div>

</div>
<script>
[].forEach.call(document.querySelectorAll('.block-1'), function(node) {
	var bsh = getComputedStyle(node).boxShadow;
	node.style.boxShadow = "inset "+bsh;
});
document.querySelector('select').onchange = function() {
	var node = document.querySelector("." + this.value);
	    document.querySelector('.content').style.boxShadow = getComputedStyle(node).boxShadow;
 
};
</script>

[madeas]

Да. Спасибо большое. А можно реализовать такое при помощи этого? Задействовать те же блоки, но не связывая скрипты, которые мы брали ранее.

<select size="6" multiple class="block-select">
<option disabled>Выберите блок</option>
<option value=".block-1">block-1</option>
<option selected value=".block-2">block-2</option>
<option value=".block-11">block-11</option>
<option value=".block-101">block-101</option>
<option value=".block-301">block-301</option>
</select>

[Dilettante_Pro]

madeas,
Пост17 видели?

[madeas]

Спасибо большое! Можно закрывать.