<p>Вибери потрібне значення для <code>text-decoration-style</code>:</p>
<select id="form">
<option value="solid" name="value2" selected>solid</option>
<option value="double" name="value2">double</option>
<option value="dotted" name="value2">dotted</option>
<option value="dashed" name="value2">dashed</option>
<option value="wavy" name="value2">wavy</option>
</select>
<p id="text">Текст виводиться як зазвичай. За замовчуванням.</p>
<hr>
<p id="block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa facilis, beatae ipsam qui quam vitae officiis commodi eius error non.
</p>* {
box-sizing: border-box;
padding: 0;
}
body {
text-align: center;
font-family: momospace;
font-size: 17px;
line-height: 1.5;
color: #222;
}
#form {
padding: 8px 16px;
font-size: 19px;
}
#block {
margin: 75px auto 0 auto;
background: gold;
padding: 16px;
font-size: 18px;
color: #222;
text-align: left;
text-decoration-color: black;
text-decoration: underline;
text-decoration-style: solid;
}
#text {
height: 150px;
background-color: #eee;
padding: 16px 0;
}var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');
var textArray = { 'solid': 'Суцільна одинарна лінія. Без задання.',
'double': 'Подвійна лінія.',
'dotted': 'Лінія з точок.',
'dashed': 'Пунктирна лінія.',
'wavy': 'Хвиляста лінія.'};
form.onchange = function change() {
var newVal = getNewValue();
block.style.textDecorationStyle = newVal;
text.innerHTML = textArray[newVal];
}
function getNewValue() {
var result = '';
for (var i = 0; i < form.options.length; i++) {
if (form.options[i].selected == true) {
result = form.options[i].value;
}
}
return result;
}
External CSS
This Pen doesn't use any external CSS resources.