TAG
CSS
JavaScript
Result
Run
License
<h4>Select writing-mode</h4> <p> <input type="radio" id="writing-mode-horizontal-tb" name="writing-mode" value="horizontal-tb" checked="checked" /> <label for="writing-mode-horizontal-tb">horizontal-tb</label> <input type="radio" id="writing-mode-vertical-lr" name="writing-mode" value="vertical-lr" /> <label for="writing-mode-vertical-lr">vertical-lr</label> <input type="radio" id="writing-mode-vertical-rl" name="writing-mode" value="vertical-rl" /> <label for="writing-mode-vertical-rl">vertical-rl</label> </p> <div class="wrap"> <div>Hello</div> <div>HTML</div> <div>CSS</div> </div>
.wrap { display: grid; grid-gap: 10px; justify-content: start; } .wrap > div { border: 1px solid #666; padding: 20px; border-block-start: 2px solid #FF0000; border-block-end: 2px solid #0000FF; border-inline-start: 4px solid #00c9ff; border-inline-end: 4px dashed #00c9ff; } .wrap > div:first-child { grid-area: 1 / 1 / 3 / 2; border-top: 2px dotted #FF0000; border-bottom: 2px dotted #0000FF; } .wrap > div:nth-child(2) { grid-area: 1 / 2 / 2/ 3; } .wrap > div:last-child { grid-area: 2 / 2 / 3 / 3; }
window.addEventListener("load", () => { let elWrap = document.querySelector(".wrap"); [...document.querySelectorAll("input[name='writing-mode']")].map(item => { item.onclick = e => { let value = e.currentTarget.value; elWrap.style.writingMode = value; }; }); });
Console
expand_less
License
License
by DevDic
Close