|
Сообщение от Блондинка
|
|
предположив что на странице может быть не один контейнер с кодом
|
однако вы говорили про глобальные переменные... и как понять, что к какому примеру относится? Так это тогда в цикле обрабатывается, вместо переменных, где указывались нужные id теперь это атрибут data-idname на примере, а кнопка, которая переключает помечается атрибутом data-run
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>pre{background:#f5f5f5}</style>
</head>
<body>
<article class="demo" data-idname="a b c d e">
<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" data-run>
<span id="span_ital" class="span_bold"></span>
</button>
Нажмите на кнопку, чтобы посмотреть как изменится радиус углов при разных значениях.
</article>
<article class="demo" data-idname="c-1 c-2 c-3 c-4">
<style>
.box {
background: #f0f0f0;
border: 1px solid #999;
width: 400px;
height: 100px;
font-size: 150%;
}
#c-1 { background-color: deeppink; }
#c-2 { background-color: gold; }
#c-3 { background-color: yellowgreen }
#c-4 { background-color: gray }
</style>
<button class="box" data-run><span></span></button>
</article>
<script>
function $(selector, node) { return (node || document).querySelector(selector); }
function $$(selector, node) { return Array.prototype.slice.call((node || document).querySelectorAll(selector)); }
$$("article.demo").forEach(function(demo) {
var idname = demo.getAttribute("data-idname").split(/\s+/);
var code = document.createElement("pre");
code.textContent = demo.innerHTML;
(function() {
var i = 0;
var e = $("[data-run]", 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 Я думаю, что data-idname скоро превратится в data-selectors, но
|
Сообщение от Блондинка
|
|
с остальным справлюсь сама
|