|
Сообщение от Блондинка
|
|
какого парсера, есть один единственный контейнер с кодом, и один единственный див-демонстратор, и вот для этой пары нужен скрипт исполняющий вышеописанный сценарий, с остальным справлюсь сама
|
Вы же хотели сделать что-то типа учебника, 👱🏻♀️
А это обязательно так делать? &gt; &lt; Вот код берётся из <code>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>pre{background:#f5f5f5}</style>
</head>
<body>
<article class="demo">
<style>
.radius {
background: #f0f0f0;
border: 1px solid #999;
width: 420px;
padding: 15px 25px;
margin-bottom: 10px;
display: block;
}
.radius:focus{
outline: none;
border-color: #99f;
}
#a { border-radius: 50px 0 0 50px; }
#b { border-radius: 40px 10px; }
#c { border-radius: 13em / 3em; }
#d { border-radius: 13em 0.5em / 1em 0.5em; }
#e { border-radius: 8px; }
.span_bold { font-weight: bold; }
#span_ital { font-style: italic; }
</style>
<button class="radius">
<span id="span_ital" class="span_bold"></span>
</button>
Нажмите на кнопку, чтобы посмотреть как изменится радиус углов при разных значениях.
</article>
<script>
function $(selector, node) { return (node || document).querySelector(selector); }
var idname = ["a", "b", "c", "d", "e"];
var demo = $("article.demo");
var code = document.createElement("pre");
code.textContent = demo.innerHTML;
(function() {
var i = 0;
var e = $(".radius", demo);
var s = $("style", demo).sheet;
(e.onclick = function() {
var id = idname[i++ % idname.length];
for(var k = 0, len = s.cssRules.length; k < len; k++) {
if(s.cssRules[k].selectorText === ("#" + id)) {
e.style.cssText = s.cssRules[k].style.cssText;
$("*", e).textContent = s.cssRules[k].style.cssText;
break;
}
}
})();
})();
demo.insertBefore(code, demo.childNodes[0]);
</script>
</body>
</html>
UPD Ещё раз прочтите
пост №88 сначала