Javascript-форум - Показать сообщение отдельно

Блондинка · #46 (**permalink**) 18.03.2019, 13:28

laimas,
а как присвоить диву id class и стиль, а спану id и заполнить, спан текстом взятыми из контейнера <code>, и чтобы при клике на див менялись id a, b, c, d, e, a и так по кругу ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div { background: #f0f0f0; border: 1px solid #999; width: 720px; padding: 15px; margin-bottom: 10px; }

.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }
#a { border-radius: 50px 0 0 50px; }
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }
</style>
</head>
<body>
<pre><code>
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;meta charset=&quot;utf-8&quot;&gt;<br>
&lt;title&gt;border-radius&lt;/title&gt;<br>
&lt;style&gt;<br>
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }<br>
#a { border-radius: 50px 0 0 50px; }<br>
#b { border-radius: 40px 10px; }<br>
#c { border-radius: 13em/3em; }<br>
#d { border-radius: 13em 0.5em/1em 0.5em; }<br>
#e { border-radius: 8px; }<br>
&lt;/style&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&lt;div class=&quot;radius&quot;&gt;&lt;/div&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;
<code/></pre><br>
<div id="" class=""><span id=""></span></div><br>
<div id="a" class="radius"><span id="a1">border-radius: 50px 0 0 50px;</span></div>
Нажмите на блок чтобы посмотреть как изменится радиус углов при разных значениях.
</body>
</html>

другими словами хочу продемонстрировать как меняются свойства без изображений, как это сделано на этом сайте