Страница 5 из 11 « Первая < 34 5 67 > Последняя »
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как изменить ID у элемента? (https://javascript.ru/forum/misc/42036-kak-izmenit-id-u-ehlementa.html)

рони 12.03.2019 22:01
Блондинка,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Математический маятник</title>
<style>
#a {
    width: 255px;
    height: 125px;
    background: #cfe6cf;
    border-radius: 15px/12px;
    border: 1px solid #c0c0c0;
    position: absolute;
}

#b {
    width: 25px;
    height: 100px;
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 122.5px;
    -webkit-transform-origin: 50% 0 ;
       -moz-transform-origin: 50% 0;
         -o-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
}
#a.anim  #b {
    -webkit-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
       -moz-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
         -o-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
        -ms-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
            animation: pendulum-1 1.79s linear 0s 1 normal forwards;
}

#c {
    width: 1px;
    height: 75px;
    background: #999;
    position: absolute;
    left: 12px;
}
#d {
    width: 1px;
    height: 1px;
    background: transparent;
    border-top: 15px solid #000080;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    left: 120px;
}
#U_2e {
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 50%;
    background:    -moz-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
    background: -webkit-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
    background:      -o-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
    background:     -ms-radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
    background:         radial-gradient(60% 40%, circle cover, #99f 0%, #00f 100%);
    position: absolute;
    top: 75px;
}
@-webkit-keyframes pendulum-1 {
    0% {
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
    } 100% {
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}
@-moz-keyframes pendulum-1 {
    0% {
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
    } 100% {
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}
@-o-keyframes pendulum-1 {
    0% {
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
    } 100% {
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}
@-ms-keyframes pendulum-1 {
    0% {
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
    } 100% {
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}
@keyframes pendulum-1 {
    0% {
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
    } 100% {
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
}
</style>
</head>
<body>
<div id="a" class="anim">
<span id="d"></span>
<span id="b">
<span id="c"></span>
<span id="U_2e"></span>
</span>
</div>
<script>
var a = document.querySelector("#a");
a.addEventListener("click", function() {
    a.classList.remove("anim");
    document.documentElement.clientWidth;
    a.classList.add("anim");
});
</script>

</body>
</html>

Блондинка 12.03.2019 22:08
То самое, что я не могла найти, всё супер.

Malleys 14.03.2019 03:32
Цитата:
Сообщение от Блондинка (Сообщение 504711)
То самое, что я не могла найти, всё супер.
Если вы хотели добавить префиксы, то вам ещё нужно добавить -webkit-border-radius и -moz-border-radius.

Однако свойств -ms-animation, правила @-ms-keyframes и функции -ms-radial-gradient никогда в никаком браузере не существовало!

Также свойства -moz-transform, -ms-transform и -o-transform бессмысленны внутри правила @-webkit-keyframes.

Также свойства -webkit-transform, -ms-transform и -o-transform бессмысленны внутри правила @-moz-keyframes.

Также свойства -webkit-transform, -ms-transform и -moz-transform бессмысленны внутри правила @-o-keyframes.

У вас также допущена ошибка в синтаксисе функции radial-gradient

Для последних 40 версии браузеров (однако IE9+) код может выглядеть так...

#a {
	width: 255px;
	height: 125px;
	background: #cfe6cf;
	-webkit-border-radius: 15px / 12px;
	        border-radius: 15px / 12px;
	border: 1px solid #c0c0c0;
	position: absolute;
}
 
#b {
	width: 25px;
	height: 100px;
	display: inline-block;
	position: absolute;
	top: 15px;
	left: 122.5px;
	-webkit-transform-origin: 50% 0;
	    -ms-transform-origin: 50% 0;
	        transform-origin: 50% 0;
}

#a.anim  #b {
	-webkit-animation: pendulum-1 1.79s linear 0s 1 normal forwards;
	        animation: pendulum-1 1.79s linear 0s 1 normal forwards;
}
 
#c {
	width: 1px;
	height: 75px;
	background: #999;
	position: absolute;
	left: 12px;
}
#d {
    width: 1px;
    height: 1px;
    background: transparent;
    border-top: 15px solid transparent;
    border-top-color: #000080;
    position: absolute;
    left: 120px;
}
#U_2e {
	width: 25px;
	height: 25px;
	display: inline-block;
	-webkit-border-radius: 50%;
	        border-radius: 50%;
	background: -webkit-radial-gradient(60% 40%, circle, #99f, #00f);
	background: -o-radial-gradient(60% 40%, circle, #99f, #00f);
	background: radial-gradient(circle at 60% 40%, #99f, #00f);
	position: absolute;
	top: 75px;
}

@-webkit-keyframes pendulum-1 {
	from {
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}

	to {
		-webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}
}

@keyframes pendulum-1 {
	from {
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}

	to {
		-webkit-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}
}

Блондинка 14.03.2019 09:26
Цитата:
Сообщение от Malleys
Указывайте, что вы делали, что именно у вас не получается, и пусть это будет в одной теме!
Перенесла в одну тему

рони 14.03.2019 09:59
Блондинка,
можно run добавить так?
[html run]
... минимальный код страницы с вашей проблемой
[/html]

Блондинка 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>


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

laimas 18.03.2019 18:13
На том сайте представлены все "варианты", видны все элементы, менять имена атрибутов не нужно. Хотите также - делайте видимым каждый последующий. Хотите на одном показать изменения, изменяйте значение параметра правила стиля.

Блондинка 18.03.2019 18:36
Значит осталось найти ответы на три вопроса, первый как присвоить стиль диву и заполнить спан а потом при клике менять, второй это как преобразовать нормальный код в мнемонику "кавычки", и третий решить вопрос с подсветкой кода.

laimas 18.03.2019 18:43
Я не представляю какой демонстратор вы хотите иметь, но если имеется набор значений одного правила стиля, которые нужно показать на одном элементе, то технически это можно представить в виде списка или группы кнопок, в котором выбранное значение применяется к одному элементу без всяких изменений его класса, а тем более идентификатора.

Блондинка 18.03.2019 19:30
ну надо 35 строчку в коде выше заменить на 
<div style=""><span></span></div><br>
и присвоить стиль ид'а "а" а спан заполнить свойством ид'а "а", как показано в 36 строчке, (36 строчки конечно небудет) и при клике на див поменять свойства дива и текст спана взятые у ид "b" и так по кругу, зачем кнопки если сам див может играть роль кнопки.


Часовой пояс GMT +3, время: 15:41.
Страница 5 из 11 « Первая < 34 5 67 > Последняя »
Показывать 40 сообщений этой темы на одной странице